@font-face {
  font-family: "Hard-Shell";
  src: url(./assets/fonts/Pack-Hard.woff2);
}

@font-face {
  font-family: "Light-Shell";
  src: url(./assets/fonts/33.otf);
}

.tower {
  position: fixed;
  top: 100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* overflow-y: hidden; */
  /* overflow-x: hidden; */
  pointer-events: none;
  transition: all 1s ease;
}


.cube {
  position: absolute;
  top: 35%;
  left: 50%;
  transform-style: preserve-3d;
  transform-origin: 0 0 0;
  transform: rotateX(-27deg) rotateY(-135deg);
  transition: top .5s ease, transform 1.5s cubic-bezier(0.350, 1.950, 0, 0.840);
  z-index: 3;
  pointer-events: visible;
}

.cube-active {
  transform: rotateX(-27deg) rotateY(45deg);
}


.cube:nth-child(2) {
  top: 55%;
  z-index: 2;
}

.cube:nth-child(3) {
  top: 75%;
  z-index: 1;
}

.cube:nth-child(4) {
  top: 95%;
  z-index: 0;
}

.cube .face {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #a95151;
  font-size: 8rem;
  white-space: nowrap;
  gap: 2rem;
  overflow: hidden;
  background: #000;
}

.cube .face span {
  transform: rotate(45deg);
  color: rgb(169, 81, 81);
  width: 10rem;
}

.cube .face span svg {
  width: 100%;
  height: 100%;
}

.top__project_list {
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  gap: 11.5vw;
}

.project_list__string{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11.5vw;
  animation: animate 1s ease-in-out;
}

@keyframes animate {
  0% {
    width: 0vw;
  }
  100% {
    width: 11.5vw;
  }
}


.cube .-front {
  width: 400px;
  height: 150px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(200px);
  /* background: rgba(103, 148, 193, 1); */
  border: 1px solid rgb(193, 103, 103);
  background: #000;
}

.cube .-left {
  width: 400px;
  height: 150px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(200px);
  /* background: rgba(88, 133, 178, 1); */
  border: 1px solid rgb(178, 88, 88);
}

.cube .-top {
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(75px);
  /* background: rgba(108, 153, 198, 1); */
  border: 1px solid rgb(198, 108, 108);
  background: #000;
}

.cube .-bottom {
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(75px);
  /* background: rgba(68, 113, 158, 1); */
  border: 1px solid rgb(158, 68, 68);
}

.cube .-right {
  width: 400px;
  height: 150px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(200px);
  /* background: rgba(88, 133, 178, 1); */
  border: 1px solid rgb(178, 88, 88);
  background: #000;
}

.cube .-back {
  width: 400px;
  height: 150px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(200px);
  /* background: rgba(78, 123, 168, 1); */
  border: 1px solid rgb(168, 78, 78);
}

.cube .face h4 {
  position: absolute;
  transform: translate(83%);
  font-family: "Hard-Shell";
  font-weight: 400;
}



.container {
  position: fixed;
  top: 100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#blocks {
  background: #000000;
  width: 105vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  overflow: hidden;
  z-index: 10000;
  flex-wrap: wrap;
}

.block {
  width: 35px;
  height: 35px;
  border: 0.5px solid rgba(255, 255, 255, 0.045);
  transition: border-color 0.3s ease;
}

.highlight {
  /* border-color: #fb3e1d;*/
  /* border-color: #D7ABC5; */
  border-color: #A95151;

  /* box-shadow: 0 0 10px #fb3e1d, 0 0 40px #fb3e1d, 0 0 80px #fb3e1d; */
}



/* Card */
.projectCard {
  width: 43vw;
  height: 30vw;
  display: block; 
  background: #ececec;
  border-radius: 2rem;
  padding: 1.25rem;
  position: absolute;
  left: 2vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: visible;

  & .separator {
    height: 1px;
    margin-block: 0.5rem;
    width: 100%;
    background: #000;
  }
}

.cardHeader {
  display: flex;
  justify-content: space-between;

  & div {
    font-family: "Hard-Shell";
    font-weight: 400;
    font-size: 10.5vw;
    height: 10.5vw;
    width: 16vw;
    line-height: 94%;
    color: #000;
    position: relative;
    overflow-y: hidden;
    
    & .idxs{
      position: absolute;
      font-size: 10.5vw;
      top: 100%;
    }
    & .idxActive{
      top: 0;
    }
  }

  & h3 {
    font-size: 2.25vw;
    line-height: 100%;
    letter-spacing: 0.5px;
    font-family: "light-shell";
    position: relative;
    height: max-content;
  }

  & h3::before{
    content: "";
    position: absolute;
    width: 0%;
    top: 100%;
    height: 1px;
    background: #000;
    bottom: -0.5rem;
    transition: all 1s ease;
  }

  & h3:hover::before{
    width: 100%;
  }
}

.cardBody {
  display: flex;
  justify-content: space-between;


  & p {
    font-family: monospace;
    font-size: 0.9vw;
    width: 50%;
    text-transform: uppercase;
  }

  & .circles {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & span {
      width: .8vw;
      height: .8vw;
      border-radius: 50%;
      border: 1px solid #000;
      background: transparent;
    }

    & .darkCircle {
      background: #000;
    }
  }
}

.cardControllers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;

  & p {
    font-size: 1.25vw;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 1px;
  }

  & button {
    background: transparent;
    color: #000;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    & .icon {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      cursor: none;
      transform: translate(-50%, -50%) rotate(90deg);

      & svg {
        transition: transform 0.5s ease;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 8vw;
        height: 8vw;
      }

      & .backward {
        transform: translate(50%, -150%);
      }

      & .forward {
        transform: translate(-150%, 50%);
      }
    }

    &.down .icon {
      transform: translate(-50%, -50%) rotate(-90deg);
    }

    & .corners {
      display: flex;
      position: relative;
      width: 8vw;
      height: 8vw;

      & .topLeft {
        position: absolute;
        top: 0;
        left: 0;
        width: 2vw;
        height: 2vw;
        border-left: 1px solid #000;
        border-top: 1px solid #000;
      }

      & .topRight {
        position: absolute;
        top: 0;
        right: 0;
        width: 2vw;
        height: 2vw;
        border-right: 1px solid #000;
        border-top: 1px solid #000;
      }

      & .bottomLeft {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 2vw;
        height: 2vw;
        border-left: 1px solid #000;
        border-bottom: 1px solid #000;
      }

      & .bottomRight {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 2vw;
        height: 2vw;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
      }
    }
  }

}