/* soldier modified from https://codepen.io/alvaromontoro/pen/LYNmjXj */

/* cloud design start, though mine ended up being very different! https://www.youtube.com/watch?v=iIdgZU4PDUo */

/* concept © Andrew Barker */

@import url('https://fonts.googleapis.com/css2?family=Gideon+Roman&display=swap'); 


 html {
  font-family: 'Gideon Roman', cursive;
  font-size: 1em;
  overflow: hidden;
 }
 
*, *:before, *:after {
  box-sizing: border-box;
 }

 *, *:before, *:after {
  content: "";
  z-index: 1;
 }

 
body, div, h2, h3, h4, h5, h6, ol, p, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
 }

 header {
  padding-top: 60px;
  margin: auto;
  text-align: center;
  position: relative;
  z-index: 2;
 }

body {
  background: linear-gradient(#e66465, #9198e5); 
  height: 100vh; 
}


h1 {
  text-align: center;
  color: rgb(255, 249, 249);
  letter-spacing: .02em;
  font-weight: 600;
  font-size: 2.4em;
  margin: 0;
  padding: 0;
  z-index: 2;
}


p {
  text-align: center;
  color: rgb(255, 249, 249);
  letter-spacing: .02em;
  font-weight: 400;
  font-size: 1.8em;
  margin: 0;
  padding: 0;
}


/* Button */

#audioPlayer {
  position: absolute;
  bottom: -440%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
button {
  background-color: white;
  font-weight: 500;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #252525;
  text-align: center;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid  rgb(169, 169, 169);
  bottom: -480%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
  outline: none;
}

button:hover {
  cursor: pointer;
}
button:active {
  box-shadow: 0 .2px #666;
  transform: translateY(.2px);
  transition-duration: .3s;
  transform: translate(-48%, -48%);
  position: absolute;
}


/* container and center */

 #center {
  
  margin-left: auto;
  margin-right: auto;
  width: 85%;
 }

 #container {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  bottom: 0;
  z-index: 1;
 } 

 .row {
  display: flex;
 }

.topRow {
  display: flex;
}


/* clouds */

.cloud {
  width: 4px;
  height: 0px;
  background-color: rgb(53, 53, 53);
  border-radius: 48%;
  top: 90px;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background-color: rgb(255, 255, 255, .8);
  box-shadow: 0px 0px 600px 100px white;
  z-index: 0;
  animation: fogSwell 25s infinite linear;
}

.cloud::before {
  position: absolute;
  width: 8px;
  height: 1px;
  border-radius: 50%;
  top: 80px;
  left: -100px;
  background-color: rgba(255, 255, 255, .8);
  box-shadow: -10px 0px 600px 200px white;
  z-index: 0;
  animation: fogSwell 25s infinite linear;
}

.cloud::after {
  position: absolute;
  width: 12px;
  height: 3px;
  border-radius: 50%;
  top: 63px;
  left: 10px;
  background-color: rgba(255, 255, 255, .8);
  box-shadow: -1px 0px 330px 120px white;
  z-index: 0;
  animation: fogSwell 25s infinite linear;
  
}


.cloud2 {
  width: 2px;
  height: .3px;
  background-color: rgb(53, 53, 53);
  border-radius: 48%;
  top: 90px;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background-color: rgb(255, 255, 255, .8);
  box-shadow: 0px 0px 350px 50px white;
  z-index: 0;
  animation: cloudPass 30s infinite linear;
}

.cloud2::before {
  position: absolute;
  width: 4px;
  height: .5px;
  border-radius: 50%;
  top: 80px;
  left: -100px;
  background-color: rgba(255, 255, 255, .8);
  box-shadow: -10px 0px 300px 100px white;
  z-index: 0;
  animation: cloudPass 30s infinite linear;
}

.cloud2::after {
  position: absolute;
  width: 5px;
  height:1.8px;
  border-radius: 50%;
  top: 63px;
  left: 10px;
  background-color: rgba(255, 255, 255, .8);
  box-shadow: -1px 0px 660px 240px white;
  z-index: 0;
  animation: cloudPass 30s infinite linear;
  
}
@keyframes cloudPass {
  0% {
    transform: translateX(-1200px);
  }

  50% {
    transform: translateX(1050px);
  }

  100% {
    transform: translateX(1190px);
  }
}

@keyframes fogSwell2 {
  0% {
    transform: translateX(-1200px);
  }

  100% {
    transform: translateX(1190px);
  }
}

/* fog */

.fog {
  width: 1px;
  height: 1px;
  background-color: rgb(53, 53, 53);
  border-radius: 48%;
  top: 530px;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background-color: rgb(255, 255, 255);
  box-shadow: 1px 1px 750px 110px white;
  z-index: 3;
  animation: fogSwell 12s infinite linear;
}

.fog::before {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  top: 400px;
  left: -450px;
  background-color: rgba(255, 255, 255);
  box-shadow: 1px 1px 800px 190px white;
  z-index: 3;
  animation: fogSwell 12s infinite linear;
}

.fog::after {
  position: absolute;
  width: 1px;
  height: 2px;
  border-radius: 50%;
  top: 400px;
  left: 340px;
  background-color: rgba(255, 255, 255);
  box-shadow: 0px 0px 1000px 200px white;
  z-index: 3;
  animation: fogSwell 12s infinite linear;
}

.fog2 {
  width: 100px;
  height: 120px;
  background-color: rgb(53, 53, 53);
  border-radius: 48%;
  top: 890px;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 900px 100px white;
  z-index: 2;
  animation: fogSwell2 15s infinite linear;
}

.fog2::before {
  position: absolute;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  top: 890px;
  left: -100px;
  background-color: rgba(255, 255, 255);
  box-shadow: 1px 1px 800px 200px white;
  z-index: 2;
  animation: fogSwell2 15s infinite linear;
}

.fog2::after {
  position: absolute;
  width: 150px;
  height: 170px;
  border-radius: 50%;
  top: 890px;
  left: 10px;
  background-color: rgba(255, 255, 255);
  box-shadow: -10px 8px 1000px 200px white;
  z-index: 2;
  animation: fogSwell2 15s infinite linear;
  
}
@keyframes fogSwell {
  0% {
    transform: translateX(-1200px);
  }

  100% {
    transform: translateX(1190px);
  }
}

@keyframes fogSwell2 {
  0% {
    transform: translateX(-1200px);
  }

  100% {
    transform: translateX(1190px);
  }
}


/* Moon */

#moonAxis {
  width: 200px;
  z-index: -1;
  position: absolute;
  animation: moonMove 180s infinite linear;
  top: -100px;
}


.moon {
  height:60px;
  width:60px;
  background: linear-gradient(#dadada, #b5bcff);
  border-radius:50%;
  position:absolute;
  z-index: -1;
  
}

@keyframes moonMove {
  0% {
    transform: translateX(505px) rotate(0deg);
  }

  100% {
    transform: translateX(-270px) rotate(120deg);
  }

}

/* top layer of bricks */

.brickTop {
  min-width: 9%;
  height: 1.45em;
  background-color: rgb(43, 40, 40);
  border-radius: 2px;
  margin-left: 4%;
  border: 1.7px solid rgb(169, 169, 169);
  z-index: 2;
 }

/* displacing bricks */


.row:nth-child(even) .brick:first-child {
  width: 2.3em;
}

.row:nth-child(even) .brick:last-of-type {
  width: 2.3em;
}

.row:nth-child(even) .brick {
  width: 3.9em;
}


 .brick {
  width: 4.3em;
  height: 1.3em;
  background-color: rgb(43, 40, 40);
  border-radius: 2px;
  /* margin: 2px; */
  border: 1.3px solid rgb(169, 169, 169);
  margin: 0;
  padding: 0%;
  z-index: 2;
 }
   
                /* Pacing Working! */

/* .cartoonContainer {
  position: relative;
  text-align: center;
  transform: scale(.2);
  margin-top: 56.5px; 
  margin-right: min(1vw, 400px);
  margin-left: min(10vw, 400px);
  padding: 0;
  z-index: 1;
} */

/* .cartoonContainer2 {
  position: absolute;
  animation: soldierAttack 3s infinite linear;
  text-align: center;
  transform: scale(1.2);
  margin-top: 100px;
  margin-right: min(20vw, 400px);
  margin-left: min(20vw, 400px);
  padding: 0;
  
} */


@keyframes soldierMove {
  0% {
    transform: translateX(-1320px) rotatey(0deg);
  }
  47% {
    transform: translateX(350px) rotatey(0deg);
  }
  50% {
    transform: translateX(350px) rotatey(180deg);
  }
  97% {
    transform: translateX(-1320px) rotatey(180deg);
  }
  100% {
    transform: translateX(-1320px) rotatey(0deg);
  }
}

/* Stylings of soldier */

#soldierScaleControl {
  position: relative;
  margin-bottom: 145px;
  transform: scale(.2);
  margin-right: min(1vw, 400px);
  margin-left: min(10vw, 400px);
  z-index: 1;
}

#cartoon div {
  padding: 0;
  position: absolute;
}

#cartoon {
  animation: soldierMove 11s infinite linear;
  margin: 0 auto;
  padding: 0;
  position: absolute;
  width: 80em;
  height: 80em;
  z-index: 1;
}

#cartoon2 div {
  padding: 0;
  position: absolute;
  z-index: 1;
}
#cartoon2 {
  position: absolute;
  animation: soldierMove 11s infinite linear;
  margin-top: -55px;
  padding: 0;
  position: absolute;
  width: 80em;
  height: 80em;
  z-index: 1;
 
}

/* general rounding shaping */

.b {
  margin: 0;
  padding: 0;
  border: .25em solid black;
}

.r {
  margin: 0;
  padding: 0;
  border-radius: 100%;
}

.hb::before,
.ha::after {
  margin: 0;
  padding: 0;
  content: "";
  display: block;
  position: absolute;
}

.shield {
  margin: 0;
  padding: 0;
  width: 29%;
  height: 29%;
  top: 44.5%;
  left: 17.5%;
  box-shadow: inset 0 0 0 2.75em black, inset 0 0 0 3em black;
  background: radial-gradient(black .5em, black 0 1.2em, transparent 0), repeating-linear-gradient(-45deg, rgb(118, 118, 118), rgb(221, 221, 221) 18em, rgb(135, 135, 135) 3em , rgb(81, 81, 81) 2em);
}

.helmet {
  margin: 0;
  padding: 0;
  width: 22.5%;
  height: 18%;
  top: 17%;
  left: 34%;
  border-radius: 20em 25em 0 0;
  background: black;

}

.soldierHead {
  margin: 0;
  padding: 0;
  width: 20.5%;
  height: 30%;
  top: 25%;
  left: 34.5%;
  border-radius: 20em 25em 0 0;
  background: black;
  box-shadow: inset 0 -12.6em, inset -9em 0 0 2.9em #fff;
  clip-path: polygon(1% 0%, 100% 0%, 100% 100%, 0% 93%);
}

.soldierHead::after {
  margin: 0;
  padding: 0;
  width: 15%;
  height: 30%;
  background: #fff;
  border-radius: 0 0 3em 6em;
  top: 26%;
  left: 70%;
}

.soldierHead::before {
  margin: 0;
  padding: 0;
  width: 38%;
  height: .33em;
  background: black;
  top: 20%;
  left: 58%;
  box-shadow: -1.9em 1em, 1.5em 1em, -2em 3em 0 0.75em, 0em 3em 0 .75em, 0.1em 4.7em, -5em 10em 0 0.25em, -1em 10em white;
}

.soldierBody {
  margin: 0;
  padding: 0;
  width: 12%;
  height: 28%;
  top: 46%;
  left: 43%;
  background: crimson;
}

.soldierBody::after {
  margin: 0;
  padding: 0;
  width: 12% ;
  height: 0.5em;
  border: 1.25em solid;
  background: white;
  top: 45%;
  left: 3%;
  
}

.soldierBody::before {
  margin: 0;
  padding: 0;
  width: 120%;
  height: 65%;
  border-radius: 0 0 90% 0%;
  background: black;
  top: 47%;
  left: -36%;
  box-shadow: 2.1em 0;
}

.lance {
  margin: 0;
  padding: 0;
  width: 0.75em;
  height: 70%;
  background: black;
  transform: rotate(45deg);
  top: 14%;
  left: 60%;
}


.lance::after {
  margin: 0;
  padding: 0;
  width: 150%;
  height: 5%;
  border: 0.25em solid;
  left: -50%;
  background: linear-gradient(white 80%, black 0);
  background-size: 100% 35%;
}

.lance::before {
  margin: 0;
  padding: 0;
  width: 250%;
  height: 7%;
  background: #f007;
  border-radius: 50%;
  top: 58%;
  left: 50%;
  border: 0.25em solid;
  background: linear-gradient(white 80%, black 0);
  background-size: 100% 25%;
}


.point {
  margin: 0;
  padding: 0;
  width: 5%;
  height: 2.55%;
  border: 0.25em solid;
  border-bottom: 0;
  left: 52.1%;
  top: 52.5%;
  transform: rotate(45deg);
  background: linear-gradient(white 75%, transparent 0), linear-gradient(to right, white 50%, transparent 0);
}

.point::after {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 420%;
  border: 0.25em solid black;
  border-radius: 100% / 130% 130% 20% 20%;
  background: white;
  top: -40em;
  left: 0.25em;
  z-index: -1;
  background: linear-gradient(white 70%, transparent 0), linear-gradient(to right, white 46%, black 0 54%, white 0);
}

.helmetPoint {
  margin: 0;
  padding: 0;
  width: 5%;
  height: 1.65%;
  left: 13%;
  top: 40.5%;
}

.helmetPoint::after {
  margin: 0;
  padding: 0;
  width: 79%;
  height: 420%;
  border: 0.24em solid black;
  border-radius: 130% 130% 20% 20%;
  background: white;
  top: -26.5em;
  left: 23em;
  background: linear-gradient(white 70%, transparent 0), linear-gradient(to right, white 46%, black 0 54%, white 0);
}


.helmetStem {
  margin: 0;
  padding: 0;
  width: 0.55em;
  height: 9%;
  background: black; 
  top: 14%;
  left: 43.5%;
}

.helmetStem::after {
  margin: 0;
  padding: 0;
  width: 250%;
  height: 29%;
  border: 0.25em solid;
  left: -150%;
  background: linear-gradient(white 80%, black 0);
  background-size: 100% 35%;
}

.helmetStem::before {
  margin: 0;
  padding: 0;
  width: 250%;
  height: 7%;
  background: #f007;
  border-radius: 50%;
  top: 58%;
  left: 50%;
  border: 0.25em solid;
  background: linear-gradient(white 80%, black 0);
  background-size: 100% 25%;
}

/* soldier state change */



.soldierHead2 {
  margin: 0;
  padding: 0;
  width: 20.5%;
  height: 30%;
  top: 25%;
  left: 34.5%;
  border-radius: 20em 25em 0 0;
  background: black;
  box-shadow: inset 0 -12.6em, inset -9em 0 0 2.9em #fff;
  clip-path: polygon(1% 0%, 100% 0%, 100% 100%, 0% 93%);
}

.soldierHead2::after {
  margin: 0;
  padding: 0;
  width: 15%;
  height: 30%;
  background: #fff;
  border-radius: 0 0 3em 6em;
  
  top: 26%;
  left: 70%;
}

.soldierHead2::before {
  margin: 0;
  padding: 0;
  width: 38%;
  height: .33em;
  background: black;
  top: 20%;
  left: 58%;
  border-radius: 50%;
  box-shadow: -1.9em 1em, 1.5em 1em, -2em 3em 0 0.75em, 0em 3em 0 .75em, 0.1em 4.7em, -5em 10em 0 0.25em, -2em 10em white;
}


.lance2 {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 0.75em;
  height: 70%;
  background: black;
  transform: rotate(180deg);
  top: 34%;
  left: 60%;
  z-index: 4;
}

.lance2::after {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 150%;
  height: 4%;
  border: 0.25em solid;
  left: -50%;
  background: linear-gradient(white 80%, black 0);
  background-size: 100% 35%;
  z-index: 4;
}

.lance2::before {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 550%;
  height: 20%;
  background: #f007;
  border-radius: 40%;
  transform: rotate(140deg);
  top: 58%;
  left: 50%;
  border: 0.25em solid;
  background: black;
  background-size: 100% 45%;
  z-index: 4;
}

.forearm {
  position: absolute;
  margin: 0;
  padding: 64px;
  width: 120px;
  height: 54px;
  border: 0.25em solid;
  border-bottom: 0;
  left: 57.1%;
  top: 792px;
  transform: rotate(95deg);
  background: black;
  z-index: 4;
}
.hand {
  position: absolute;
  margin: 0;
  padding: 64px;
  width: 74px;
  height: 50px;
  border-bottom: 0;
  left: 57.2%;
  top: 887px;
  transform: rotate(110deg);
  background: white;
  border: .65vmin solid;
  z-index: 4;
}

.fingers {
  position: absolute;
  margin: 0;
  padding: 64px;
  width: 35px;
  height: 50px;
  border-bottom: 0;
  border-radius: 7px;
  left: 58.3%;
  top: 896px;
  transform: rotate(162deg);
  background: white;
  border: .10vmin solid;
  background: linear-gradient(white 80%, black 0);
  background-size: 100% 25%;
  z-index: 4;
}

.point2 {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 5%;
  height: 2.55%;
  border-bottom: 0;
  left: 58.2%;
  top: 62.5%;
  transform: rotate(180deg);
  z-index: 4;
}

.point2::after {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 95%;
  height: 420%;
  border: 0.25em solid black;
  border-radius: 100% / 130% 130% 20% 20%;
  background: white;
  top: -40em;
  left: 0.25em;
  z-index: 2;
  background: linear-gradient(white 70%, transparent 0), linear-gradient(to right, white 46%, black 0 54%, white 0);
  z-index: 4;
}



@media screen and (max-width: 420px){
h1 {
  font-size: 2em;
}
.cartoonContainer {
  text-align: center;
  transform: scale(.1);
  margin-top: 245px;
  
  margin-right: min(20vw, 400px);
  margin-left: min(20vw, 400px);

  padding: 0;
}
}

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

  h1 {
    font-size: 1.7em;
  }
  
.cartoonContainer {
    text-align: center;
    transform: scale(.1);
    margin-top: 212px;
    
    margin-right: min(20vw, 400px);
    margin-left: min(20vw, 400px);
  
    padding: 0;
  } 
  }