body {
  background-color: salmon;
}
.back_button{
font-family: z003;
font-size: 25px;
border-radius: -20%;

}

@keyframes grow {
  0% {
    scale: 100%;
    opacity: 50%;
  }

  100% {
    scale: 1800%;
    opacity: 70%;
    transition-delay: 10s;
    transition-duration: 10s;
  }

}

.square {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;

}

.square1 {
  position: absolute;
  bottom: 25%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: yellow;
  animation: rotate 50ms linear infinite;

}

.square2 {
  position: absolute;
  top: 25%;
  left: -50%;
  width: 100px;
  height: 100px;
  background-color: navy;
  animation: rotate 3s linear infinite;

}


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

  to {
    transform: rotate(360deg);
  }
}

.fixed {
  position: fixed;
}

.left-0 {
  left: 0;
}

.left-10 {
  left: 10%;
}

.left-20 {
  left: 20%;
}

.left-30 {
  left: 30%;
}

.left-40 {
  left: 40%;
}

.left-50 {
  left: 50%;
}

.left-60 {
  left: 60%;
}

.left-70 {
  left: 70%;
}

.left-80 {
  left: 80%;
}

.left-90 {
  left: 90%;
}

.left-100 {
  left: 100%;
}

.top {
  top: 0;
  width: 100%;
}

.bottom {
  bottom: 0;
  width: 100%;
}

.left {
  left: 0;
  height: 100%;
}

.right {
  right: 0;
  height: 100%;
}

.flex {
  display: flex;
}

.row {
  flex-direction: row;
}

.col {
  flex-direction: column;
}

.equal {
  justify-content: space-between;
}

.center {
  justify-content: center;
  align-items: center;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.purple {
  background-color: purple;
}

.orange {
  background-color: orange;
}

.size-50 {
  width: 50px;
  height: 50px;
}

.skew-6 {
  --skew: 6deg;
}

.skew-30 {
  --skew: 30deg;
}

.skew-45 {
  --skew: 45deg;
}

.skew-90 {
  --skew: 90deg;
}

.speed-slow {
  --speed: 2s;
}

.speed-med {
  --speed: 1s;
}

.speed-fast {
  --speed: 0.7s;
}

.speed-boring {
  --speed: 1.2s;
}

.y-50 {
  --top: 80vh;
}

.y-70 {
  --top: 90vh;
}

.y-90 {
  --top: 120vh;
}

.delay-0 {
  --delay: 0s;
}

.delay-1 {
  --delay: 1s;
}

.delay-2 {
  --delay: 2s;
}

.delay-3 {
  --delay: 3s;
}

.animate-3d {
  animation: animate-3d var(--speed) linear infinite;
}

@keyframes animate-3d {
  0% {
    opacity: 0%;
    transform: skew(0) scaleY(1) rotate(0deg);
    top: 0vh;
  }

  1% {
    opacity: 100%;
  }

  50% {
    transform: skew(var(--skew)) scaleY(0) rotate(90deg);
  }

  70% {
    opacity: 100%;
  }

  100% {
    opacity: 0%;
    transform: skew(0) scaleY(1) rotate(180deg);
    top: var(--top);
  }
}