#misberichtje{
  position: relative;
  bottom: -50vh;
  z-index: 9999999;
}
#klompgooi{
  width: 5vw;
  height: auto;
  transition: transform 2s;
   transition: left 2s;
  position: absolute;
  bottom: 40vh;
  opacity: 0;
}

#left{
  position: absolute;
  bottom: 4vh;
  z-index: 2;
  font-size:2vw;
}
#levensenemy{
  font-size: 20px;
  color: #6B0F1A;
  background: white;
  position: absolute;
  top:1px;
  right:1px;

}
#levenszelf{
    font-size: 20px;
  color: #6B0F1A;
  background: white;
  position: absolute;
  top:26px;
  right:1px;

}
#player1{
  width: 15vw;
  height:auto;
  position: absolute;
  bottom: 40vh;
  left: 5vw;
  margin:0;
  padding:0;
  border-radius: 10px 10px 0px 0px;
}
#enemy1{
  background-color: #5A716A;
  width: 15vw;
  height:15vh;
  position: absolute;
  bottom: 40vh;
  left: 80vw;
  margin:0;
  padding:0;
  border-radius: 10px 10px 0px 0px;
}
#ondergrond{
  width: 100vw;
  height:40vh;
  margin:0;
  padding:0;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
background-size: contain;
}

.opening{
	position: relative;
align-content: center;
text-align: center;
left:30vw;
right: 50vw;
bottom: 50vh;
top: 10vh;

	background-color: #E4572E;
	width:30vw;
	height:40vh;
	 animation: animatie 5s infinite;
	 transition-property: all;
}
.opening::before{
  content:"Loading";
  display:block;
  position: absolute;
  top: -20vh;
  left: -10vw;
  width: 30vw;
  height: 20vh;
  background-color: #32908F;
  animation: animaty 5s infinite;
  transition-property: all;
}
#fight, #play{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  position: absolute;
  bottom: 10px;
  z-index: 10;
  left: 80vw;

}
#fight:hover, #play:hover{
  animation: veranderkleur 0.2s linear;
  background-color: #664147;
}

@keyframes veranderkleur{
  from{
    background-color: #32908F;
  }
  to{
    background-color: #664147;
  }
}
@keyframes animaty {
  10%{
    left: 20vw;
  }
  25% {
    transform: rotateZ(50deg);
    width: 40vw;
  }
  50%{
transform: rotateX(100deg);
background-color: #044B7F;
border-radius: 900px;
  }
  60%{
    transform: rotateX(500deg);
    transform: rotateZ(500deg);
    transform: rotateY(500deg);
  }
  
  75%{
transform: rotateY(200deg);
border-radius: 1px;
background-color: #2A2B2A;
transform:rotate(70deg);
  }
}
@keyframes animatie {
  25% {
    top: 10vh;
  	font-size: 80px;
    border-radius: 50px;
  	transform: rotate(33deg);
 transform: skew(50deg);
color: black;
  }
  50%{
    top: 30vh;
  	 	font-size: 120px;
  		transform: rotateY(50deg);
  		   transform: skewY(5deg);
  		   color:#29335C;
  		   background-color: #F3A712;
  }
  75%{
    left: 40vw;
  	 	font-size: 100px;
  	transform: rotateX(50deg);
  	   transform: skewY(-20deg);
       border-radius: 0px;
  }
  90%{
    transform: rotateZ(90deg);
  }
}
.preload-finish{
	opacity: 0;
	pointer-events: none;
}
/*preload end*/

.verschijn{
  animation: verschijn 3s linear;
}

@keyframes verschijn{
  1%{
    opacity: 0;
  }
  99%{
    opacity: 1;
  }
}



body{
	

	overflow-x: hidden;
}
.weg{
  
	display: none;
}

@font-face {
  font-family: 'Arvo';
  font-display: auto;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
#underattack{
	margin:0;
	padding: 0;
	width:100%;
	height: 100%;
  z-index: 10;
}
#defendButton1{
	position: absolute;
	right: 3vw;
		-webkit-animation: verplaatsknop 1s infinite; 
  -moz-animation: verplaatsknop 1s infinite;
  -o-animation: verplaatsknop 1s infinite; 
  animation: verplaatsknop 1s infinite; 
}
#defendButton2{
	position: absolute;
	bottom: 3vw;
		-webkit-animation: verkleinknop 2s infinite; 
  -moz-animation: verkleinknop  2s infinite;
  -o-animation:verkleinknop 2s infinite; 
  animation:verkleinknop  2s infinite; 
}
#defendButton3{
	position: absolute;
	left: 3vw;
	-webkit-animation: beweegknop 1s infinite; 
  -moz-animation: beweegknop 1s infinite;
  -o-animation: beweegknop 1s infinite; 
  animation: beweegknop 1s infinite; 
}

#defendButton4{
	position: absolute;
	bottom: 3vw;
	right: 3vh;
	-webkit-animation: beweegknop 1s infinite; 
  -moz-animation: beweegknop 1s infinite;
  -o-animation: beweegknop 1s infinite; 
  animation: beweegknop 1s infinite; 
}
#defendButton5{
	position: absolute;
	left: 50vw;
	top: 30vh;
	-webkit-animation: verkleinknop 2s infinite; 
  -moz-animation: verkleinknop 2s infinite;
  -o-animation:verkleinknop 2s infinite; 
  animation: verkleinknop 2s infinite; 
}

@keyframes verplaatsknop{
  from {

  	left: 50vw;
	top: 30vh;
  }
  to {

	left: 10vw;
	top: 60vh;
  }
}
@keyframes verkleinknop{
  from {
    width:300px;
    font-size:50px;
  }
  to {
    width:20px;
    font-size:4px;
  }
}
@keyframes verplaatsknop{
  from {
   right:3vw;
  }
  to {
   	right:30vw;
  }
}

@keyframes beweegknop{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


button{
  position: relative;
  left: 20vw;
	background-color:#6F1D1B;
	border:none;
	height:10vh;
	width:10vw;

  padding:10px;
  display: inline-block;
  
  padding-bottom: 40px;
}

@media only screen and (max-width: 862px) {

button{

	height:40px;
	width:60px;

	font-size:10px;
}
.demo{
	opacity: 0;
	font-size: 20px;
}
}

.demo{
	opacity: 0;
	font-size: 50px;
	background-color: white;
	text-decoration-color: blue;
	height: 200vh;
	width: 100vw;
	margin:0;
	padding: 0;
	border:none;
	position: relative;
	top: 3vh;
}
.tut1playnow{
	opacity: 0;
	position: relative;
	width: 50vw;
	height: auto;
	z-index: 999;
}


#jemoetvechten{
  position: relative;
  font-size: 0px;
  animation: invliegen 3s linear;
    animation-delay: 0.5s;
  left: 20vw;  
}
#vechtdevijand{
    position: relative;
  font-size: 0px;
  animation: invliegen 3s linear;
    animation-delay: 3.5s;
  left: 20vw;  
}
.terug{
  background-color: #99582A;
  color: #FFE6A7;
  padding: 10px;
  position: relative;
  top: 0;
  left: 0;
}
@keyframes invliegen{
 90%{
     font-size: 8vw;
      
  }
  100%{
    opacity: 0;
  }
}

#left{
  position: absolute;
  bottom: 2vh;
  z-index: 2;
  width: 10vw;
  height: 10vh;
  font-size:5vw;
  padding: 0;
  margin-bottom: 0;
}
#right{
  position: absolute;
  bottom: 2vh;
  z-index: 2;
  width: 10vw;
  height: 10vh;
  font-size:5vw;
  padding: 0;
  margin-bottom: 0;
  left: 35vw;
}