/*
 * 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 {
  --bg: #010913;
  --alt-bg: #08182d;
  --font: #93a1a1;
  --alt-font: #839496;
  --shadow: #01091366;
  --placeholder: #425166;
  --highlight: #ffffff;
  --floating: #dbf3fe;

  --hs: #57a5fe;
  --ls: #f49209;
  --ns: #963783;

  --c1: #93e4df;
  --c2: #9dabff;
  --c3: #e2b3e4;
  --c4: #b65cde;
  --c5: #ea5775;
  --c6: #fa2626;

  --tri: #d62c5a;
  --thera: #f4e935;
  --c13: #e57ce6;
  --drifter: #746bf6;

  --half: #b58900;
  --crit: #cb4b16;

  --here: #00ff3522;

  --link: #268bd2;
  --info: #268bd2;
  --success: #2aa198;
  --alert: #b58900;
  --error: #dc322f;

  --jita: #268bd2;
  --amarr: #b58900;
  --hek: #cb4b16;
  --dodixie: #2aa198;

  --wormhole: #6c71c4;
  --combat: #dc322f;
  --data: #268bd2;
  --relic: #d33682;
  --ore: #b58900;
  --gas: #859900;

  --buffs: #00756c;
  --nerfs: #dc322f;

  --red-flare:  #dc322f;
  --blue-flare:  #268bd2;

  --offline: #dc322f;
  --online: #2aa198;
  --follow: #268bd2;

  --frigate: #268bd2;
}

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

body {
  background-color: var(--bg);
  color: var(--font);
  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(--alt-font);
  filter: blur(0);
  transition: filter 0.3s ease;

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

  .title {
    display: flex;
    gap: 0.125rem;
    padding: 0.25rem 0.5rem;
    align-items: center;
    font-size: 1.2rem;
  }

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

    .logout {
      padding: 0.25rem 0.5rem;
      border-left: 1px solid var(--alt-font);
    }
  }
}

main {
  filter: blur(0);
  transition: filter 0.3s ease;
}

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

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

.c1 { color: var(--c1); }
.c2 { color: var(--c2); }
.c3 { color: var(--c3); }
.c4 { color: var(--c4); }
.c5 { color: var(--c5); }
.c6 { color: var(--c6); }
.tri { color: var(--tri); }
.c13 { color: var(--c13); }
.c12 { color: var(--thera); }
.c14, .c15, .c16, .c17, .c18 { color: var(--drifter); }

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

.jita { color: var(--jita); }
.amarr { color: var(--amarr); }
.hek { color: var(--hek); }
.dodixie { color: var(--dodixie); }

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

.here {
  background: linear-gradient(to right, transparent, transparent 15%, var(--here));
}

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