@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{
  position: relative;
  background: url("losspage.jpg");
  height: 828px;
  width: 1269px;
  
}

/* 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: 520px;}
}

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

.gif{
    display: block;
     position: absolute;
     background: url("sleigh2.png");
     height: 273px; 
     width: 492px;
     left: 500px;
     top: 0px;
    z-index: 2;
        opacity: 0;
        -webkit-animation: fadeSplinter 1s, transSplinter 3s; /* Chrome, Safari, Opera */
        animation: fadeSplinter 1s,transSplinter 3s;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
        -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;
}

h1{
    color:red;
    position: relative;
    left: 755px;
    top: 200px;
    text-shadow: 1px 1px white;
}

.restart{
    font-family: 'christmas_card_ii';
    font-size: 70px;
    position: absolute;
    top: 710px;
    left: 50px;
    color: white;
    text-shadow: 2px 3px red;
     -webkit-animation: fadeIn 10s; /* Chrome, Safari, Opera */
        animation: fadeIn 10s;
        -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;
     
    
}

.restart:hover{
    color: red;
    text-shadow: 2px 3px white;
}