* {
    box-sizing: border-box;
}

/* BODY */

    body { 
        background-color: #F7F6F2;
        color: #666666;
        font-family: Georgia, serif;
    }


/*  SITE HEADER */

    header { 
        background-color: #3B3C4E;
        background-image: url(banner.jpg);
        background-repeat: no-repeat;
        background-position: left;
        background-size: 50%;
        height: 120px;
        color: #F7F6F2;
        font-family: Georgia, serif;
        text-align: right;
        padding-top: 1px;
        padding-right: 50px;
        font-size: 24pt;
    }


/* WRAPPER */

    #wrapper { 
        background-color: #3B3C4E;
        min-width: 960px;
        max-width: 2048px;
        margin-right: auto;
        margin-left: auto;
        width: 90%;
        box-shadow: 4px 4px 4px #1E1E1E;
    }


/* NAV */
    .sidenav {
        height: 100%;
        width: 160px;
        position: fixed;
        float: left;        
        padding-left: 15px;
        margin-top: 25px;
        overflow-x: hidden;
        list-style-type: none;
    }

    .sidenav a, .dropdown-btn {
        text-decoration: none;
        background-color: #3B3C4E;
        display: block;
        border: none;
        cursor: pointer;
        outline: none;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 0;
        font-weight: bold;
        font-family: inherit;
        font-size: inherit;
        color: inherit;
    }

    .sidenav a:hover, .dropdown-btn:hover {
        color: #E7B087;
    }

    .sidenav a:visited {
        color: #8A6F66;
    }

    .active {
        background-color: green;
        color: white;
    }

    .dropdown-container {
        display: none;
        background-color: #3B3C4E;
        padding-left: 8px;
    }

    .fa-caret-down {
        float: right;
        padding-right: 8px;
    }


/* MAIN */

    main { 
        background-color: #FFFFFF;
        padding-right: 2em;
        padding-left: 2em;
        margin-left: 170px;
        overflow: auto;    
    }

        


/*HEADERS */

    h2 { 
        background-color: #3B3C4E;
        color: #F7F6F2;
        font-family: Georgia, serif;
        padding: 10px;
    }

    h3 { 
        color: #75696B;
        font-family: Georgia, serif;
    }


/* SECTIONS */

    #about {
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        height: 250px;
    }

    #choover {
        margin-right: auto;
        margin-bottom: 5px;

    }

    #dowens {
        margin-top: auto;
        margin-right: auto;
        margin-bottom: 150px;
    }

    #dpalmer {
        margin-top: auto;
        margin-right: auto;
        margin-bottom: 150px;
    }

    #estraub {
        margin-top: auto;
        margin-right: auto;
        margin-bottom: 150px;
    }

    #jclark {
        margin-top: auto;
        margin-right: auto;
        margin-bottom: 75px;
    }

    #ljewell {
        margin-top: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }

    #mkubica {
        margin-top: auto;
        margin-right: auto;
        margin-bottom: 100px;
    }

    #rhawkins {
        margin-top: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }

    #rsager {
        margin-top: auto;
        margin-right: auto;
        margin-bottom: 100px;
    }

    #sclair {
        margin-top: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }

    #purchase {
        margin-top: auto;
        margin-right: auto;
        margin-bottom: auto;
    }

    .cover {
        float: left;
        width: 250px;
        padding-left: 2em;
        padding-right: 2em;
    }

    #releases {
        height: 325px;
    }


/* TEXT */

    #about a {
        font-weight: bold;
        color: #666666;
        text-decoration: none;
    }

    #about a:visited {
        font-weight: bold;
        color: #8A6F66;
    }

    #about a:hover {
        font-weight: bold;
        color: #E7B087;
    }

    .review {
        text-align: left;
        width: 77%;
        margin-left: 100px;
    }

    .link {
        text-decoration: none;
        font-style: italic;
        font-weight: bold;
        font-size: 12pt;
    }

    .link:link {
        color: #3B3C4E;
    }

    .link:visited {
        color: #8A6F66;
    }

    .link:hover { 
        color: #E7B087;

    }

    .buylist {
        margin: 8px;
    }




/* RECOMMENDED */

    .recommended {
        text-align: left;
        margin-left: 150px;
    }

/* RELEASES TABLE */

    table {
        margin: auto;
        border-spacing: 0;
        border-collapse: collapse;
        background-color: #F7F6F2;
        width: 1000px;
    }

    th, td {
        border: 4px #3B3C4E solid;
        text-align: center;
        padding: .5em;
    }

    th {
        background-color: #BFBFBF;
        width: 100px;
        color: #3B3C4E;
    }

    td {
        color: #1F1F1F;
    }

    td a {
        text-decoration: none;
        color: #1F1F1F;
    }

    td a:hover {
        color: #E7B087;
        font-weight: bold;
    }

    td a:visited {
        color: #8A6F66;
    }


/* FOOTER */

    footer { 
        background-color: #FFFFFF;
        font-size: 0.7em;
        font-style: italic;
        text-align: center;
        padding: 1em 1em 1em 1em;
        margin-left: 170px;
    }

/* FORM */

    form {
        display: flex;
        flex-direction: column;
        padding-left: 1em;
        width: 450px;
    }

    input {
        margin: .5em .5em 1em;
    }

    textarea {
        margin-bottom: 10px;
    }