/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: Monoton;
  src: url(Monoton-Regular.ttf);
}

@font-face {
  font-family: Bungee-Outline;
  src: url(BungeeOutline-Regular.ttf);
}

@font-face {
  font-family: Bungee-Inline;
  src: url(BungeeInline-Regular.ttf);
}

@font-face {
  font-family: Bungee-Shade;
  src: url(BungeeShade-Regular.ttf);
}

@font-face {
  font-family: Montserrat;
  src: url(Montserrat-VariableFont_wght.ttf);
}

body {
  background-color: white;
  color: green;
  text-align: left;
  margin: auto 24px;
}

p {
  font-family: helvetica, arial;
  font-size: 1em;
  margin-bottom: 16px; 
  }

h1 {
  font-family: Bungee-Shade, monospace;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  margin-bottom: 0px;
  }

h2 {
  font-family: Bungee-Shade, arial;
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin-bottom: 8px;
}

h3 {
  font-family: helvetica, arial;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  margin-bottom: 8px;
  }

h4 {
  font-family: helvetica, arial;
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-bottom: 8px;
  }

li {
  font-family: helvetica, arial;
  font-size: 1em;
  margin-bottom: 16px;
  }

hr {
  border: 3px solid green;
  }
  
footer {
  font-family: helvetica, arial;
  text-align: center;
  color: green;
  margin: 24px 24px;
}

.chart-hint {
  margin-bottom: 12px;
}

.chart-wrapper {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 32px;
}

.chart-container {
  flex: 1;
  position: relative;
  height: 78vh;
  min-height: 500px;
  min-width: 0;
}

.chart-legend {
  width: 185px;
  flex-shrink: 0;
  max-height: 78vh;
  overflow-y: auto;
  border: 1.5px solid green;
  border-radius: 4px;
  padding: 8px;
}

.legend-section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Space Mono', monospace;
  font-size: 0.82em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: green;
  padding: 4px 2px 3px;
  border-bottom: 1px solid rgba(0,128,0,0.3);
  margin-top: 8px;
  margin-bottom: 3px;
}

.legend-col-label {
  letter-spacing: 0.07em;
}

.legend-section-title:first-child {
  margin-top: 0;
}

.legend-avg {
  margin-left: auto;
  flex-shrink: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 'Space Mono', monospace;
  font-size: 0.78em;
  color: green;
  user-select: none;
  transition: background-color 0.1s;
}

.legend-item:hover {
  background-color: rgba(0,128,0,0.1);
}

.legend-item.active {
  background-color: rgba(0,128,0,0.18);
  font-weight: bold;
}

/* Slim green scrollbar for the legend */
.chart-legend::-webkit-scrollbar {
  width: 4px;
}
.chart-legend::-webkit-scrollbar-track {
  background: transparent;
}
.chart-legend::-webkit-scrollbar-thumb {
  background: rgba(0,128,0,0.3);
  border-radius: 2px;
}
.chart-legend::-webkit-scrollbar-thumb:hover {
  background: rgba(0,128,0,0.6);
}

/* Pointer cursor on chart canvas when hovering interactive elements */
#allTimeChart {
  cursor: default;
}