@font-face {
    font-family: 'DoubleHomicide'; src: url(assets/DoubleHomicide.ttf);
    }
   
  @font-face {  
    font-family: 'Paskowy'; src: url(assets/Paskowy.ttf);
    }
    
  @font-face {  
    font-family: 'Pixeled-English-Font'; src: url(assets/Pixeled-English-Font.ttf);
    }
    
  body {
   background-image: url(assets/night.gif); 
   background-size: 30%;
  }  
  
  .red-button{
    font-family: Paskowy;
    font-size: 25px;
    text-align: center;
    color: white;
    transform: translate(0%, 50%);
  }
  
  .not-always{
    font-family: Pixeled-English-Font;  
    font-size: 24px;
    text-align: center;
    color: white;
    transform: translate(0%, 200%);
    margin-bottom: 100px;
  }
  
  .the-words{
    color: white;
    font-size: 35px;
    text-align: center;
    font-family: DoubleHomicide;
  }
  
  .container {
  background-image: url(assets/bubbles.gif); 
  margin-left: 20%;
  margin-right: 20%;
  height: 700px;
  position: relative;
  border: 3px inset white;
}

.horizontal-center {
  display: table;
  margin: 0 auto;
  margin-top: 25px;
}

.lightning{
   position: absolute;
   left:95%;
   top:5%;
  }

.sky{
  position: absolute;
  right:95%;
  top:30%;
  }

 .speech{
   position: absolute;
   right:95%;
   top:5%;
}

.blood{
   position: absolute;
   left:95%;
   top:5%;
  }

.city{
   position: absolute;
   height: 100px;
   right:90%;
   bottom:0%;
  }

.rain{
   position: absolute;
   height: 200px;
   left:90%;
   bottom:0%;
  }
  
.lightning2{
   position: absolute;
   height: 200px;
   left:93%;
   top:25%;
  }
  
.alley{
   position: absolute;
   height: 100px;
   right:-30%;
   top: 0%;
  }
  
.stars{
   position: absolute;
   height: 1000px;
   right:102%;
   bottom:0%;
  }
    
.fire{
   position: absolute;
   height: 200px;
   left:-30%;
   bottom:0%;
  }
  
.fire2{
   position: absolute;
   height: 200px;
   right:-30%;
   bottom:0%;
  }
  
.bird{
   position: absolute;
   left: 8%;
   top:10%;
  }
  
.bird2{
   position: absolute;
   right: 8%;
   top:10%;
  }