@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'october_crowregular';
    src: url('october_crow-webfont.woff2') format('woff2'),
         url('october_crow-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'lycanthroperegular';
    src: url('lycanthrope-webfont.woff2') format('woff2'),
         url('lycanthrope-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  background: black;
  font-family: 'october_crowregular';
}
.background{
  background: red url("cyoa3_images/reveal.jpg");
  margin: 0px auto;
  width: 1000px;
  height: 640px;
  position: relative;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Standard syntax */
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
} 
p{
  font-family: 'october_crowregular';
  width: 1000px;
  color: orange;
  font-size: 22px;
  background: rgba(0, 0, 0, 0.6);
  position: relative;
  top: 35px;
  opacity: 0;
     -webkit-animation: fadeIn 1s; /* Chrome, Safari, Opera */
      animation: fadeIn 1s;
     -webkit-animation-delay: 1s;
      animation-delay: 1s;
     -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	    animation-fill-mode:forwards;
  text-align: center;
}
a{
  color: red;
  font-family: 'lycanthroperegular';
  position: absolute;
  top: 500px;
  left: 830px;
  font-size: 65px;
  text-decoration: none;
  opacity: 0;
     -webkit-animation: fadeIn 2s; /* Chrome, Safari, Opera */
      animation: fadeIn 2s;
     -webkit-animation-delay: 2s;
      animation-delay: 2s;
     -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	    animation-fill-mode:forwards;
}