* {margin: 0; box-sizing: border-box;}
body {font-family: 'Arvo', serif; line-height: normal; color: black; font-weight: normal; background-image: url(../image/duckbanner2.jpg); background-attachment: fixed; background-size: cover; background-color: gray;}

.nav {display: block;}
li.nav {list-style-type: none; font-size: calc(9px + 0.9vw); padding: 2%; display: inline; font-family: 'Coming Soon', cursive;}
li.nav:hover {background-color: white;}
ul.nav {background-color: #DEDEDE; text-align: center; padding: 2%;}
nav a {text-decoration: none;}
nav a:hover {text-decoration: none; color: black; font-weight: normal;}

header {background-color: #F7D7C2; padding: 3%; margin-top: 10%; background-image: url("../image/duckbanner.jpg"); background-attachment: fixed; background-size: cover; background-color: #005183;}
.page-wrapper {background-color: #FBF1D5; width: 80%; margin: auto;}
#container {float: none; width: 100%; background-color: #DEDEDE;}
nav {float: none; width: 100%; background-color: #D8F1F1;}
.main-content {padding: 2% 8%; float: none; width: 100%; background-color: #FBF1D5; font-family: 'Coming Soon', cursive;} 
footer {background-color: #F7D7C2; text-align: center; padding: 0.25%; clear: both; margin-bottom: 10%;}

#websitename {font-size: calc(32.5px + 3.25vw); text-align: right; color: white;}
#pagename {font-size: calc(20px + 2vw); text-align: center;}
#tagline {font-size: calc(7px + 0.7vw); text-align: right; color: white;}
#credit {font-size: calc(7.5px + 0.75vw);}

a {color: black; text-decoration: underline;}
a:hover {text-decoration: none; font-weight: bold; color: black;}
img {display: block; margin: auto; width: 80%;}
blockquote {background-color: white; font-style: italic; padding: 3%;}
h1 {margin: 3% 0%; font-weight: bold; font-size: calc(20px + 2vw); line-height: 1.5; text-align: center;}
h2 {margin: 3% 0%; font-weight: bold; font-size: calc(15px + 1.5vw); line-height: 1.5; text-align: center;}
h3 {margin: 3% 0%; font-weight: bold; font-size: calc(10px + 1vw); line-height: 1.5; text-align: center;}

p {margin: 3% 0%; line-height: 1.5; text-align: justify;}
header p {text-align: center;}
footer p {text-align: center;}
.main-content p {font-size: calc(10px + 1vw);}
#readmore p {font-size: calc(10px + 1vw);}

#aboutme {background-color: #DEDEDE; text-align: center; padding: 0% 5%; font-family: 'Coming Soon', cursive;}
#readmore {padding: 0% 5%; font-family: 'Coming Soon', cursive;}

.zoomy {transition: transform .2s;}
.zoomy:hover {transform: scale(1.15);}

@media screen and (max-width: 768px) {#websitename {text-align: center;} #tagline {text-align: center;}}