/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

:root {
  --color1:  #b58900;
  --color2:  #cb4b16;
  --color3:  #dc322f;
  --color4:  #d33682;
  --color5:  #6c71c4;
  --color6:  #268bd2;
  --color7:  #2aa198;
  --color8:  #859900;
  --link:    #268bd2;
  --info:    #268bd2;
  --success: #2aa198;
  --alert:   #b58900;
  --error:   #cb4b16;
}

.light {
  --base03:  #002b36;
  --base02:  #073643;
  --base01:  #586e75;
  --base00:  #657b83;
  --base0:   #839496;
  --base1:   #93a1a1;
  --base2:   #eee8d5;
  --base3:   #fdf6e3;
}

.dark {
  --base03:  #fdf6e3;
  --base02:  #eee8d5;
  --base01:  #93a1a1;
  --base00:  #839496;
  --base0:   #657b83;
  --base1:   #586e75;
  --base2:   #073642;
  --base3:   #002b36;
}

html * {
  box-sizing: border-box;
}

body {
  background-color: var(--base3);
  color: var(--base00);
  font-family: 'Inconsolata', monospace;
  line-height: 1;
  transition: color 0.3s ease, background-color 0.3s ease;
  margin: 0;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--base00);

  .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .title {
    display: flex;

    .icon {
      margin: 0.25rem 0.25rem 0.25rem 0.5rem;
    }

    span {
      padding: 0.5rem 0.5rem 0.5rem 0;
    }
  }

  .form {
    padding: 0;
    flex: 0 1 30rem;

    input {
      width: 100%;
    }
  }

  .utils {
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

a:link, a:visited {
  color: var(--base00);
  text-decoration: none;
  font-weight: 700;
  outline: none;
}

svg.icon {
  fill: currentColor;
  vertical-align: top;
}

.c1 { color: var(--base01); }
.c2 { color: var(--color7); }
.c3 { color: var(--color8); }
.c4 { color: var(--color1); }
.c5 { color: var(--color2); }
.c6, .tri { color: var(--color3); }
.c13 { color: var(--color4); }
.c12, .c14, .c15, .c16, .c17, .c18 { color: var(--color5); }

.hs {
  color: var(--color6);
}
.ls {
  color: var(--color1);
}
.ns {
  color: var(--color3);
}

.turbo-progress-bar {
  background: var(--base00);
}

.center-container {
  margin: auto;
  max-width: 60rem;
  padding: 0.5rem;
}