*{
    font-family: "Lucida Sans", Verdana, "sans-serif";
    font-size: 16px;
    color: black;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: white;
}

#wrapper {
    max-width: 1200px; 
    margin: 0 auto; 
    display: grid;
    grid-template-areas:
    "banner" 
    "menu"
    "content"
    "base";
    grid-template-columns: 1fr; 
    grid-template-rows: minmax(120px, auto) minmax(50px, auto) minmax(400px, auto) minmax(100px, auto);
    background-color: white;

}

header {
    background-color: royalblue;
    grid-area: banner; 
    display: grid;/*sub grid*/
    grid-template-areas: 
    "logo search account";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    /* margin: 1em; */
}
    #company-logo {
        grid-area: logo;
        align-self: center;
        margin: 0.5em;
    }
    #company-logo h1{
        font-size: 2em;
        font-family: Verdana, sans-serif;
        color: white;
    }
    #search-bar {
        display: flex;
        justify-content: center;
        align-self: center;
    }
    .search-box {
        padding: 10px;
        width: 300px;
        border: 1px solid #ccc;
        border-radius: 5px 0 0 5px;
        font-size: 1em;
    }
    #account {
        grid-area: account;
        justify-self: end;
        align-self: center;
        margin: 0.5em 2em 0.5em 0.5em;
    }
    .button {
    background-color: #6f8be1;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2em;
    margin: 4px 2px;
    cursor: pointer;
    }
    .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    }

nav {
    background-color: #92a6e1;
    grid-area: menu;
}
    nav ul {
        list-style: none;
        display: flex;
        flex-direction: row; 
        flex-wrap: nowrap; 
        justify-content: space-around; 
    }
    nav a{
        text-decoration: none;
        display: block;
        padding: 1em;
    }
    nav a:hover {
        color: black;
        background: white;
    }

/*index-home*/
main.home-grid {
    background-color: white;
    grid-area: content;
    display: grid;
    grid-template-areas:
        "newsfeed recommended"
        "newsfeed trending";                     
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    margin: 0em;
}

main.home-grid h2 {
    font-size: 1.5em;
}
    article#newsfeed {
        background-color: white;
        grid-area: newsfeed;
        margin: 1em 0em 1em 0em;
    }
    aside#recommended {
        background-color: white;
        grid-area: recommended;
        margin: 1em 0em 1em 1em;
    }
        aside#trending {
        background-color: white;
        grid-area: trending;
        margin: 0em 0em 1em 1em;
    }
/*contact*/
main.form-area {
    background-color: white;
    grid-area: content;
    display: grid;
    grid-template-areas:
        "area1";                     
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    margin: 1em;
    display:block;
}
#info-form {
    display: grid;
    grid-template-columns: 1fr 4fr;
    row-gap: 1em;
    column-gap: 1em;
    align-items: center;
}

#info-form fieldset section{
    display: grid;
    grid-template-columns: 1fr 2fr;
    row-gap: 1em;
    column-gap: 1em;
    align-items: center;
}
/*description*/
main.description-grid {
    background-color: white;
    grid-area: content;
    display: grid;
    grid-template-areas:
        "description blurb";                     
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    margin: 1em;
}
#blurb {
    margin: 1em;
}
/*books*/
main.books-grid {
    background-color: white;
    grid-area: content;
    display: grid;
    grid-template-areas:
        "read"
        "want-read"
        "dnf";                     
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    margin: 1em;
}

.books-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
}
/*account*/
main.account-grid {
    background-color: white;
    grid-area: content;
    display: grid;
    grid-template-areas:
        "posts following"
        "posts followers";                     
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    margin: 1em;
}
    article#posts {
        background-color: white;
        grid-area: posts;
        margin: 1em 0em 1em 0em;
    }
    aside#following {
        background-color: white;
        grid-area: following;
        margin: 1em 0em 1em 1em;
    }
        aside#followers {
        background-color: white;
        grid-area: followers;
        margin: 0em 0em 1em 1em;
    }

footer {
    background-color: #92a6e1;
    grid-area: base;
    display: grid;
    grid-template-areas: "footer1 footer2 footer3";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;    
}
#footer1 {
    grid-area: footer1;
    margin: 0.5em 0.5em 0.5em 10em;
}
#footer2 {
    grid-area: footer2;
    justify-self: center;
    margin: 0.5em;
}
#footer3 {
    grid-area: footer3;
    justify-self: end;
    margin: 0.5em 10em 0.5em 0.5em;
}


@media screen and (max-width: 800px) {
   

header {
    grid-template-areas: 
    "logo" 
    "search" 
    "account";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    text-align: center;
    margin: 0em;
}
    #company-logo #search-bar #account{
    justify-self: center;
    align-self: center;
    margin: 1em 0em;
    }
    #account {
    justify-self: center;    
    margin: 0em 0em 0.5em 0em;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

/*index-home*/
main.home-grid {
    grid-template-areas: 
    "newsfeed"
    "recommended"
    "trending";
    grid-template-columns: 1fr;
}
 article#newsfeed {
        margin: 1em;
    }
    aside#recommended {
        margin: 1em;
    }
        aside#trending {
        margin: 1em;
    }

/*description*/
main.description-grid {
    grid-template-areas:
        "description" 
        "blurb";                     
    grid-template-columns: 1fr;
    margin: 1em;
}
#blurb {
    margin: 1em;
}

/*books*/
main.books-grid {
    grid-template-rows: auto auto auto;
}

/*account*/
main.account-grid {
    grid-template-areas:
        "posts" 
        "following"
        "followers";                     
    grid-template-columns: 1fr;
}
    article#posts {
        margin: 1em;
    }
    aside#following {
        margin: 1em;
    }
    aside#followers {
        margin: 1em;
    }

footer {
    grid-template-areas: 
    "footer1" 
    "footer2" 
    "footer3";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    text-align: center;
}
#footer1 {
    margin: 0.5em;
    justify-self: center;
}
#footer3 {
    margin: 0.5em;
    justify-self: center;
}
}