estilos.css

*{
    font-family: 'Nunito', sans-serif;
    font-family: 'Tilt Neon', cursive;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


main{
    width: 100%;
    height: 100vh;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    background-image: url(https://images.unsplash.com/photo-1473042904451-00171c69419d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1799&q=80);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   background-attachment: fixed;
}

nav{
    grid-area: menu;
    font-size: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(80, 176, 209);
    position: sticky;
    
    top: 0;
}
footer{
    grid-area: footer;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}



.gridcontainer{
    display: grid;
       
        gap: 20px;
        padding: 0px;
        background-color: aquamarine;

        grid-template-areas: 
        "menu"
        "main"
        "footer";

        grid-template-columns: 1fr ;
        grid-template-rows: 5% 1fr 5%;
}

@media (max-width:600px) {
    body{
        display: grid;
        width: 100vw;
        height: 100vh;
        gap: 20px;
        padding: 0px;
        background-color: red;

        grid-template-areas: 
        "menu"
        "main"
        "footer";

        grid-template-columns: 1fr ;
        grid-template-rows: 10% 1fr 5%;
        }

    }