* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

body {
    width: 100vw; height: 100vh;
    position: relative;
    background-color: #333;
}

/* Header & hero image -----------------------------------------------------------------------------------*/
header {
    width: 100vw; height: 800px;
    padding: 10px;
    padding-bottom: 25px;
    box-shadow: 0 1px 6px -1px rgb(0 0 0 / 10%);
    border-bottom-color: #ddd;
    background-color: rgba(20, 20, 20, 0.7);
    background-image: url(../images/wk05-salad.jpg); background-position: 50% 40%;
    margin-bottom: 1%;
}

h1 {
    text-indent: 2%;
    padding-top: 15px;
    font-family: 'Lora', serif;
    font-size: 3.5em;
    color: #eee;
}

header p {
    color: #eee;
}

header nav {
    width: 40%;
    position: absolute; left: 73%; top: 50px;
}

header ul {
    margin-right: 0px;
}

header nav li {
    border: 2px solid darkgray;
    border-radius: 5px;
    list-style-type: none;
    display: inline;
    margin: 10px; padding: 8px;
    background-color: rgba(200, 200, 200, 0.7);
    font-size: 1.25em; font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
}

header nav a:link, a:visited {
    color: #333;
    text-decoration: none;
}

header nav li:hover {
    background-color: gray;
}

header nav li:nth-last-of-type(1) {
    font-family: 'Lora', serif;
    font-size: 1.2em;
    font-weight: bolder;
    background-color: red;
    border-color: firebrick;
}

header nav li:nth-last-of-type(1):hover {
    background-color: firebrick;
    border-color: red;
}
/* End header & hero image -------------------------------------------------------------------------------*/


/* Middle section ----------------------------------------------------------------------------------------*/
.middle {
    border: 2px solid cyan;
    /* background-color: rgba(200, 200, 200, 0.6); */
    width: 98%; height: 1500px;
    margin: 0 auto;
}

.button {
    width: 18%;
    margin: 0 auto; margin-bottom: 20px; margin-top: 20px;
}

.button li {
    border-radius: 5px;
    height: 50px;
    text-align: center;
    list-style-type: none;
    margin-bottom: 10px;
    padding-top: 13px;
    background-color: gray;
}

.button a:link, a:visited {
    color: #eee;
    text-decoration: none;
    font-size: 1.25em; font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
}

.button li:hover {
    background-color: #666;
}

h2 {
    font-family: 'Calibri', sans-serif; font-size: 3.5em; font-weight: lighter;
    color: #eee;
    text-align: center;
    margin: 50px;
    padding-top: 50px;
}

.middle p {
    width: 60%;
    margin: 0 auto;
    font-family: 'Calibri', sans-serif; font-size: 1.3em;
    color: #eee;
    text-align: left;
    padding-bottom: 25px;
}

/* I got a little carried away while working on this... Please excuse all the extra stuff!! */
/* .card {
    border: 2px solid red;
    margin: 0 auto;
    margin-top: 50px;
    height: 800px;
}

.card li {
    border: 2px solid white;
    display: block;
    margin: 10px;
    width: 250px; height: 250px;
} */
/* End middle section ------------------------------------------------------------------------------------*/


/* Footer ------------------------------------------------------------------------------------------------*/
footer {
    border: 2px solid pink;
    margin-top: 20px;
    padding-top: 50px; padding-bottom: 50px;
    background-image: linear-gradient(#333, #aaa);
    width: 50%; float: right;
}

.follow fig:nth-of-type(1) {
    background-image: url(../images/wk05-eatery-facebook-16.png); /* <a target="_blank" href="https://icons8.com/icon/uLWV5A9vXIPu/facebook">Facebook</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a> */
    background-repeat: no-repeat;
}

.follow fig:nth-of-type(2) {
    background-image: url(../images/wk05-eatery-instagram-16.png); /* <a target="_blank" href="https://icons8.com/icon/Xy10Jcu1L2Su/instagram">Instagram</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a> */
    background-repeat: no-repeat;
}

/* End footer --------------------------------------------------------------------------------------------*/