:root {
   --color-border-gray: #4b5563;
   --color-gray: #1f2937;
}

/* Hover en nav */
.underline-animation {
   position: relative;
}

.underline-animation::before {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   bottom: 0;
   left: 0;
   background-color: currentColor;
   visibility: hidden;
   transition: all 0.3s ease-in-out;
}

.underline-animation:hover::before {
   visibility: visible;
   width: 100%;
}


/* Activo en nav */
.active {
   color: #1e293b;
   position: relative;
}

.active::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 2px;
   bottom: 0;
   left: 0;
   background-color: currentColor;
   visibility: visible;
}

.loader {
   margin: 0 auto;
   display: flex;
   width: 12rem;
   height: 12rem;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   overflow: hidden;
   position: relative;
   border-radius: 50%;
   border: 0.4rem solid var(--color-border-gray);
}

.loader-server[class*="1"] {
   animation-delay: .7s;
}

.loader-server[class*="2"] {
   animation-delay: 0.9s;
}

.loader-server[class*="3"] {
   animation-delay: 1.1s;
}

.loader-server[class*="4"] {
   animation-delay: 1.3s;
}

.tars {
   z-index: 0;
   position: absolute;
   height: 100px;
   width: 130px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   transform-style: preserve-3d;
   animation: rotateX3D 2s ease-in-out infinite;
   animation-delay: 0.5s;
}

.loader-server {
   position: relative;
   display: flex;
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
   animation: rotateY3D 3s ease-in infinite both;
}

.shape {
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
   position: relative;
   z-index: -1;
}

.shape div {
   display: block;
   position: absolute;
   text-align: center;
}

.loader-server:nth-child(2) .f::after,
.loader-server:nth-child(3) .f::after {
   position: absolute;
   content: '';
   width: 100%;
   z-index: -1;
   height: 20px;
   background-image: radial-gradient(#54ff6e 2px, transparent 1%);
   background-size: 20px 5px;
   left: 0;
   top: 20%;
   border: 0;
   animation: animMove 2s linear infinite alternate-reverse;
   overflow: hidden;
}

.loader-server:nth-child(2) .f::before,
.loader-server:nth-child(3) .f::before {
   position: absolute;
   content: '';
   width: 85%;
   z-index: -1;
   height: 20px;
   left: 0;
   top: 20%;
   border: 0;
   background: #181818;
   border: 2px solid var(--color-border-gray);
   overflow: hidden;
}

.loader-server:nth-child(1),
.loader-server:nth-child(4) {

   & .f::before,
   & .r::before,
   & .l::before {
      position: absolute;
      content: '';
      width: 95%;
      height: 5px;
      left: 0;
      top: 25%;
      border: 1px solid var(--color-border-gray);
      overflow: hidden;
   }
}

.loader-server:nth-child(1) .b::before,
.loader-server:nth-child(4) .b::before {
   position: absolute;
   content: '';
   width: 95%;
   z-index: -1;
   height: 5px;
   left: 0;
   top: 69%;
   border: 0;
   border: 1px solid var(--color-border-gray);
   overflow: hidden;
}

.f {
   transform: rotateY(0deg) translateZ(15px);
   border-radius: 2px;
   overflow: hidden;
   transform-style: preserve-3d;
}

.b {
   transform: rotateX(180deg) translateZ(15px);
   border-radius: 2px;
}

.f,
.b {
   width: 30px;
   height: 100px;
   background: #212121;
   box-shadow: inset 0 0 0 2px var(--color-border-gray);
   border: 2px solid var(--color-border-gray);
}

.l {
   transform: rotateY(-90deg) translateZ(0px);
   border-radius: 2px;
}

.r {
   transform: rotateY(90deg) translateZ(-30px);
   border-radius: 2px;
}

.l,
.r {
   width: 30px;
   height: 100px;
   left: 15px;
   position: relative;
   z-index: -1;
   background: #212121;
   box-shadow: inset 0 0 0 2px var(--color-border-gray);
   border: 2px solid var(--color-border-gray);
}

.t {
   transform: rotateX(90deg) translateZ(40px);
   border-radius: 2px;
}

.bot {
   transform: rotateX(-90deg) translateZ(60px);
   border-radius: 2px;
}

.t,
.bot {
   width: 30px;
   height: 30px;
   top: 25px;
   position: relative;
   z-index: -1;
   background: #212121;
   box-shadow: inset 0 0 0 2px var(--color-border-gray);
   border: 2px solid var(--color-border-gray);
}

@keyframes rotateY3D {
   0% {
      transform: translateZ(0px) rotateX(0);
   }

   50% {
      transform: translateZ(0px) rotateX(-360deg);
   }

   100% {
      transform: translateZ(0px) rotateX(-360deg);
   }
}

@keyframes rotateX3D {
   0% {
      transform: translateX(0px) rotateY(0);
   }

   50% {
      transform: translateX(0px) rotateY(180deg);
   }

   100% {
      transform: translateX(0px) rotateY(360deg);
   }
}

@keyframes animMove {
   0% {
      transform: translateX(20px);
   }

   100% {
      transform: translateX(-10px);
   }
}