@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;
     height: 640px;
     width: 1000px;
     background: url("christmastree.jpg");
     position: relative;
     top: 50px;
          
}

strong{
     font-size: 60px;
     color: #c1121a;
     text-shadow: 2px 3px black;
}

h1{
     color: yellow;
     text-shadow: 2px 2px black;
     position: relative;
     left: 10px;
     top: 15px
     
}

.blunt{
     background: url("bat3.png");
     height: 248px;
     width: 368px;
     position: absolute;
     font-size: 20px;
     font-family: 'christmas_card_ii';
     left: 80px;
     top: 250px;
     text-indent: -9999px;
     -webkit-transform: rotate(-0deg); /* Chrome, Safari, Opera */
  transform: rotate(-100deg);
     opacity: 0;
        -webkit-animation: fadeIn 4s; /* Chrome, Safari, Opera */
        animation: fadeIn 4s;
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
        -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;
     
}

.sedative{
     position: absolute;
     margin: 0px auto;
     height: 270px;
     width: 253px;
     background: url("cookie.png");
     top: 300px;
     left: 600px;
     text-indent: -9999px;
     z-index: 1;
	    opacity: 0;
        -webkit-animation: fadeIn 5s; /* Chrome, Safari, Opera */
        animation: fadeIn 5s;
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
        -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;
        -webkit-transition: -webkit-transform 2s;
        transition: transform 2s;
    
}

.object{
     font-family: 'christmas_card_ii';
     font-size: 70px;
     position: absolute;
     top: 480px;
     left: 120px;
     color: whitesmoke;
     text-shadow: 2px 3px red;
     opacity: 0;
        -webkit-animation: fadeIn 4s; /* Chrome, Safari, Opera */
        animation: fadeIn 4s;
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
        -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;
     
}

.sed{
     font-family: 'christmas_card_ii';
     font-size: 70px;
     position: relative;
     top: 270px;
     left: 520px;
     color: whitesmoke;
     text-shadow: 2px 3px red;
     opacity: 0;
        -webkit-animation: fadeIn 5s; /* Chrome, Safari, Opera */
        animation: fadeIn 5s;
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
        -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;
        -webkit-transition: -webkit-transform 2s;
        transition: transform 2s;
     }

.blunt:hover{
     webkit-transform: rotate(.3deg); /* Chrome, Safari, Opera */
        transform: rotate(.3deg);
 
}

.sedative:hover{
	-webkit-transform: rotate(360deg);
    transform: rotate(360deg); 
     -webkit-filter: blur(3px);
	filter: blur(3px); 
}