@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap');

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
  color: #3c484e;
  font-family: 'Open Sans', sans-serif;
  user-select: none;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

#Main{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction:column;
}

#content {
  position: relative;
  width: auto;
  height: auto;
}

.Header-main {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.Header a {
  text-decoration: none;
  color: #15302C;
  cursor: pointer;
  margin: 0 20px;
}

.d-none{
  display: none;
}

/*------------------media queries---------------*/

@media (max-width: 800px) and (max-aspect-ratio: 1/1){
  #content{
    transform: scale(0.8) rotate(90deg);
  }
}

@media (max-width: 400px) and (max-aspect-ratio: 1/1){

  #content{
    transform: scale(0.65) rotate(90deg);
  }
}

@media (max-width: 800px) and (min-aspect-ratio: 1/1){

  #content{
    transform: scale(0.65);
  }
}


/*-------------------Intro------------------------*/

  
  
.intro-wallpaper {
  background: url(https://i.ibb.co/7yDM2w6/Intro-wallpaper.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  width: 780.8px;
  height: 453px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  animation-duration: 1s;
  animation-name: fade;
  position: relative;
}

.intro-wallpaper a {
  animation-duration: 5s;
  animation-name: fade0;
}

.intro-wallpaper a img {
  width: 300px;
  animation-duration: 1s;
  animation-name: fade;
  animation-delay: 5s;

}

.logo img {
  width: 500px;
  height: auto;
  animation-duration: 6s;
  animation-name: scale;

}

/*-------------------------------------------*/

/*-----------------Select-Character-------------------*/
.select-wallpaper {
  background: url(https://i.ibb.co/TKHFLqz/Select-Character-Fondo.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  width: 780.8px;
  height: 453px;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.select-wallpaper .overlay {
  width: 80%;
  height: 80%;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.733)
}

.character-left {
  width: 50%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.character-left .carrousel {
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.character-left .arrow-left,
.character-left .arrow-right {
  width: 70px;
}

.character-left .characterimg {
  width: 160px;
  animation-duration: 0.5s;
  animation-name: fade;
}

.character-left .btn-select {
  width: 140px;
  height: auto;
  font-size: 20px;
  background-color: transparent;
  cursor: pointer;

}

.character-right {
  width: 50%;
  height: 100%;
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation-duration: 0.5s;
  animation-name: fade;
}

.character-right .imgapi {
  width: 100px;
  height: 150px;
}

/*-------------------------------------------*/

/*----------------------Tower-------------------------*/
.intro-wallpaper .tower {
  animation-name: fade0;
  animation-duration: 1s;

}

/* 13 levels tower */
.intro-wallpaper .tower .towerimg {
  width: 600px;
  object-position: 0px -800px;
  animation-duration: 2s;
  animation-name: fade;
  animation-delay: 1s;
}

.intro-wallpaper .tower .towerimg1 {
  width: 600px;
  object-position: 0px -647px;

  animation-name: fade, traslatedown1;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg2 {
  width: 600px;
  object-position: 0px -492px;
  animation-name: fade, traslatedown2;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg3 {
  width: 600px;
  object-position: 0px -338px;
  animation-name: fade, traslatedown3;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg4 {
  width: 600px;
  object-position: 0px -185px;
  animation-name: fade, traslatedown4;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg5 {
  width: 600px;
  object-position: 0px -29px;
  animation-name: fade, traslatedown5;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg6 {
  width: 600px;
  object-position: 0px 120px;
  animation-name: fade, traslatedown6;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg7 {
  width: 600px;
  object-position: 0px 274px;
  animation-name: fade, traslatedown7;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg8 {
  width: 600px;
  object-position: 0px 427px;
  animation-name: fade, traslatedown8;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg9 {
  width: 600px;
  object-position: 0px 583px;
  animation-name: fade, traslatedown9;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg10 {
  width: 600px;
  object-position: 0px 736px;
  animation-name: fade, traslatedown10;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg11 {
  width: 600px;
  object-position: 0px 892px;
  animation-name: fade, traslatedown11;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}

.intro-wallpaper .tower .towerimg12 {
  width: 600px;
  object-position: 0px 1046px;
  animation-name: fade, traslatedown12;
  animation-duration: 2s, 3s;
  animation-delay: 1s, 0s;
}


/*----*/

.intro-wallpaper .tower .towerpj {
  position: absolute;
  bottom: 115px;
  left: 270px;
  width: 85px;
  height: 100px;
  animation-name: fade0, fade;
  animation-duration: 1s, 2s;
  animation-delay: 0s, 1s;
}

.intro-wallpaper .tower .traslateright {
  animation-name: fade0, fade, traslaterightpj;
  animation-duration: 1s, 2s, 2s;
  animation-delay: 0s, 1s, 1s;
}


/*-------------------------------------------*/

/*-------------------PPT------------------------*/
#ppt {
  width: 100%;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.4);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}



#ppt .ppt-left {
  position: absolute;
  bottom: 50px;
  left: 390.4px;
  display: flex;
}

#ppt .ppt-right {
  position: relative;
  animation-name: fade0, fade;
  animation-duration: 1s, 1s;
  animation-delay: 0s, 1s;
}


#ppt .ppt-right div,
#ppt .ppt-left div {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.938);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3px;
  cursor: pointer;
}

#ppt .ppt-right img,
#ppt .ppt-left img {
  width: 40px;
  height: auto;
}

#attack1 {
  position: absolute !important;
  bottom: -34px;
  left: -106px;
  /* animation-name: fade0, fade;
  animation-duration:2s, 1s;
  animation-delay:0s, 2s; */
}


#defense1 {
  position: absolute !important;
  bottom: -34px;
  left: -36px;
  /* animation-name: fade0, fade;
  animation-duration:2s, 1s;
  animation-delay:0s, 2s; */
}

#cure1 {
  position: absolute !important;
  bottom: -34px;
  left: 34px;
  /* animation-name: fade0, fade;
  animation-duration:2s, 1s;
  animation-delay:0s, 2s; */
}



#attack2 {
  position: absolute !important;
  bottom: -34px;
  right: 34px;
}

#defense2 {
  position: absolute !important;
  bottom: -34px;
  right: -36px;
}

#cure2 {
  position: absolute !important;
  bottom: -34px;
  right: -106px;

}

#attack1.selected {
  border: 3px solid rgb(95, 210, 255);
  margin: 0 !important;
  left: -173px;
  animation: traslate-attack1;
  animation-duration: 1s;
}

#defense1.selected {
  border: 3px solid rgb(95, 210, 255);
  margin: 0 !important;
  left: -173px;
  animation: traslate-defense1;
  animation-duration: 1s;
}

#cure1.selected {
  border: 3px solid rgb(95, 210, 255);
  margin: 0 !important;
  left: -173px;
  animation: traslate-cure1;
  animation-duration: 1s;
}

#attack2.selected2 {
  border: 3px solid rgb(255, 164, 141);
  right: -173px;
  animation: traslate-attack2;
  animation-duration: 1s;
  margin: 0 !important;
}

#defense2.selected2 {
  border: 3px solid rgb(255, 164, 141);
  right: -173px;
  animation: traslate-defense2;
  animation-duration: 1s;
  margin: 0 !important;
}

#cure2.selected2 {
  border: 3px solid rgb(255, 164, 141);
  right: -173px;
  animation: traslate-cure2;
  animation-duration: 1s;
  margin: 0 !important;
}

.selectedRed {
  border: 3px solid rgb(255, 164, 141);
}

.unselected {
  display: none !important;
}

.initialppt {
  animation-name: fade0, fadeInDownBig !important;
  animation-duration: 2s, 1s;
  animation-delay: 0s, 2s;
}

.secondAnimation {
  animation-name: fade;
  animation-duration: 1s;
}

/*------------------stats------------------------*/
#ppt .stats-left {
  width: 200px;
  height: 80px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

#ppt .stats-right {
  width: 200px;
  height: 80px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

#ppt .stats-right .hp,
#ppt .stats-left .hp {
  width: 100%;
  height: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 10px;

}

#ppt .stats-right img,
#ppt .stats-left img {
  width: 10px;
  margin-right: 5px;
}



#ppt .stats-left .hpbar,
#ppt .stats-right .hpbar {
  width: 80%;
  height: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.432);
  border-radius: 5px;
  overflow: hidden;
}

#ppt .stats-left .atk,
#ppt .stats-right .atk,
#ppt .stats-left .def,
#ppt .stats-right .def,
#ppt .stats-left .cur,
#ppt .stats-right .cur {
  width: 80%;
  height: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
  margin-right: 4px;
  margin-left: 4px;
}

#ppt .stats-left .atkbar,
#ppt .stats-right .atkbar,
#ppt .stats-left .defbar,
#ppt .stats-right .defbar,
#ppt .stats-left .curbar,
#ppt .stats-right .curbar{
  width: 80%;
  height: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.432);
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

#ppt .stats-right .atkbar,
#ppt .stats-right .defbar,
#ppt .stats-right .curbar,
#ppt .stats-right .hpbar {
display: flex;
flex-direction: row-reverse;
}


#ppt .stats-left .hpbar .hpvalue,
#ppt .stats-right .hpbar .hpvalue {
  height: 100%;
  background-color: red;
  transition: width 2s;
}

.atkbar div,
.defbar div,
.curbar div{
  width: 50%;
  background-color: rgba(128, 128, 128, 0.699);
  border: 2px solid rgb(0, 0, 0);
  transition: opacity 2s;
}


/*-------------------------------------------*/

/*---------------fight place--------------------*/

.fight-wallpaper {
  display: flex;
  width: 780.8px;
  height: 453px;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  animation-duration: 1s;
  animation-name: fade;
  position: relative;
}

.fight-wallpaper:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(58, 58, 58, 0.7);
}

.fightplace {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
}

.fightplace .floorimg {
  width: 100%;
  height: 70px;
}

.centro1 {
  position: absolute;
  width: 0px;
  height: 300px;
  border: 1px solid red;
  left: 220px;
  bottom: 0px;
  z-index: 1;
}

.centro2 {
  position: absolute;
  width: 0px;
  height: 300px;
  border: 1px solid red;
  right: 220px;
  bottom: 0px;
  z-index: 1;
}

.alto1 {
  position: absolute;
  width: 1000px;
  height: 0px;
  border: 1px solid red;
  left: 0px;
  bottom: 150px;
  z-index: 1;
}

.base1 {
  position: absolute;
  width: 1000px;
  height: 0px;
  border: 1px solid red;
  left: 0px;
  bottom: 42px;
  z-index: 1;
}

/*----------------heroes/villains movements-----------*/

#attack1png {
  position: absolute;
  bottom: 200px;
  left: 190px;
  width: 0px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

#attack1png img {
  width: 400px;
  height: 50px;
}

#attack2png.atk-Quirrell,
#attack2png.atk-Tom,
#attack2png.atk-Pettigrew,
#attack2png.atk-Voldemort1,
#attack2png.atk-Umbridge,
#attack2png.atk-Lucius,
#attack2png.atk-Bellatrix,
#attack2png.atk-Draco,
#attack2png.atk-Voldemort2
{
  position: absolute;
  bottom: 180px;
  right: 190px;
  width: 0px;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
}

#attack2png.atk-Troll,
#attack2png.atk-Basilisco,
#attack2png.atk-Dementor,
#attack2png.atk-Dragon{
  position: absolute;
  top: -130px;
  left: 70px;
  opacity: 0;
  overflow: hidden;
  z-index: 1;
  transition: opacity;
  transition-delay: 0.5s;
}

#attack2png.atk-Troll img,
#attack2png.atk-Basilisco img,
#attack2png.atk-Dementor img,
#attack2png.atk-Dragon img{
  width: 120px;
  height: 125.33px;
}

#attack2png img {
  width: 400px;
  height: 50px;
}


#attack1png.animation,
#attack2png.animation {
  
  animation-name: width-attackpng, finalwidth-attackpng, fadeout;
  animation-duration: 0.5s, 2s, 2s;
  animation-delay: 0s, 0.5s, 0.5s;
  animation-timing-function: linear;
}

 #attack2png.atk-Troll.animation,
#attack2png.atk-Basilisco.animation,
#attack2png.atk-Dementor.animation,
#attack2png.atk-Dragon.animation{
  opacity: 1;
  animation-name: heartBeat, finalheight-attackpng, fadeout;
  animation-duration: 1s, 2s, 2.5s;
  animation-delay: 0.5s, 1s, 1s;
} 

#defense1png {
  position: absolute;
  bottom: 140px;
  left: 167px;
  z-index: 1;
  opacity: 0;
}

#defense1png img {
  height: 150px;
}


#defense2png {
  position: absolute;
  bottom: 140px;
  right: 167px;
  z-index: 1;
  opacity: 0;

}
#defense2png.def-Troll{
  bottom: 110px;
  right: 145px;
}
#defense2png.def-Troll img{
  height: 230px;
}

#defense2png img {
  height: 150px;
}

#defense1png.animation,
#defense2png.animation {
  animation-name: bounceInDown, fade, fadeout;
  animation-duration: 1s, 1s, 2s;
  animation-delay: 0s, 0s, 1s;
}

#cure1png {
  position: absolute;
  bottom: 260px;
  left: 177px;
  z-index: 1;
  opacity: 0;
}

#cure1png img {
  width: 40px;
}

#cure2png {
  position: absolute;
  bottom: 260px;
  right: 177px;
  z-index: 1;
  opacity: 0;
}

#cure2png img {
  width: 40px;
}

#cure1png.animation {
  animation-name: fade, spin1;
  animation-duration: 2s, 2s;
  animation-delay: 0s, 0s;
}

#cure2png.animation {
  animation-name: fade, spin2;
  animation-duration: 2s, 2s;
  animation-delay: 0s, 0s;
}

#cure2png.cur-Troll{
  bottom: 360px;
  right: 167px;
  
}


#cure2png.cur-Basilisco{
  bottom: 310px;
  right: 237px;
}

#cure2png.cur-Dragon{
  bottom: 180px;
  right: 337px;
}

#cure2png.cur-Troll img,
#cure2png.cur-Basilisco img,
#cure2png.cur-Dragon img{
  width: 60px;
}

#cure2png.cur-Troll.animation,
#cure2png.cur-Basilisco.animation,
#cure2png.cur-Dragon.animation{

  animation-name: fade, fadeOutRight;
  animation-duration:1s, 2s;
  animation-delay: 0s, 1s;

}


/*-------------damage/cureplus--------------*/

#damage1{
  position: absolute;
  bottom: 100px;
  left: 70px;
  font-size: 20px;
  color: rgba(255, 61, 61, 0.863);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing: 3px;
  opacity: 0;
}

#damage2{
  position: absolute;
  bottom: 100px;
  right: 120px;
  font-size: 20px;
  color:  rgba(255, 61, 61, 0.863);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing: 3px;
  opacity: 0;
}


#cureplus1{
  position: absolute;
  bottom: 100px;
  left: 117px;
  font-size: 20px;
  color: rgba(116, 255, 61, 0.863);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing: 3px;
  opacity: 0;
}

#cureplus2{
  position: absolute;
  bottom: 100px;
  right: 77px;
  font-size: 20px;
  color:  rgba(116, 255, 61, 0.863);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing: 3px;
  opacity: 0;
}

#cureplus1.animation, #cureplus2.animation{
  animation-name: fade0, traslateup, fade;
  animation-duration:1s, 1s, 3s;
  animation-delay:0s,1s, 1s;
  animation-timing-function: linear;
}

#damage1.animation, #damage2.animation{
  animation-name: fade0, traslateup, fade;
  animation-duration:0s, 1s, 3s;
  animation-delay:0s,0s, 0s;
  animation-timing-function: linear;
}

/*---------------you win------------------*/

#you-win{
    position: absolute;
    top: 100px;
    left: 255px;
    animation-name: jackInTheBox;
    animation-duration: 2s;
  }

  #restart{
    position: absolute;
    top: 50px;
    left: 300px;
    animation-name: jackInTheBox;
    animation-duration: 2s;
    
  }

  #restart img{
    width: 170px;
    cursor: pointer;
  }
/*-------------------------------------------*/

/*------------fight heroes-----------------*/

.Harry0,
.Harry1,
.Harry2,
.Harry3,
.Harry6 {
  position: absolute;
  left: 50px;
  bottom: calc(20px - 5px + 100px );
  width: 150px;
  }

.Harry6 {
  position: absolute;
  left: 65px;
  bottom: calc(37px - 5px + 100px );
  width: 110px;
  }

.Harry7 {
  position: absolute;
  left: 25px;
  bottom: calc(30px - 5px + 100px );
  width: 190px;
  }

.Harry8,
.Harry9,
.Harry10 {
  position: absolute;
  left: 70px;
  bottom: calc(29px - 5px + 100px );
  width: 135px;
  }

.Harry4,
.Harry5 {
  position: absolute;
  left: 60px;
  bottom: calc(26px - 5px + 100px );
  width: 120px;
  }

.Harry11 {
  position: absolute;
  left: 55px;
  bottom: calc(30px - 5px + 100px );
  width: 120px;
  }

.Harry12 {
  position: absolute;
  left: 75px;
  bottom: calc(36px - 5px + 100px );
  width: 135px;
  }

.Hermione0,
.Hermione1,
.Hermione2,
.Hermione3 {
  position: absolute;
  left: 68px;
  bottom: calc(30px - 5px + 100px );
  width: 110px;
  }

.Hermione4,
.Hermione5 {
  position: absolute;
  left: 25px;
  bottom: calc(33px - 5px + 100px );
  width: 165px;
  }

.Hermione6 {
  position: absolute;
  left: 95px;
  bottom: calc(42px - 5px + 100px );
  width: 57px;
  }

.Hermione7 {
  position: absolute;
  left: 75px;
  bottom: calc(39px - 5px + 100px );
  width: 97px;
  }

.Hermione8,
.Hermione9,
.Hermione10 {
  position: absolute;
  left: 65px;
  bottom: calc(37px - 5px + 100px );
  width: 137px;
  }

.Hermione11 {
  position: absolute;
  left: 65px;
  bottom: calc(29px - 5px + 100px );
  width: 112px;
  }

.Hermione12 {
  position: absolute;
  left: 73px;
  bottom: calc(37px - 5px + 100px );
  width: 140px;
  }

.Ron0,
.Ron1 {
  position: absolute;
  left: 63px;
  bottom: calc(37px - 5px + 100px );
  width: 135px;
  }

.Ron2,
.Ron3 {
  position: absolute;
  left: 66px;
  bottom: calc(37px - 5px + 100px );
  width: 128px;
  }

.Ron4,
.Ron5,
.Ron7,
.Ron8,
.Ron9,
.Ron10,
.Ron11,
.Ron12 {
  position: absolute;
  left: 30px;
  bottom: calc(32px - 5px + 100px );
  width: 167px;
  }

.Ron6 {
  position: absolute;
  left: 65px;
  bottom: calc(36px - 5px + 100px );
  width: 100px;
  }

.initialAnimation1{
  animation-name: bounceInDown;
  animation-duration: 2s;
}


/*-------------------------------------------*/




/*----------fight villains----------------*/
.Troll {
  position: absolute;
  right: -15px;
  bottom: calc(20px - 5px + 100px);
  width: 300px;
  }

.Quirrell {
  position: absolute;
  right: 38px;
  bottom: calc(12px - 5px + 100px);
  width: 150px;
  }

.Basilisco {
  position: absolute;
  right: -35px;
  bottom: calc(8px - 5px + 100px);
  width: 370px;
  height: 400px;
  }

.Tom {
  position: absolute;
  right: 52px;
  bottom: calc(35px - 5px + 100px);
  width: 140px;
  }

.Pettigrew {
  position: absolute;
  right: 42px;
  bottom: calc(42px - 5px + 100px);
  width: 170px;
  }

.Dementor {
  position: absolute;
  right: 20px;
  bottom: calc(20px - 5px + 100px);
  width: 180px;
  }

.Dragon {
  position: absolute;
  right: -100px;
  bottom: calc(-35px - 5px + 100px);
  width: 500px;
  }

.Voldemort1 {
  position: absolute;
  right: 45px;
  bottom: calc(39px - 5px + 100px);
  width: 180px;
  }

.Umbridge {
  position: absolute;
  right: 62px;
  bottom: calc(40px - 5px + 100px);
  width: 120px;
  }

.Lucius {
  position: absolute;
  right: -5px;
  bottom: calc(39px - 5px + 100px);
  width: 220px;
  }

.Bellatrix {
  position: absolute;
  right: 48px;
  bottom: calc(29px - 5px + 100px);
  width: 150px;
  }

.Draco {
  position: absolute;
  right: 0px;
  bottom: calc(7px - 5px + 100px);
  width: 230px;
  }

.Voldemort2 {
  position: absolute;
  right: 56px;
  bottom: calc(37px - 5px + 100px);
  width: 190px;
  }

.hitted{
  animation-name: headShake;
  animation-duration: 1s;
  animation-delay: 0.5s;
}

.initialAnimation2{
  animation-name: fade0, bounceInDown;
  animation-duration: 1s, 2s;
  animation-delay: 0s, 1s;
}
/*-------------------------------------------*/

/*------------- animations ----------*/

@keyframes scale {
  from {
    transform: scale(0.1);
  }

  to {
    transform: scale(1);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade0 {
  from {
    opacity: 0;
  }

  to {
    opacity: 0;
  }
}


@keyframes traslaterightpj {
  from {
    left: 150px;
  }

  to {
    left: 270px;
  }
}

@keyframes traslatedown1 {
  from {
    object-position: 0px -800px;
  }

  to {
    object-position: 0px -647px;
  }
}

@keyframes traslatedown2 {
  from {
    object-position: 0px -647px;
  }

  to {
    object-position: 0px -492px;
  }
}

@keyframes traslatedown3 {
  from {
    object-position: 0px -492px;
  }

  to {
    object-position: 0px -338px;
  }
}

@keyframes traslatedown4 {
  from {
    object-position: 0px -338px;
  }

  to {
    object-position: 0px -185px;
  }
}

@keyframes traslatedown5 {
  from {
    object-position: 0px -185px;
  }

  to {
    object-position: 0px -29px;
  }
}

@keyframes traslatedown6 {
  from {
    object-position: 0px -29px;
  }

  to {
    object-position: 0px 120px;
  }
}

@keyframes traslatedown7 {
  from {
    object-position: 0px 118px;
  }

  to {
    object-position: 0px 274px;
  }
}

@keyframes traslatedown8 {
  from {
    object-position: 0px 271px;
  }

  to {
    object-position: 0px 427px;
  }
}

@keyframes traslatedown9 {
  from {
    object-position: 0px 427px;
  }

  to {
    object-position: 0px 583px;
  }
}

@keyframes traslatedown10 {
  from {
    object-position: 0px 583px;
  }

  to {
    object-position: 0px 736px;
  }
}

@keyframes traslatedown11 {
  from {
    object-position: 0px 736px;
  }

  to {
    object-position: 0px 892px;
  }
}

@keyframes traslatedown12 {
  from {
    object-position: 0px 892px;
  }

  to {
    object-position: 0px 1046px;
  }
}

@keyframes traslate-attack1{
  from {
    left: -106px;
  }

  to {
    left: -173px;
  }
}

@keyframes traslate-defense1{
  from {
    left: -36px;
  }

  to {
    left: -173px;
  }
}

@keyframes traslate-cure1{
  from {
    left: 34px;
  }

  to {
    left: -173px;
  }
}

@keyframes traslate-attack2{
  from {
    right: 34px;
  }

  to {
    right: -173px;
  }
}

@keyframes traslate-defense2{
    from {
        right: -36px;
  }

  to {
      right: -173px;
  }
}

@keyframes traslate-cure2{
from {
  right: -106px;
}

to {
  right: -173px;
}
}

@keyframes width-attackpng {
from {
  width: 0px;
}

to {
  width: 400px;
}
}

@keyframes finalwidth-attackpng {
from {
  width: 400px;
}

to {
  width: 400px;
}
}

@keyframes height-attackpng {
from {
  height: 0px;
}

to {
  height: 125.33px;
}
}

@keyframes finalheight-attackpng {
from {
  height: 125.33px;
}

to {
  height: 125.33px;
}
}


@keyframes fadeout {
from {
  opacity: 1;
}

to {
  opacity: 0;
}
}

@keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(-110deg); }
}

@keyframes spin2 {
0% { transform: rotate(0deg); }
100% { transform: rotate(110deg); }
}

@keyframes traslateup{
from {
  bottom: 70px;
}

to {
  bottom: 100px;
}
}
/*-------------------------------------------*/




/*------------------END----------------------*/

.end {
  display: flex;
  width: 780.8px;
  height: 453px;
  animation-duration: 1s;
  animation-name: fade;
  position: relative;
}

.end-png{
  animation-name: zoomInDown;
  animation-duration: 2s;
  position: absolute;
  bottom: 70px;
  left: 60px;
}

/*----------------ABOUT---------------------*/

.about {
  display: flex;
  width: 780.8px;
  height: 453px;
  animation-duration: 1s;
  animation-name: fade;
  justify-content: center;
  align-items: center;
}

.about-png{
  animation-name: zoomInDown;
  animation-duration: 2s;
  width: 100px;
}

.about a{
  animation-name: zoomInDown;
  animation-duration: 2s;
margin-left: 30px;
text-decoration: none;
color: rgb(40, 40, 40)
}