html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

html, .movingTree {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  background-image: url('PurpleForest.jpg');
  background-color: #314860;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  animation: 10000ms ease-in-out infinite opacity-change;
	}

@font-face {
  font-family: 'MyFont';
  src: url('DK Rabbit On The Moon.otf') format('opentype');
}

@keyframes fadeInUp {
  from { 
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
h1 {
  font-family: 'MyFont';
  color: #f0eaa6;
  opacity: 0; 
  animation: fadeInUp 2.5s ease-in-out 0.5s forwards;
  font-size: 9vw;
}  
h1:hover{

    color: #df987f;
  }

.Country {
  left: 0;
    position:absolute;
    text-align:center;
    top: 30%;
    width: 100%

}

.deer{
    z-index: -2;
    position: absolute;
    top: 80%;
    left:50%;
    transform: translate(-50%, -50%);
}


.Absolute-Center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}  

@keyframes fadeIn { 
  from { opacity: 0.3; } 
}

.light {
  position: absolute;
  top: 33%;
  left: 10%;
  
  animation: fadeIn 1.5s infinite alternate;
}

.light:hover{
  top:32%;
  left:9%;
  width:15%;

}

.light1 {
  position: absolute;
  top: 17%;
  left: 33%;
  
  animation: fadeIn 1s infinite alternate;
}

.light1:hover{
  top:16%;
  left:32%;
  width:15%;

}

.light2 {
  position: absolute;
  top: 10%;
  left: 60%;
  
  animation: fadeIn 2s infinite alternate;
}


.light2:hover{
  top:9%;
  left:59%;
  width:15%;

}

.light3 {
  position: absolute;
  top: 42%;
  left: 75%;
  
  animation: fadeIn 1.3s infinite alternate;
}

.light3:hover{
  top:41%;
  left:74%;
  width:15%;

}


.movingTree{
  background:  url(https://i.ibb.co/y8Mjwbj/Parallax-copy.png) 0 100% no-repeat;
  background-size:cover;
  background-repeat: no-repeat;
  z-index: -1;
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
}

.movingTree {
  animation: parallax_tree linear 35s infinite both;
}

@keyframes parallax_tree {  
  0% { background-position: 0px 100%;} 
  100% {background-position: -2700px 100%; } 
}