@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: 416px;
  width: 1000px;
  background: url("knotpic copy.jpg");
  position: relative;
}

h1{
  color: #c3be41;
  font-size: 40px;
  text-shadow: 1px 2px #3946d9;
  -webkit-text-stroke-color: yellow;
  -webkit-text-stroke-width: .2px;
  position: relative;
  left: 40px;
  top: 30px;
}

.clove{
  position: absolute;
  background: url("clovehitch.png");
  height: 208px;
  width: 169px;
  left: 660px;
  -webkit-transform: rotate(-0deg); /* Chrome, Safari, Opera */
  transform: rotate(deg);
  top: 450px;
  line-height: 330px;
  font-size: 55px;
  text-indent: -20px;
  font-family: 'christmas_card_ii';
  color: white;
  text-shadow: 1px 2px #cdcb1c;
  opacity: 0;
        -webkit-animation: fadeIn 2s; /* Chrome, Safari, Opera */
        animation: fadeIn 2s;
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
        -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;
}

.bow{
  background: url("bowknot2.png");
  height: 191px;
  width: 316px;
  position: absolute;
  top: 455px;
  left: 120px;
  line-height: 318px;
  text-indent: 115px;
  font-size: 55px;
  font-family: 'christmas_card_ii';
  color: white;
  text-shadow: 1px 2px #cdcb1c;
  opacity: 0;
        -webkit-animation: fadeIn 2s; /* Chrome, Safari, Opera */
        animation: fadeIn 2s;
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
        -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;
}

.clove:hover{
  webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
        transform: rotate(10deg);
  color: yellow;
  text-shadow: 1px 2px yellow;
 
}

.bow:hover{
  webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
        transform: rotate(-10deg);
   color: yellow;
  text-shadow: 1px 2px yellow;
  
}