body{
    --font-color:rgb(73, 59, 59);
    background-color: #eaeeef;
    font-size:2vh;
    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;
}
b{
    font-weight: bold;
}
p{
    text-align: justify;
    margin: 4vh;
}
h2{
    margin : 2vh;
    font-size : 3vh;
}
.gif{
    width:53.34vh;
    height: 30vh;
}
.gif-side-to-side{
    width:53.34vw;
    height: 30vw;
}
main{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}
@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;
    }
    .gif{
        width:53.34vw;
        height: 30vw;
    }
    h2{
        margin : 2vw;
        font-size : 3vw;
    }
    p{
        margin: 4vw;
    }
    .gif-side-to-side{
        width:53.34vh;
        height: 30vh;
    }
}