* {box-sizing: border-box; }

body{
    margin: 0px; 
    font-size: large;
    background-size: 100% 1000px;
}

.grid-container{
    display: grid;
    grid-template-areas:
        'header header'
        'menu menu'
        'picture words'
        'form form'
        'footer footer';
    gap: 10px;
    padding: 10px;
}

header{grid-area: header;}
nav{grid-area: menu;}
p{grid-area: words;}
form{grid-area: form;}
img{grid-area: picture;}
footer{grid-area: footer;}

.grid-container > *{
    text-align: center;
    border-radius: 5px;

}


input[type=submit]{
    background-color: aqua;
    font-family: StardewValleyFont;
    border: none;
    text-decoration: none;
    cursor: pointer;
    border: 3px solid yellowgreen;
    width: 150px;
}

input[type=submit]:hover{
    background-color: blue;
    color: white;
    border-radius: 10px;
}

form{
    background-image: url(menuBack.png);
    background-repeat: no-repeat;
    background-size: 972px 221px;


}

form > *{
    margin: 30px 5px 10px;
    border-radius: 20px;
    border: 3px solid yellowgreen;
    font-family: StardewValleyFont;
    font-size: larger;
    
}

input[type=text]{
    width: 90%;
    padding: 20px 3px;
    margin: 30px 0px 50px;
    
}

input[type = email]{
    width: 40%;
}

p{
    font-size:xx-large;
}


@media screen and (max-width: 992px){
    img{
        width: 100%;
        margin: 10px;
    }

    header{
        width: 95%;
    }

    form{
        width: 100%;
        background-size: 100% 221px;
    }
}

@media screen and (max-width: 600px) {
    .grid-container{
        display: grid;
        grid-template-areas:
            'header'
            'menu'
            'picture'
            'words'
            'form'
            'footer';
        gap: 10px;
        padding: 10px;
    }

    li{
        text-align:center;
        float: none;
        margin: 10px 10px;
        background-size: 100% 64px;
    }
    ul{
        width: 90%

    }
    a{
        text-align: center;
        width: 100%;
    }

    a:hover{
        width: 100%;
    }

    body{
        background-size: 200% 1250px;
        background-position: center;
    }
    img{
        width: 95%
    }
}