/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --noir: rgba(9, 4, 0, 1);
  --dark-blue: #061434;
  --gallery-bg: rgb(8 11 22);
  --light-gray: #ededed;
  --secondary-gray: #b5b3ba;
  --green1: rgba(16, 185, 129, 1);
  --green2: rgba(4, 209, 197, 1);
  --green3: rgba(5, 187, 176, 1);
  --green4: rgba(4, 155, 146, 1);
  --blue: rgba(0, 123, 255, 1);
  --yellow: rgba(234, 179, 8, 1);
  --red: rgba(244, 63, 94, 1);
  --success: var(--green1);
  --warning: var(--yellow);
  --error: var(--red);
  --info: var(--blue);
}

body {
  background-color: var(--gallery-bg);
  color: var(--light-gray);
  font-family: "JetBrains Mono", monospace;
}

footer {
  width: 100%;
  height: 5em;
}

#root {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  row-gap: 3em;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: start;
}

.logo .success {
  fill: var(--success);
}

.logo .warning {
  fill: var(--warning);
}

.logo .error {
  fill: var(--error);
}

.logo .info {
  fill: var(--info);
}

.panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-basis: 50%;
  row-gap: 3em;
  align-items: center;
  padding: 0 1em;
  width: 98%;
  max-width: 1000px;
}

.panel > header {
  text-align: center;
}

header li {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  grid-gap: .5em;
}

.panel > h2 {
  margin: 0;
}

header > h2 .success {
  color: var(--success);
}

header > h2 .warning {
  color: var(--warning);
}

header > h2 .error {
  color: var(--error);
}

header > h2 .info {
  color: var(--info);
}

.waits {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(auto-fit, minmax(240px, 30%));;
  grid-row-gap: .5rem;
  grid-column-gap: 2em;
  max-width: 85%;
}

.waits > h2 {
  grid-column-start: 1;
  grid-column-end: 4;
  text-align: center;
}

.category {
  display: grid;
  grid-template-rows: repeat(3, auto);
}

.fast, .relax {
  color: var(--secondary-gray);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
}

meter {
  max-width: 25%;
}

.wait {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.wait-name {
  text-align: center;
  margin-top: 1em;
}

.wait-value {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid white;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  font-size: 1.25em;
}

.wait-value.success {
  border-color: var(--success);
}

.wait-value.warning {
  border-color: var(--warning);
}

.wait-value.error {
  border-color: var(--error);
}

.issues > section {
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.issues > header > ul .marker {
  width: 1em;
  height: 1em;
}

.issue-chart {
  display: grid;
  grid-template-rows: minmax(1em, 2em) auto;
}

.issue-chart > ul .marker {
  width: .5em;
  height: 2em;
}

section > footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

ul {
  list-style: none;
  margin-left: 0;
  padding: 0;
}

.issue-chart ul {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-gap: .5em;
}

.marker.success {
  background-color: var(--success);
}

.marker.warning {
  background-color: var(--warning);
}

.marker.error {
  background-color: var(--error);
}

.marker.info {
  background-color: var(--info);
}