@font-face {
    font-family: 'Jost';
    src: url('Jost_font.ttf') format('truetype');
    font-weight: bolder;
    font-style: normal;
  }


body {
    text-align: center;
    font-size: 12px;
    font-family: Jost;
    background-color: bisque;
    color: black;
}

.center_container {
    --size: 50vh;
    display: flex;
    justify-content: center; 
    height: var(--size); 
    margin: 2vh;          
}

.img_circle {
    height: 50vh;
    width: 50vh;
    border: 0.5vh solid brown;
    border-radius: 50vh;
    fill: var(--fill);
    object-fit: cover;
}



.grid_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

@media (max-width: 768px) {
    .grid_container {
        grid-template-columns: 1fr; 
    }
}

.grid_container a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    border-radius: 1vh;
    margin: 3vh;
    background-color: brown;
    color: white;
    font-size: 24px;
    text-decoration: underline;
}

.grid_container a:hover {
    background-color: palevioletred;
    margin-right: 1vh;
    margin-left: 1vh;
    text-decoration: none;
}