* {
  box-sizing: border-box;
  user-select: none;
}

body {
  background-color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* overflow: hidden; */
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  position: relative;
  /* display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; */
}

.instructions {
  position: absolute;
  top: 32%;
  top: 25%;
  left: 52%;
  text-align: center;
  opacity: 0.9;
  z-index: 1;
}

@media(max-width: 670px) {
  .instructions {
    top: 25%;
    top: 15%;
    left: 40%;
    left: 35%;
    padding-right: 1em;
  }
}

.kinetic {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  transform: translate(-50%, -50%);
}

.style3 .kinetic {
  /* height: 40px;
  width: 40px; */
  /* animation: rotateK 3s linear infinite 0.5s; */
  /* animation: expand-contract 4s ease-in-out infinite 0.4s; */
}

.style3 .kinetic .spinner {
  position: absolute;
  /* top: 30%;
  left: 30%;
  top: 0;
  left: 0; */
  width: 40%;
  height: 55%;
  /* Egg-shaped */
  height: 40%;
  /* Circle */
  border-radius: 50%;
  /* animation: rotateKS 2s ease-in-out infinite 0.5s; */
}

.style1 .kinetic::before,
.style1 .kinetic::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* This creates a triangle by having border w/ no content making a square, only showing bottom, making a triangle (as 1/4 of a square) */
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #fff;
  animation: rotateA 2s linear infinite 0.5s;
}

.kinetic::before {
  transform: rotate(90deg);
  animation: rotateB 2s linear infinite;
}

#k1 {
  top: 50%;
  left: 50%;
  background-color: rgb(184, 11, 112);
  animation: expand 4s ease-in-out infinite 0.4s;
}

#k2 {
  top: 50%;
  right: 50%;
  background-color: rgb(26, 93, 238);
  animation: expand 4s ease-in-out infinite 0.8s;
}

#k3 {
  bottom: 50%;
  left: 50%;
  background-color: rgb(3, 83, 3);
  animation: expand 4s ease-in-out infinite 1.2s;
}

#k4 {
  bottom: 50%;
  right: 50%;
  background-color: rgb(116, 5, 116);
  animation: expand 4s ease-in-out infinite 1.6s;
  /* border: 3px solid rgba(156, 6, 156, 0.15);
  box-shadow: 0 0 5px 2px rgb(43, 2, 43) */
}

@keyframes rotateA {
  0%,
  25% {
    transform: rotate(0deg);
  }
  50%,
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateB {
  0%,
  25% {
    transform: rotate(90deg);
  }
  50%,
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(450deg);
  }
}

@keyframes rotateK {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateKS {
  0% {
    transform: rotate(0deg) scale(.1, .1);
    opacity: 0.2;
  }
  45% {
    transform: rotate(180deg) scale(3, 2);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(.1, .1);
    opacity: 0.3;
  }
}


/* Seems like having this on #ks above overrides animation on .spinner class rotateKS */

@keyframes expand {
  0% {
    transform: scale(0);
    opacity: .2;
  }
  50% {
    transform: scale(5);
    opacity: 1;
  }
  65% {
    opacity: .3;
  }
  100% {
    tranform: scale(0);
    opacity: .2;
  }
}

@keyframes expand-contract {
  0% {
    transform: scale(0) translate(0%, 0%);
  }
  50% {
    transform: scale(5) translate(0%, 0%);
  }
  100% {
    transform: scale(0) translate(0%, 0%);
  }
}