/* Colors */
:root {
  --harlem: #0039A6;
  --new-haven: #EE0034;
  --pascack: #8E258D;
  --hudson: #009B3A;
  --port-jervis: #FF7900;
}

body,
html {
  background-color: #333;
  color: #FDFFFC;
}

h1 {
  justify-content: center;
  text-shadow: .08em .08em #000;
  display: flex;
  margin: .5em 0 0 0;
  font-size: 2.5em;
}

h2 {
  text-align: center;
  margin: 0 0 .75em 0;
  font-size: 1.25em;
}

a {
  color: #FDFFFC;
  text-decoration: none;
}

.links a,
.top a {
  border-top-style: solid;
  border-width: .33em;
  background-color: #111111;
  border-color: white;
  min-height: 3em;
  padding: .5em;
  font-size: 1.15em;
}

.top a {
  margin: .5em;
  min-width: 7em;
}

#quick.top a {
  min-width: 6em;
}

h2 a {
  text-decoration: underline;
}

.top {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 100%;
  max-width: 1000px;
  text-align: center;
}

.links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: .66em;
  row-gap: .33em;
  padding: 1em;
  margin: auto;
  width: 100%;
  max-width: 1000px;
}

#quick a:nth-child(1) {
  border-color: var(--harlem)
}

#quick a:nth-child(2) {
  border-color: var(--new-haven)
}

#quick a:nth-child(3) {
  border-color: var(--pascack)
}

#quick a:nth-child(4) {
  border-color: var(--hudson)
}

#quick a:nth-child(5) {
  border-color: var(--harlem)
}

#quick a:nth-child(6) {
  border-color: var(--new-haven)
}

.links a:nth-child(4n+1) {
  border-color: var(--harlem)
}

.links a:nth-child(4n+2) {
  border-color: var(--new-haven)
}

.links a:nth-child(4n+3) {
  border-color: var(--pascack)
}

.links a:nth-child(4n+4) {
  border-color: var(--hudson)
}

a.cur-tab {
  border-color: var(--port-jervis);
}

footer {
  margin-left: 1em;
}

@media screen and (max-width: 800px) {
  .top {
    max-width: 500px
  }

  .links {
    grid-template-columns: 1fr 1fr;
    column-gap: .66em;
    row-gap: .33em;
    max-width: 500px
  }
  .links a:nth-child(4n+1) {
    border-color: var(--harlem)
  }
  
  .links a:nth-child(4n+2) {
    border-color: var(--new-haven)
  }
  
  .links a:nth-child(4n+3) {
    border-color: var(--harlem)
  }
  
  .links a:nth-child(4n+4) {
    border-color: var(--new-haven)
  }
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --header-border: #e0e0e0;
    --gray: #8B8B8C;
    --body-text: #F2F2F2;
    --visited-link: #C0C0C0;
    --unvisited-link: #C0C0C0;
    --page-background: #0D0D0B;
    --gray1: #8B8B8C; 
    --gray2: #25261F; 
    --gray3: #0D0D0B; 
    --gray4: #595958; 
    --gray5: #F2F2F2; 
    --highlight: #81046e66;
  }
} */