:root {
  font-family: "Fjalla One", Arial, sans-serif; 
  --overview-bg-color: #1B5697;
  --overview-color: white;
  --overview-highlight-color: #F2B600;
  --details-bg-color: #F2B600;
  --details-color: #1B5697;
  --details-highlight-color: white;   
}
html, body {
  background: var(--overview-bg-color); 
  padding: 0;
  margin: 0;  
}
.overview .town-info {
  display: none;
}
.overview .town-info.open {
  display: block;
}
#main {
  container-type: inline-size;
  padding: 0;
  .logo {
    padding: 15cqw 0 0 3cqw;
    float: left;
    img {
      width: 16cqw;
      border: 1px solid var(--overview-color);
      border-radius: 10cqw;
      padding: 2cqw;
      background: var(--details-highlight-color);
    }
  }
  h2 {
    font-size: 10cqw;
    text-align: center;
    color: var(--overview-color);
    span {
      display: block;
      &.highlight {color: var(--overview-highlight-color)}
    }
  }
  h3 {
    font-size: 8cqw;
    text-align: center;
    color: var(--overview-color);
    margin-top: -5cqw;
    margin-bottom: 15cqw;
  }
.town-links {
    margin: 0;
    background: var(--details-bg-color);
    padding: 0;
    color: var(--details-color);
    list-style: none;
    font-size: 12cqw;
    text-align: center;
    a, a.visited {
      color: var(--details-color);
      text-decoration: none;
    }
    a:hover {color: var( --details-highlight-color);}
    li {
      margin: 0;
      padding: 2cqw;
      border-top: .25cqw solid var(--details-color);
      border-bottom: .25cqw solid var(--details-color);
      span.explanation {
        display: block; 
        color: var(--details-highlight-color); 
        font-size: 50%;
        a, a:visited {color: var(--details-highlight-color);}
        a:hover {color: var(--details-color);}
      }
    }
  }
  .town-info {
    margin: 0;
    margin-top: -5cqw;
    background: var(--details-bg-color);
    padding: 5cqw 0;
    color: var(--details-color);
    a, a.visited {
      color: var(--details-color);
      text-decoration: none;
    }
    a:hover {color: var( --details-highlight-color);}
    h3 {
      padding: .5cqw;
      color: var(--details-color);
      margin-bottom: -2cqw;
      margin-top: 3cqw;
    }
    p {
      font-size: 5cqw;
      text-align: center;
    }
  }

}

#main.overview .town-info {
  margin-top: 0;
  background: var(--details-highlight-color);
  a:hover {background-color: var(--details-bg-color);}
}
@media (min-width: 500px) {
  #main {
    margin: 0 auto;
    width: 500px;
  }
}