@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #012;
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 750px;
  overflow: hidden;
}
body::before, body::after {
  content: "";
  position: absolute;
  width: calc(100vh + 100vw);
  height: calc(100vh + 100vw);
  opacity: 0.01;
}
body::before {
  z-index: -2;
  background-image: repeating-conic-gradient(#fff 0deg, #000 5deg, #fff 10deg);
  -webkit-animation: rotate 60s infinite linear;
          animation: rotate 60s infinite linear;
}
body::after {
  z-index: -1;
  background-image: repeating-conic-gradient(#fff 0deg, #000 10deg, #fff 20deg);
  -webkit-animation: rotate 70s infinite linear;
          animation: rotate 70s infinite linear;
}
@-webkit-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.container {
  position: relative;
  -webkit-animation: rotateX 2.1s ease-in-out infinite alternate;
          animation: rotateX 2.1s ease-in-out infinite alternate;
  transform-style: preserve-3d;
}
@-webkit-keyframes rotateX {
  from {
    transform: rotateX(30deg);
  }
  to {
    transform: rotateX(-30deg);
  }
}
@keyframes rotateX {
  from {
    transform: rotateX(30deg);
  }
  to {
    transform: rotateX(-30deg);
  }
}

.FiveHundred {
  position: relative;
  width: 410px;
  height: 1px;
  transform-style: preserve-3d;
  -webkit-animation: rotateY 5s ease-in-out infinite alternate;
          animation: rotateY 5s ease-in-out infinite alternate;
}
@-webkit-keyframes rotateY {
  from {
    transform: rotateY(30deg);
  }
  to {
    transform: rotateY(-30deg);
  }
}
@keyframes rotateY {
  from {
    transform: rotateY(30deg);
  }
  to {
    transform: rotateY(-30deg);
  }
}
.FiveHundred::after {
  content: "# ACTIVIDADES";
  font-family: "Oswald", sans-serif;
  position: absolute;
  top: 120px;
  left: 50%;
  color: #fff3;
  width: 320PX;
  font-size: 50px;
  transform: translateX(-50%) translateZ(-25px);
}

.digit {
  position: absolute;
  top: -110px;
  width: 110px;
  height: 220px;
  transform-style: preserve-3d;
}
.digit:nth-child(1) {
  left: 0px;
}
.digit:nth-child(2) {
  left: 150px;
}
.digit:nth-child(3) {
  left: 300px;
}

.line {
  position: absolute;
  width: 100px;
  height: 20px;
  transform-style: preserve-3d;
  top: 150%;
}
.line:nth-child(1) {
  top: -10px;
  left: 5px;
}
.line:nth-child(2) {
  transform: rotate(90deg);
  top: 45px;
  left: 60px;
}
.line:nth-child(3) {
  transform: rotate(90deg);
  top: 155px;
  left: 60px;
}
.line:nth-child(4) {
  transform: rotate(180deg);
  top: 210px;
  left: 5px;
}
.line:nth-child(5) {
  transform: rotate(270deg);
  top: 155px;
  left: -50px;
}
.line:nth-child(6) {
  transform: rotate(270deg);
  top: 45px;
  left: -50px;
}
.line:nth-child(7) {
  top: 100px;
  left: 5px;
}
.line > div {
  position: absolute;
  height: 250%;
  background-color: #efdf8f;
  background-image: linear-gradient(#fff2, #0005);
  border: 1px solid #0007;
  opacity: 1;
  -webkit-animation: color 16s infinite, opcty 7s infinite;
          animation: color 16s infinite, opcty 7s infinite;
}
@-webkit-keyframes color {
  0% {
    background-color: #f76e6e;
  }
  10% {
    background-color: #f7c06e;
  }
  20% {
    background-color: #dcf76e;
  }
  30% {
    background-color: #89f76e;
  }
  40% {
    background-color: #6ef7a5;
  }
  50% {
    background-color: #6ef7f7;
  }
  60% {
    background-color: #6ea5f7;
  }
  70% {
    background-color: #896ef7;
  }
  80% {
    background-color: #dc6ef7;
  }
  90% {
    background-color: #f76ec0;
  }
  100% {
    background-color: #f76e6e;
  }
}
@keyframes color {
  0% {
    background-color: #f76e6e;
  }
  10% {
    background-color: #f7c06e;
  }
  20% {
    background-color: #dcf76e;
  }
  30% {
    background-color: #89f76e;
  }
  40% {
    background-color: #6ef7a5;
  }
  50% {
    background-color: #6ef7f7;
  }
  60% {
    background-color: #6ea5f7;
  }
  70% {
    background-color: #896ef7;
  }
  80% {
    background-color: #dc6ef7;
  }
  90% {
    background-color: #f76ec0;
  }
  100% {
    background-color: #f76e6e;
  }
}
@-webkit-keyframes opcty {
  0%, 23%, 25%, 27%, 41%, 43%, 65%, 67%, 70%, 89%, 91%, 100% {
    opacity: 1;
  }
  24%, 26%, 42%, 66%, 71%, 90% {
    opacity: 0;
  }
}
@keyframes opcty {
  0%, 23%, 25%, 27%, 41%, 43%, 65%, 67%, 70%, 89%, 91%, 100% {
    opacity: 1;
  }
  24%, 26%, 42%, 66%, 71%, 90% {
    opacity: 0;
  }
}
.line.off > div {
  opacity: 0.05;
  -webkit-animation: color 16s infinite;
          animation: color 16s infinite;
}
.line .front {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0 50%, 10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%);
          clip-path: polygon(0 50%, 10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%);
  opacity: 0.8;
}
.line .top {
  top: 0;
  left: 10%;
  width: 80%;
  transform: rotateX(-90deg);
  transform-origin: top;
}
.line .bottom {
  top: 100%;
  left: 10%;
  width: 80%;
  transform: rotateX(-90deg);
  transform-origin: top;
}
.line .topLeft {
  top: 50%;
  left: 0;
  width: 14%;
  transform: rotateX(-90deg) rotateY(45deg);
  transform-origin: top left;
}
.line .topRight {
  top: 50%;
  right: 0;
  width: 14%;
  transform: rotateX(-90deg) rotateY(-45deg);
  transform-origin: top right;
}
.line .bottomLeft {
  top: 50%;
  left: 0;
  width: 14%;
  transform: rotateX(-90deg) rotateY(-45deg);
  transform-origin: top left;
}
.line .bottomRight {
  top: 50%;
  right: 0;
  width: 14%;
  transform: rotateX(-90deg) rotateY(45deg);
  transform-origin: top right;
}