@CHARSET "utf-8";

@font-face {
font-family: "Lemon";
font-style: normal;
font-weight: 100;
src: local("Lemon Regular"), local("Lemon-Regular"), url("/packt/fonts/lemon.woff") format("woff");
}

@font-face {
font-family: "Fredericka the Great";
font-style: normal;
font-weight: 100;
src: local("Fredericka the Great"), local("FrederickatheGreat"), url("/packt/fonts/fredericka-the-great.woff") format("woff");
}

@font-face {
font-family: "Mystery Quest";
font-style: normal;
font-weight: 100;
src: local("Mystery Quest"), local("MysteryQuest"), url("/packt/fonts/mystery-quest.woff") format("woff");
}

/* contains background data including color of bottom part where the play button resides */
body {
  margin: 0;
  padding: 0;
  /* background: #0997a0; code changed #3F48CC */
  background: #0000E6 ;
  width: 100%;
  height: 100%;
}

header {
  -webkit-animation-duration: 42s;
  -webkit-animation-name: sky;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;

  -moz-animation-duration: 42s;
  -moz-animation-name: sky;
  -moz-animation-direction: alternate;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-out;

}

header h1 {
  text-align: center;
  color: #900;
  font-weight: 400;
  font-size: 2.0em;
  font-family: "Fredericka the Great", Arial, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  margin: 0;
}

footer {
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  padding: 5px 0;
  background: #0000E6;

  /* background: rgba(255, 255, 255, 0.25); code changed */
}