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

@font-face {
    font-family: 'betty_noirregular';
    src: url('bettynoir-webfont.woff2') format('woff2'),
         url('bettynoir-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Standard syntax */
@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
} 


body{
  background:grey
}

.background{
     position:relative;
     margin: 0px auto;
     width:1000px;
     height:640px;
}

h1{
  font-family: 'betty_noirregular';
  background:darkgrey;
  text-align: center;
}

.q1{
  font-family: 'betty_noirregular';
  color:darkgrey;
  position:absolute;
  top:70px;
  left:0px;
  width:450px;
}

.a1{
  position:absolute;
  top:150px;
  left:0px;
  width:400px;
  opacity: 0;
        -webkit-animation: fade 5s; /* Chrome, Safari, Opera */
        animation: fade 5s;
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
   -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;
}


.q2{
  font-family: 'betty_noirregular';
  color:darkgrey;
  position:absolute;
  top:70px;
  left:590px;
}

.a2{
  position:absolute;
  top:160px;
  left:590px;
  width:400px;
  opacity: 0;
        -webkit-animation: fade 5s; /* Chrome, Safari, Opera */
        animation: fade 5s;
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
   -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;
}

.q3{
  font-family: 'betty_noirregular';
  color:darkgrey;
  position:absolute;
  top:360px;
  left:0px;
  width:500px;
}

.a3{
  position:absolute;
  top:450px;
  left:00px;
  width:400px;
  opacity: 0;
        -webkit-animation: fade 5s; /* Chrome, Safari, Opera */
        animation: fade 5s;
        -webkit-animation-delay: 10s;
        animation-delay: 10s;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
   -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;
}

.q4{
  font-family: 'betty_noirregular';
  color:darkgrey;
  position:absolute;
  top:340px;
  left:590px;
  width:400px;
}

.a4{
  position:absolute;
  top:430px;
  left:600px;
  width:300px;
  opacity: 0;
        -webkit-animation: fade 5s; /* Chrome, Safari, Opera */
        animation: fade 5s;
        -webkit-animation-delay: 14s;
        animation-delay: 14s;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
   -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;
}
.crime{
  font-family: 'betty_noirregular';
  color:darkred;
  position:absolute;
  top:550px;
  left:800px;
}

.crime:hover{
  color:darkgrey;
}

.mori{
  font-family: 'betty_noirregular';
  color:darkred;
  position:absolute;
  top:550px;
  left:720px;
}

.mori:hover{
  color:darkgrey;
}

.stuart{
  font-family: 'betty_noirregular';
  color:darkred;
  position:absolute;
  top:550px;
  left:630px;
}

.stuart:hover{
  color:darkgrey;
}

.sebastian{
  font-family: 'betty_noirregular';
  color:darkred;
  position:absolute;
  top:550px;
  left:520px;
}

.sebastian:hover{
  color:darkgrey;
}