#header {
    display: flex;
    grid-area: header;
    border: 1px solid #758173;
    background-color: #758173;
}

#header h1 {
    font-size: 38px; 
    margin: auto;
    background-color: #758173;
    color: #EDF4F2;
    font-family: 'Cabin', sans-serif;
}

/* Navigation */
#nav {
    display: flex;
    grid-area: nav;
    border: 1px solid black;
    background-color: #C6DEC6;
}

div.nav {
    display: grid;
    grid-template-areas: 
    'button'
    'form';
    grid-template-columns: auto;
    grid-template-rows: 60% 40%;
    width: 100%;
}

div#button {
    display: block;
    grid-area: button;
    margin: auto;
}

p.button {
    position: relative;
    width: auto;
    margin: 1px;
    padding: 2em;
    background-color: #A9C5A0;
    font-family: 'Cabin', sans-serif;
}

p.button a {
    text-decoration: none;
}

p.button a:visited{
    color: black;
}

p.button:hover {
    background-color: #C6DEC6;
    width: auto;
    margin: 1px;
    padding: 2em;
}

/* Form Attributes */
div#form {
    display: flex;
    grid-area: form;
}

#form form {
    margin: auto;
}

#form fieldset {
    border: 1px solid black;
    background-color: #A9C5A0;
}

#form h1 {
    font-family: 'Cabin', sans-serif;
    text-align: center;
}

#form p {
    font-family: 'Cabin', sans-serif;
}

#form textarea {
    resize: none;
    width: 100%;
}

/* Footer */
#footer {
    position: relative;
    display: flex;
    grid-area: footer;
    border: 1px solid #758173;
    background-color: #758173;
    height: auto;
}

#footer a {
    display: inline-block;
    padding-left: 10px;
    margin: auto;
}

#footer img {
    height: 35px;
    width: auto;
    margin: auto;
}

@media screen and (max-width: 1200px) {
    /* Navigation */
    #nav {
        display: flex;
        grid-area: nav;
        border: 1px solid black;
        background-color: #C6DEC6;
    }

    div.nav {
        display: grid;
        grid-template-areas: 
        'button'
        'form';
        grid-template-columns: auto;
        grid-template-rows: auto;
        width: 100%;
    }

    div#button {
        display: flex;
        grid-area: button;
    }

    p.button {
        position: relative;
        display: inline-flex;
        width: 100px;
        margin: 1px;
        padding: 2em;
        background-color: #A9C5A0;
        font-family: 'Cabin', sans-serif;
        transition: width 10s ease-in-out;
    }

    p.button a {
        text-decoration: none;
    }

    p.button a:visited{
        color: black;
    }

    p.button:hover {
        background-color: #A9C5A0;
        width: 300px;
        margin: 1px;
        padding: 2em;
    }

    div#form {
        display: flex;
        grid-area: form;
        width: 100%;
    }

    /* Form Attributes */
    #form form {
        margin: auto;
        background-color: #A9C5A0;
        width: 100%;
    }

    #form fieldset {
        border: 1px solid #A9C5A0;
    }
    #form h1 {
        font-family: 'Cabin', sans-serif;
    }

    #form p {
        font-family: 'Cabin', sans-serif;
    }

    #form textarea {
        width: 100%;
        height: auto;
        resize: none;
    }
    
}