body {
    margin: 0;
    height: 100vh;
}

canvas {
    display: block;
}

h1 {
    position: absolute;
    top: 1em;
    margin-left: 50%;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 10em;
    font-style: italic;
    width: auto;
    line-height: 0.8em;
    border: 5px solid black;
    border-radius: 30px;
    padding: 0.2em;
}
h2 {
    position: absolute;
    top: 8em;
    margin-left: 50%;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 4em;
    font-style: italic;
    /* width: auto; */
    line-height: 0.8em;
    border: 5px solid black;
    border-radius: 30px;
    padding: 0.2em;
}
h3 {
    position: absolute;
    top: 15em;
    right: 2em;
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
    font-style: italic;
    width: auto;
    line-height: 0.8em;
    border: 5px solid black;
    border-radius: 30px;
    padding: 0.2em;
}
#logo>img{
    position: absolute;
    width: 10rem;
    height: 10em;
    margin-top: 5em;
    margin-left: 50%;
    transform: translateX(-50%);
}
#logo:hover {
    /* filter: blur(2px); */
    filter: invert(1) drop-shadow(30px 10px 40px #fff);;

}

@media screen and (max-width:700px) {
    h1{
        font-size: 6em;
        top: 2em;
    }
    h2{
        font-size: 4em;
        top: 6em;
    }
    h3{
        font-size: 1.5em;
        top: 25em;
    }
}