.box-container {
    display: flex;
    flex-flow: row wrap;
    text-align: center; 
    flex-wrap: wrap;
    font-family: Arial, Helvetica, sans-serif;
    align-items: flex-start;
    border-bottom: 1px solid black;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
  }
.box {
    display: flex;
    flex: 0 0 10%;
    aspect-ratio: auto 1 / 1;
    /* background-color: white; */
    
    margin: auto;
    margin-top: 5px;
    text-align: center;
    /* vertical-align: middle; */
    /* padding: 1em; */
    justify-content: center;
    align-items: center;
    /* -webkit-text-fill-color: white; */
    -webkit-text-stroke-width: 0;
    font-size: 6vw ;
}

#id_123 {
    -webkit-text-fill-color: red;
}
#id_123:hover {
    background-color: red;
    -webkit-text-fill-color: white;
}

#id_456 {
    -webkit-text-fill-color: green;
}
#id_456:hover {
    background-color: green;
    -webkit-text-fill-color: white;
}

#id_7 {
    -webkit-text-fill-color: darkmagenta;
}
#id_7:hover {
    background-color: darkmagenta;
    -webkit-text-fill-color: white;
}

#id_ace {
    -webkit-text-fill-color: royalblue;
}
#id_ace:hover {
    background-color: royalblue;
    -webkit-text-fill-color: white;
}

#id_bdfm {
    -webkit-text-fill-color: orange;
}
#id_bdfm:hover {
    background-color: orange;
    -webkit-text-fill-color: white;
}

#id_nqrw {
    -webkit-text-fill-color: gold;
}
#id_nqrw:hover {
    background-color: gold;
    -webkit-text-fill-color: black;
}

#id_g {
    -webkit-text-fill-color: yellowgreen;
}
#id_g:hover {
    background-color: yellowgreen;
    -webkit-text-fill-color: white;
}

#id_jz {
    -webkit-text-fill-color: saddlebrown;
}
#id_jz:hover {
    background-color: saddlebrown;
    -webkit-text-fill-color: white;
}

#id_l {
    -webkit-text-fill-color: lightgray;
}
#id_l:hover {
    background-color: lightgray;
    -webkit-text-fill-color: white;
}

#id_s {
    -webkit-text-fill-color: grey;
}
#id_s:hover {
    background-color: grey;
    -webkit-text-fill-color: white;
}

#id_t {
    -webkit-text-fill-color: turquoise;
    opacity: 60%;
}
#id_t:hover {
    background-color: turquoise;
    -webkit-text-fill-color: white;
}

#body {
    justify-content: left;
    align-items: baseline;
    text-align: start;
    font-family: Arial, Helvetica, sans-serif;
    font-optical-sizing: auto;
    font-size: 2vw;
}

#county {
    opacity: 0;
    transform: rotate(-30deg);
    /* justify-content: left; */
    /* text-align: start; */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5vw;
}
#county:hover {
    opacity: 100%;
}


.anton-regular {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
h3 {
    font-family: "Anton", sans-serif;
}

p {
    font-family: "Anton", sans-serif;
}