body{
    font-size : 3vw;
}
.highlight{
    text-align: center;
}

.thumbnail_grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.thumbnail{
    width: 100%;
}
#stat_bar{
    display:grid;
    grid-template-columns : 1fr 1fr 1fr ;

    border-top: 1px solid gray;
    border-bottom: 1px solid gray;

    margin-bottom:5px;
    margin-top:5px;

}
.stat{
    text-align:center;
}

.circle_pic{
    border: solid white 1px;
    border-radius: 50%;

    width: 100%;
    height: 100%;
    object-fit: cover;
}


.highlight_pic{
    width: 10vw;
    height: 10vw;
    
    margin-left:auto;
    margin-right:auto;
}
#highlight_area{
    display: grid;
    grid-template-columns: 12vw 12vw 1fr;
}
#profile{
    display: grid;
    grid-template-columns: 1fr 3.5fr;
}
#profile_info{
    display:grid;
    grid-template-rows: 1fr 1fr;

    height: 15vw;
}
#profile_pic{
    width: 15vw;
    height: 15vw;
}
#id{
    font-size: 6vw;
    font-weight: 100px;
}
button{
    height: 80%;
    width: 95%;

    font-size: 3vw;
 
    border : solid gray 0px;
    border-radius: 5px;
}
#top{
    display:grid;
    grid-template-columns: 4fr 7fr 4fr;
    height : 10vw;
    min-height :10vw;
    border-bottom: solid gray 0.1px;
    margin-bottom: 3vw;

}
#top img{
    margin-left: auto;
    margin-right: auto;

    height: 100%;
    object-fit: contain;
}
#top input{
    height: 60%;
    width: 95%;

    
    margin-right:auto;
    margin-top:auto;
    margin-bottom: auto;

    text-align: center;
    background-color:rgb(red, green, blue);

    border: solid gray 1px;
    border-radius: 3px;

    font-size:3vw;
    font-weight: 100;

}
i{
    margin-top:5px;
    margin-bottom: 5px;
    font: size 2px;0px;
    color: black;
}
#top i{
    
    font-size :4vw;

}
#top div{
    text-align:center;
    padding-top:3vw;
}
#sub_icons{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    text-align : center;
    font-size : 3vw;

    height: 8vw;
}
.selected{
    border-bottom: solid gray 3px;
}