body{
    --font-color:rgb(73, 59, 59);
    background-color: #eaeeef;
    font-size:1.5vh;
    color: var(--font-color);
}
header{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}
#menu{
    justify-self: start;
    width: 10vh;
    height: 10vh;
}
#menu img {
    width: 10vh;
    height: 10vh;
}
header h1{
    font-size: 3vh;
    justify-self: center;
}
header a{
    justify-self: end;
}
figure img{
    width: 40vh;
    height : 30vh;
}
figure{
    padding: 1vh;
    border : 1px solid;
    width : fit-content;
    background-color: #e0e0e0;
}
.course{
    justify-self: center;
    width: fit-content;
    margin: 2vh;
}
ul{
    display : flex;
    flex-wrap: wrap;
    justify-content: center;
}
figcaption{
    text-align: center;
}
.course a:hover{
    text-decoration: underline;
}
section{
    font-size:2.5vh;
}
@media screen and (min-width: 500px) {
    body{
        font-size:1.5vw;
    }
    .character {
        font-size: 2vw;
    }
    #menu{
        width: 10vw;
        height: 10vw;
    }
    #menu img {
        width: 10vw;
        height: 10vw;
    }
    header h1{
        font-size: 3vw;
    }

}