*{margin: 0;padding: 0;box-sizing: border-box;}
/*  === SITEWIDE ===  */
html{
    font-family: Helvetica, sans-serif;
    color: hsl(0 0% 80%);
}
body{
    min-height: 100vh;
    background-color: hsl(0 0% 20%);
}
/*  === UTILITY CLASSES ===  */
.highlight1{
    background-color: red;
}
.highlight2{
    background-color: blue;
}
/*  === TYPOGRAPHY ===  */
.main_header{
    margin-bottom: 2rem;
}
.main_header > h1{
    text-align: center;
    padding: 1rem;
}
.R-image_wrapper{
    padding: 1rem;
    /* width: 100vw; */
    max-width: 500px;
    margin: 0 auto;
}
.R-image{
    width: 100%;
}
.data_header{
    padding: .5rem;
    margin-bottom: 1rem;
    text-align: center;
}
.data_header > h2{
    line-height: 2em;
}
.data_header > p{
    line-height: 1.5em;
}
.general-data{
    padding: 1rem;
    text-align: center;
}
.general-data > p{
    line-height: 1.5em;
}
.number-data{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    max-width: 500px;
    max-height: 50vh;
    margin: 0 auto 2rem auto;
    /* margin-bottom: 2rem; */
    border: 20px solid hsl(0 0% 15%);
    border-bottom: 15px solid hsl(0 0% 10%);
    border-radius: 10px;
    overflow: hidden;
}

.number-data > h3{
    text-align: center;
    padding: 1em;
}
.number-data > p{
    text-align: center;
    line-height: 1.5em;
}
.numbers{
    max-height: 50vh;
    padding: 10px 0;
    overflow-y: scroll;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: auto 1fr;
    justify-content: space-evenly;
    gap: .5rem;
}
.numbers > div{
    text-align: center;
    background-color: hsl(0 0% 30%);
    padding: 5px;
    border-radius: 5px;
}
.numbers > div:hover{
    outline: 2px solid hsl(120 100% 50% / 0.5);
}
.numbers > div:active{
    outline: 2px solid hsl(120 100% 50% / 0.5);
}
.numbers > div > h3{
    font-size: .75rem;
    background-color: hsl(0 0% 20%);
    line-height: 2em;
}
.numbers > div > p{
    font-size: .75rem;
    line-height: 1.6em;
}
.numbers > div > p:nth-child(3){
    font-weight: 700;
}
.group-data{
    margin-bottom: 1rem;
}
.group-data > header{
    margin-bottom: 1rem;
}
.group-data > header > h3{
    margin-bottom: 1em;
    text-align: center;
}
.search-group_form{
    position: relative;
    display: grid;
    grid-template-columns: 90vw;
    grid-template-rows: auto auto auto;
    justify-content: center;
}
/* .search-group_form::before{
    content: "Not available";
    position: absolute;
    inset: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1rem;
    color: hsl(0 0% 100%);
    background-color: hsl(0 0% 0% / 0.8);
    display: grid;
    place-items: center;
} */
.search-group_form > *{
    margin-bottom: .5rem;
}
.search-group_label{
    text-align: center;
}
.search-group_input{
    font-size: 1rem;
    padding: 5px;
}
.search-group_btn{
    padding: 5px 10px;
    cursor: pointer;
}
.group{
    text-align: center;
}
.group-data > p > span{
    font-family: monospace;
    font-size: .35rem;
    font-weight: 700;
}
footer{
    text-align: center;
    font-size: 1rem;
}
footer > *{
    margin-bottom: 1em;
}

@media only screen and (min-width: 500px) {
    .search-group_form{
        grid-template-columns: 500px;
    }
    .group-data > p > span{
        font-size: .5rem;
        line-height: 1.5em;
    }
}
@media only screen and (min-width: 900px) {
    .group-data > p > span{
        font-size: .75rem;
        line-height: 1.5em;
    }
}

@media only screen and (min-width: 1000px) {
    .group-data > p > span{
        font-size: 1rem;
        line-height: 1.5em;
    }
}