* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

#primary-container {
  width: 100%;
  height: 100vh;
  background-color: black;
}

/* STICKMAN */

#stickman-container,
#programmer-container {
  width: 150px;
  height: 280px;
  position: absolute;
  left: 50px;
  bottom: 70px;
}
#stickman-container .head,
#programmer-container .head {
  width: 80px;
  height: 80px;
  left: 35px;
  top: 20px;
  border-radius: 50%;
  background-color: transparent;
  border: 3px solid yellow;
}

#stickman-container div,
#programmer-container div {
  position: absolute;
  border-radius: 50%;
  /* background-color: yellow; */
}

#stickman-container .body,
#programmer-container .body {
  left: 73px;
  top: 100px;
  height: 70px;
  width: 3px;
  background-color: yellow;
}

#stickman-container .left-hand,
#programmer-container .left-hand {
  transform-origin: top;
  transform: rotateZ(30deg);
  top: 100px;
  left: 73px;
  width: 3px;
  height: 80px;
  background-color: yellow;
}

#stickman-container .right-hand,
#programmer-container .right-hand {
  transform-origin: top;
  transform: rotateZ(-30deg);
  top: 100px;
  left: 73px;
  width: 3px;
  height: 80px;
  background-color: yellow;
}

#stickman-container .left-leg,
#programmer-container .left-leg {
  top: 170px;
  left: 73px;
  transform: rotateZ(25deg);
  transform-origin: top;
  width: 3px;
  height: 80px;
  background-color: yellow;
}
#stickman-container .right-leg,
#programmer-container .right-leg {
  top: 170px;
  left: 73px;
  transform: rotateZ(-25deg);
  transform-origin: top;
  width: 3px;
  height: 80px;
  background-color: yellow;
}

/* STICKWOMAN */

#stickwoman-container {
  width: 150px;
  height: 280px;
  position: absolute;
  right: 400px;
  bottom: 70px;
}

#stickwoman-container div {
  position: absolute;
  width: 3px;
  height: 80px;
  border-radius: 50%;
  background-color: white;
}
#stickwoman-container .head {
  width: 80px;
  height: 80px;
  left: 35px;
  top: 20px;
  border-radius: 50%;
  background-color: black;
  border: 3px solid rgb(255, 255, 255);
}

#stickwoman-container .body {
  position: relative;
  height: 70px;
  width: 50px;
  background-color: transparent;
}
#stickwoman-container .body div {
  position: absolute;
  width: 3px;
  height: 75px;
  border-radius: 50%;
  background-color: white;
}
#stickwoman-container .body #first {
  left: 75px;
  top: 104px;
  transform: rotateZ(15deg);
  transform-origin: top;
}
#stickwoman-container .body #second {
  left: 75px;
  top: 104px;
  transform: rotateZ(-15deg);
  transform-origin: top;
}
#stickwoman-container .body #third {
  top: 150px;
  left: 75px;
  height: 45px;
  transform: rotateZ(90deg);
}
#stickwoman-container .left-hand {
  transform-origin: top;
  transform: rotateZ(30deg);
  top: 100px;
  left: 73px;
  width: 3px;
  height: 80px;
}
#stickwoman-container .right-hand {
  transform-origin: top;
  transform: rotateZ(-30deg);
  top: 100px;
  left: 73px;
}
#stickwoman-container .left-leg {
  top: 170px;
  left: 73px;
  transform: rotateZ(25deg);
  transform-origin: top;
}
#stickwoman-container .right-leg {
  top: 170px;
  left: 73px;
  transform: rotateZ(-25deg);
  transform-origin: top;
  width: 3px;
  height: 80px;
}

/* road */
#road {
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: white;
  bottom: 95px;
}

/* additional classes */

#right-hand-fold {
  display: none;
}
.right-hand-fold #hand1 {
  width: 3px;
  height: 56px;
  background-color: yellow;
  top: 101px;
  transform: rotateZ(-35deg);
  transform-origin: top;
  left: 73px;
}
.right-hand-fold #hand2 {
  width: 3px;
  height: 40px;
  top: 116px;
  transform: rotateZ(38deg);
  left: 130px;
  background-color: yellow;
  transform-origin: top;
}

#rose {
  font-size: 38px;
  position: absolute;
  top: 67px;
  left: 114px;
  display: none;
}

#msgBox {
  width: auto;
  text-align: center;
  padding: 10px 20px;
  line-height: 46px;
  border: 1px solid yellow;
  color: yellow;
  font-size: 35px;
  border-radius: 5%;
  position: absolute;
  left: 380px;
  letter-spacing: 2px;
  word-spacing: 4px;
  bottom: 320px;
  display: none;
}

#codingBox {
  color: rgb(0, 255, 0);
  width: 800px;
  text-align: center;
  padding: 30px 40px;
  border: 1px solid rgb(9, 255, 0);
  font-size: 50px;
  position: absolute;
  left: 250px;
  letter-spacing: 2px;
  word-spacing: 4px;
  bottom: 350px;
  display: none;
}

#box {
  color: rgb(255, 255, 255);
  width: auto;
  text-align: center;
  font-size: 60px;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  letter-spacing: 4px;
  word-spacing: 8px;
  bottom: 500px;
  text-transform: uppercase;

  display: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#play-btn {
  padding: 4px 7px;
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: white;
  cursor: pointer;
}

.error-msg {
  display: none;
}
@media (max-width: 1300px) {
  #primary-container {
    display: none;
  }
  .error-msg {
    display: block;
  }
}