@import url("base.css");

.home {
  position: relative;
  width: 100%;
  height: 100vh;
}

.home-content {
  position: absolute;
  z-index: 1000;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.txt {
  font-size: 4vw;
  color: #ffffff;
  font-weight: 400;
}

.gameplay {
  font-size: 1.5vw;
  color: #ffffff;
  text-transform: uppercase;
  background: none;
  margin-top: 30px;
  padding: 1.5vw 2.5vw;
  border: 1px solid #ffffff;
  border-radius: 5px;
  display: inline-block;
}

.gameplay:focus {
  outline: none;
}

.flicker-0 {
  color: #ffffff;
  background: rgb(97, 218, 251);
  box-shadow: rgb(97, 218, 251) 0px 0px 150px;
  border: 1px solid rgb(97, 218, 251);
}

.flicker-1 {
  color: #ffffff;
  background: rgb(65, 184, 131);
  box-shadow: rgb(65, 184, 131) 0px 0px 150px;
  border: 1px solid rgb(65, 184, 131);
}

.flicker-2 {
  color: #ffffff;
  background: rgb(223, 176, 122);
  box-shadow: rgb(223, 176, 122) 0px 0px 150px;
  border: 1px solid rgb(223, 176, 122);
}

.flicker-3 {
  color: #ffffff;
  background: rgb(221, 0, 49);
  box-shadow: rgb(221, 0, 49) 0px 0px 150px;
  border: 1px solid rgb(221, 0, 49);
}

.gameplay-0:hover {
  color: #ffffff;
  background: rgb(97, 218, 251);
  box-shadow: rgb(97, 218, 251) 0px 0px 150px;
  border: 1px solid rgb(97, 218, 251);
}

.gameplay-1:hover {
  color: #ffffff;
  background: rgb(65, 184, 131);
  box-shadow: rgb(65, 184, 131) 0px 0px 150px;
  border: 1px solid rgb(65, 184, 131);
}

.gameplay-2:hover {
  color: #ffffff;
  background: rgb(223, 176, 122);
  box-shadow: rgb(223, 176, 122) 0px 0px 150px;
  border: 1px solid rgb(223, 176, 122);
}

.gameplay-3:hover {
  color: #ffffff;
  background: rgb(221, 0, 49);
  box-shadow: rgb(221, 0, 49) 0px 0px 150px;
  border: 1px solid rgb(221, 0, 49);
}

/* cube */
.cube-container {
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
}

.cube-container:hover{
  cursor: pointer;
}

#D3Cube {
  width: 12vw;
  height: 12vw;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
  animation: cubeRotation 70s infinite;
}

#D3Cube>div {
  position: absolute;
  width: 12vw;
  height: 12vw;
  overflow: hidden;
  opacity: 0.7;
  border: 2px solid white;
  background-color: rgb(97, 218, 251);
  box-shadow: rgb(97, 218, 251) 0px 0px 150px;
}

#side1 {
  transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(6vw);
}

#side2 {
  transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(6vw);
}

#side3 {
  transform: translateX(0px) translateY(0px) translateZ(6vw);
}

#side4 {
  transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(6vw);
}

#side5 {
  transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(6vw);
}

#side6 {
  transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(6vw);
}

@-webkit-keyframes cubeRotation {
  0% {
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
  }

  50% {
    -webkit-transform: rotateX(-22deg) rotateY(-128deg) rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);
  }
}

@keyframes cubeRotation {
  0% {
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
  }

  50% {
    transform: rotateX(-22deg) rotateY(-238deg) rotateZ(20deg);
  }

  100% {
    transform: rotateX(-22deg) rotateY(-398deg) rotateZ(180deg);
  }
}

.canvas-3d {
  display: none;
}

@media only screen and (max-width: 850px) {
  .home-content {
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 1000;
    left: 50%;
    top: 40%;
    line-height: 6.5vw;
    transform: translate(-50%, -50%);
  }

  .txt {
    font-size: 6.5vw;
    color: #ffffff;
    font-weight: 400;
  }

  .gameplay {
    font-size: 3vw;
    color: #ffffff;
    text-transform: uppercase;
    background: none;
    margin-top: 30px;
    padding: 3vw 5vw;
    border: 1px solid #ffffff;
    border-radius: 5px;
    display: inline-block;
  }

  .gameplay:focus {
    outline: none;
  }

  .flicker-0 {
    color: #ffffff;
    background: rgb(97, 218, 251);
    box-shadow: rgb(97, 218, 251) 0px 0px 150px;
    border: 1px solid rgb(97, 218, 251);
  }

  .flicker-1 {
    color: #ffffff;
    background: rgb(65, 184, 131);
    box-shadow: rgb(65, 184, 131) 0px 0px 150px;
    border: 1px solid rgb(65, 184, 131);
  }

  .flicker-2 {
    color: #ffffff;
    background: rgb(223, 176, 122);
    box-shadow: rgb(223, 176, 122) 0px 0px 150px;
    border: 1px solid rgb(223, 176, 122);
  }

  .flicker-3 {
    color: #ffffff;
    background: rgb(221, 0, 49);
    box-shadow: rgb(221, 0, 49) 0px 0px 150px;
    border: 1px solid rgb(221, 0, 49);
  }

  .gameplay-0:hover {
    color: #ffffff;
    background: rgb(97, 218, 251);
    box-shadow: rgb(97, 218, 251) 0px 0px 150px;
    border: 1px solid rgb(97, 218, 251);
  }

  .gameplay-1:hover {
    color: #ffffff;
    background: rgb(65, 184, 131);
    box-shadow: rgb(65, 184, 131) 0px 0px 150px;
    border: 1px solid rgb(65, 184, 131);
  }

  .gameplay-2:hover {
    color: #ffffff;
    background: rgb(223, 176, 122);
    box-shadow: rgb(223, 176, 122) 0px 0px 150px;
    border: 1px solid rgb(223, 176, 122);
  }

  .gameplay-3:hover {
    color: #ffffff;
    background: rgb(221, 0, 49);
    box-shadow: rgb(221, 0, 49) 0px 0px 150px;
    border: 1px solid rgb(221, 0, 49);
  }

  /* cube */
  .cube-container {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #D3Cube {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
    animation: cubeRotation 20s infinite;
  }

  #D3Cube>div {
    position: absolute;
    width: 100px;
    height: 100px;
    overflow: hidden;
    opacity: 0.7;
    border: 1px solid white;
    background-color: rgb(97, 218, 251);
    box-shadow: rgb(97, 218, 251) 0px 0px 150px;
  }

  #side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(50px);
  }

  #side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(50px);
  }

  #side3 {
    transform: translateX(0px) translateY(0px) translateZ(50px);
  }

  #side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(50px);
  }

  #side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(50px);
  }

  #side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(50px);
  }

  .canvas-3d {
    display: none;
  }
}