/* css reset rule */

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

body {
    background-color: lightgray;
    font-family: verdana;
    background-size: cover;
    background-position: center;
}

header {
    background-color: blue;
    text-align: center;
    color: white;
    font-family: verdana;
    padding: 32px 8px;
    background-image: linear-gradient(aqua,gray);
}

nav {
    height: 60px;
    background-color: #212020;
    margin-bottom: 20px;
    padding: 12px 0px;
    position: relative;
}

nav a {
    color: #FFF;
    font-size: 20pt;
    text-decoration: none;
    font-weight: normal;
    padding: 8px 24px;
}

nav a:last-child {
    position: absolute;
    right: 8px; top: 5px;
    display: block;
    width: 48px; height: 48px;
    background-image: url("fb.png");
    background-size: cover;
}

main {
    font-family: verdana;
}

#container {
    width: 1200px;
    margin: 0 auto;
}

#fourboxes {
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    margin-bottom: 20px;
}

#fourboxes div {
    flex: 1 0 auto;
    height: 160px;
}

#fourboxes div:nth-child(1) {
    background-color: blue;
    background-image: url("../images/jake.jpg");
    background-size: cover;
    background-position: center;
}

#fourboxes div:nth-child(2) {
    background-color: green;
    background-image: url("../images/watertower.jpg");
    background-size: cover;
    background-position: center;
}

#fourboxes div:nth-child(3) {
    background-color: yellow;
    background-image: url("../images/jake.jpg");
    background-size: cover;
    background-position: center;
}

#fourboxes div:nth-child(4) {
    background-color: red;
    background-image: url("../images/watertower.jpg");
    background-size: cover;
    background-position: center;
}		

h2 {
    color: teal;
    padding-bottom: 1%
}

footer {
    height: 80px;
    background-color: blue;
    margin-top: 60px;
    color: white;
    font-family: verdana;
    background-image: linear-gradient(aqua,gray);
}