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

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
} 

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

}
@font-face {
    font-family: 'christmas_card_ii';
    src: url('chrici__.woff2') format('woff2'),
         url('chrici__.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{
  font-family:'mountains_of_christmasregular';
  background: black;
 
}

.background{
  margin: 0px auto;
  position: relative;
  height: 638px;
     width: 1135px;
     background: url("whichweapon2.jpg");
     top: 110px;
     left: 20px
}

h1{
     font-size: 50px;
     position: relative;
     left: 10px;
    top: -125px;
     color: #b8ffff;
     text-shadow: 2px 2px green
}


.bat{
     position: absolute;
     background: url("brownbat.png");
     height: 385px;
     width: 172px;
     font-family:  'christmas_card_ii';
     line-height: 590px;
     font-size: 55px;
     color: red;
     left: 400px;
     top: 100px;
     text-indent: -80px;
     text-shadow: 2px 3px green;
     color: #b8ffff;
        -webkit-animation: fadeIn 4s; /* Chrome, Safari, Opera */
        animation: fadeIn 4s;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -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;
     
}


.fry{
     position: absolute;
     background: url("fryingpan2.png");
     height: 347px;
    width: 293px;
     left: px;
     top: 117px;
     font-size: 55px;
     font-family: 'christmas_card_ii';
     color:red;
     line-height: 550px;
     text-indent: 50px;
     color: #b8ffff;
     text-shadow: 2px 2px green;
        -webkit-animation: fadeIn 4s; /* Chrome, Safari, Opera */
        animation: fadeIn 4s;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -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;
     
}


.bat:hover{
     color: #8b4513;
     text-shadow: 1px 2px black;
     opacity: .7;
       background-size: cover;
    width: 180px;
    height: 380px; 
}


.fry:hover{
     color: #243033;
     text-shadow: 2px 2px black;
     opacity: .7;
     background-size: cover;
    width: 300px;
    height: 360px; 
}