/* 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." */

body {
  background-color: rgb(141, 220, 231);
  color: black;
  font-family: "Times New Roman", times, serif;
  font-size:18px;
}

a[href*="vocab#vocab"], a[href*="vocab#vocab"]:visited {
  color: darkgreen;
}

tr:hover {
  background-color: #99e4ef;
}

td:has(a:target) {
  background-color: #9def99;
  font-weight: bolder;
}

img {
    max-width: 100%;
}

/* Smaller Mobile For Header */
@media only screen and (max-width: 420px) {
  .header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    transition: transform 1s ease-out;
  }
  
  .carheaderimg {
    grid-column: 1 / -1;
    justify-self: center;
  }
  
  .navleft {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    justify-content: flex-end;
    margin-right: 5px;
    margin-bottom: 8px;
  }

  .navright {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: flex-start;
    margin-left: 5px;
    margin-bottom: 8px;
  }
  
  .navbutton a, .navbutton img {
    display: block;
    transition: transform 1s ease-out;
  }
}

/* Header otherwise */
@media only screen and (min-width: 421px) {
  .header {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    transition: transform 1s ease-out;
  }
  
  .navleft, .navright {
    position: relative;
    top: -15px;
  }
  
  .navbutton a {
    display: block;
    transition: transform 1s ease-out;
  }
}

/* Mobile */
@media only screen and (max-width: 600px) {
  .legend {
    border: 1px solid black;
    padding: 5px;
    background-color: white;
    display: inline-block;
  }
}

/* Desktop */
@media only screen and (min-width: 600px) {
  .legend {
    border: 1px solid black;
    padding: 5px;
    display: inline-block;
    position: relative;
    background-color: white;
    top: -50px;
    left: -20px;
  }
}

.navbutton {
  transition: transform 1s ease-out;
}

.header {
  transition: transform 1s ease-out;
}
  
.header img {
  border: 2px solid black;
  border-style: outset;
}
  
.header img:hover, .header img:active {
  border-style: inset;
}

hr {
  width: 90%;
}

.body_wrapper {
  border: 2px solid black;
  border-style: outset;
  padding: 5px;
}

.header {
  text-align: center;
  margin: auto;
  text-decoration: none;
}

.header img {
  border: 2px solid black;
  border-style: outset;
}

.header img:hover, .header img:active {
  border-style: inset;
}

.navbutton {
  width: 32px;
  height: 32px;
}

.legendtitle {
  font-weight: bolder;
}

.legendcolor {
  width: 16px;
  height: 16px;
  display: inline-block;
  border: 1px solid black;
  position: relative;
  top: 4px;
}

.legendlabel {
  padding-left: 5px;
  font-size: smaller;
}

#usmap {
    display: block;
    top: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
}

#details-box {
  /*background-color: lightblue;*/
}

#vocabtable {
  border-collapse: collapse;
  border: 1px solid black;
}
#vocabtable th {
  font-weight:bolder;
  text-align: left;
}
#vocabtable th, #vocabtable td {
  padding: 2px;
  border: 1px solid black;
}

#bigtable {
  border-collapse: collapse;
  border: 1px solid black;
}
#bigtable th {
  font-weight:bolder;
  text-align: left;
}
#bigtable th, #bigtable td {
  padding: 2px;
  border: 1px solid black;
}

#notationtable {
  border-collapse: collapse;
  border: 1px solid black;
}
#notationtable th {
  font-weight:bolder;
  text-align: left;
}
#notationtable th, #notationtable td {
  padding: 2px;
  border: 1px solid black;
}