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

@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{
  position: relative;
  background: url("youwin3.png");
  height: 644px;
  width: 1145px;
    left: 150px;
    top: 50px
  
}

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

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

/* Chrome, Safari, Opera */
@-webkit-keyframes transSplinter {
    from {left: 0px;}
    to {left: 300px;}
}

/* Standard syntax */
@keyframes transSplinter {
    from {left: 0px;}
    to {left: px;}
} 

h1{
    color: yellow;
    position: relative;
    left: 530px;
    top: 5px;
    text-shadow: 1px 2px red;
    font-size: 30px
}

.youwin{
     display: block;
     position: absolute;
     background: url("sleigh2.png");
     height: 273px; 
     width: 492px;
     left: 30px;
     top: -20px;
    z-index: 2;
        opacity: 0;
        -webkit-animation: fadeSplinter 1s, transSplinter 3s; /* Chrome, Safari, Opera */
        animation: fadeSplinter 1s,transSplinter 3s;
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
        -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;
        -webkit-transition: -webkit-transform 1s;
        transition: transform 1s;
    font-family: 'christmas_card_ii';
    font-size: 75px;
    line-height: 290px;
    text-indent: 140px;
    color: yellow;
    text-shadow: 2px 3px red;
    

}

.youwin:hover{
    color: #36eb36;
    text-shadow: 2px 3px black;
    
}