html {
   font-size: 16px; /* base font reset */
   }

body {
 background:url('bg.png') no-repeat fixed;
 background-position:top center;
 background-size:cover;
 background-color:#c8ede3;
}

main {
width: 100%;
text-align: center;
margin: 10rem auto auto auto;
}


a:link,
a:visited,
a:active {text-decoration: none;
color: darkturquoise;
font-weight: bold;}
a:hover {color: white;}

h1 {font-family: 'Splash', cursive;
text-align:center;
font-weight: normal;
color: #fff;
text-shadow: 0px 0px 1px turquoise, 0px 0px 6px turquoise, 0px 0px 10px skyblue, 0px 0px 20px hotpink, 0px 0px 30px hotpink, 0px 0px 50px yellow;
  animation: fadeIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 3s; /* don't forget to set a duration! */}

h2 {font-family: 'Ubuntu', sans-serif;
text-align: center;
color: #777;
font-weight: normal;
letter-spacing: 1px;
font-size: 120%;
  animation: pulse; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */}

h3 {font-family: 'Ubuntu Condensed', sans-serif;
text-align:right;
color: #999;
font-size: 75%;
font-weight: normal;}

footer { padding: 1rem 1rem 0rem 1rem; position:fixed; z-index:1; bottom:0; right: 0;
color: #888;}



      @media (min-width: 200px) and (max-width: 369px) {
            h1 { font-size: 200%;}
      }

      @media (min-width: 370px) and (max-width: 549px) {
            h1 { font-size: 450%;}
      }

      @media (min-width: 550px) and (max-width: 799px) {
            h1 { font-size: 650%;}
      }

      @media (min-width:799px) {
            h1 { font-size: 850%;}
      }