@font-face {
  font-family: 'Avenir Light';
  src: url('../fonts/Avenir Light/Avenir Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
}
h1, h2 {
  font-family: 'din-condensed', 'Fjalla One', sans-serif;
  font-weight: 300;
}
h1 {
  margin: 0 0 24px;
  font-size: 55pt;
  color: #2A4387;
  text-transform: uppercase;
}
h3, h4, h5, h6 {
  font-family: 'Avenir Light', 'Avenir Next', Avenir, sans-serif;
  font-weight: 300;
}
#map {
  height: 400px;
  width: 100%;
  border: 3px solid #2A4387;
  box-sizing: border-box;
}
.route-controls {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.route-controls button {
  flex: 1;
  padding: 10px 0;
  border: 3px solid #2A4387;
  border-radius: 6px;
  background: #FFFFFF;
  color: #2A4387;
  font-family: 'Passion One', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.route-controls button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.node-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 100%;
  margin-top: 24px;
  border-left: 3px solid #000000;
  border-top: 3px solid #000000;
  container-type: inline-size;
}
.node-grid input {
  aspect-ratio: 1;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  border-right: 3px solid #000000;
  border-bottom: 3px solid #000000;
  background: #FFFFFF;
  text-align: center;
  color: #2A4387;
  font-family: 'Passion One', sans-serif;
  font-weight: 700;
  font-size: 4.5cqw;
  outline: none;
}
@media (max-width: 480px) {
  .node-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .node-grid input {
    font-size: 9cqw;
  }
}