html {
     box-sizing: border-box;
 }

 *,
 *::before,
 *::after {
     box-sizing: inherit;
 }

 body {
     font-family: Arial, Helvetica, sans-serif;
     background-color: #19c3d9;
     background-repeat: no-repeat;
     background-size: 100%;
     background-image: url("images/coconut-1.png.png");
     background-attachment: fixed;
     background-position-y: 100%;
 }

 *::selection {
     background-color: #5aaede;
 }

 div#parent {
     max-width: 50vw;
     margin: 1in auto;
 }

 /* adjusting parent div for mobile screens */
 @media (width<700px) {
     div#parent {
         max-width: 90%;
         margin: 1in auto;
     }
 }

 nav {
     margin-bottom: 0.2in;
     padding: 0.2in;
     border: 2px solid #000;
     background-color: rgb(236, 247, 253);
 }

 nav a {
     color: black;
     font-size: 18px;
     margin-right: 1em;
     text-decoration: none;
     border-bottom: #0d557f 3px ridge;
 }

 nav a:hover {
     background-color: #0d557f;
     color: white;
 }

 a#home-link {
     color: #000;
     font-size: 18px;
     margin-right: 1em;
     font-family: ft-88-italic;
     text-decoration: none;
 }

 a#home-link:hover,
 a#home-link:focus {
     color: #0d557f;
 }

 div#main-container {
     background-color: rgb(236, 247, 253);
     border: 2px solid #000;
     padding: 0.2in;
 }

 section {
     margin: 0;
 }

 @font-face {
     font-family: compagnon-bold;
     src: url(fonts/Compagnon-Bold.woff);
 }

 @font-face {
     font-family: terminal-grotesque;
     src: url(fonts/terminal-grotesque-webfont.woff);
 }

 @font-face {
     font-family: ft-88-italic;
     src: url(fonts/FT88-Italic.woff);
 }

 h1 {
     font-family: ft-88-italic, Arial, Helvetica, sans-serif;
     font-size: 5vw;
     line-height: 60%;
 }

 h2 {
     font-family: terminal-grotesque;
     font-size: 2vw;
     line-height: 80%;
     text-transform: uppercase;
 }

 /* starting the content with h2 */
 h2.top {
     margin-top: 0;
 }

 p {
     padding: 0;
     margin-top: 0;
 }