@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Lato&family=Roboto+Mono&display=swap');
  
  body {
    height: 100vh;
    margin:0;
    background-color:  rgb(14, 19, 27);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  span {
    padding: 0;
    margin: 0;
  }
  
  .bg {
    animation:slide 10s infinite alternate;
    background-image: linear-gradient( -60deg, rgba(106, 126, 192, 0.918) 50%, rgb(31, 45, 58) 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
  }
  
  
  .bg2 {
    animation-direction:alternate-reverse;
    animation-duration:7s;
  }
  
  .bg3 {
    animation-duration:6s;
  }
  

  .container-cube {
    z-index: 1;
    perspective: 2000px;
    width: 300px;
    height: 300px;
    text-align: center;
    font-size: 50px;
    font-family: 'Arvo', serif;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff,0 0 30px #fff, 0 0 40px #fff,0 0 50px #fff, 0 0 60px #fff;
    color: white;
  }

  .enter{
    margin-bottom: -55%;
    margin-left: 17%;
    z-index: 1;
    height: fit-content;
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;
    box-shadow: inset 0 0 5px whitesmoke;
    background-blend-mode: lighten;    
    border-radius: 10px;
    border: none;
  }


  .cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: spin 5s infinite linear;
  }
  
  

  
  .face {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3);
  }

  .front {
    transform: translateZ(150px);
    background: rgb(31, 45, 58) 50%;
    opacity: 0.2;

  }
  
  .back {
    transform: translateZ(-150px) rotateY(180deg);
    background: rgb(31, 45, 58) 50%;
    opacity: 0.2;

  }
  
  .right {
    transform: rotateY(-90deg) translateZ(150px);
    background: rgb(31, 45, 58) 50%;
    opacity: 0.2;

  }
  
  .left {
    transform: rotateY(90deg) translateZ(150px);
    background: rgb(31, 45, 58) 50%;
    opacity: 0.2;
  }
  
  .top {
    transform: rotateX(-90deg) translateZ(150px);
    background: rgb(31, 45, 58) 50%;
    opacity: 0.2;
  }
  
  .bottom {
    transform: rotateX(90deg) translateZ(150px);
    background: rgb(31, 45, 58) 50%;
    opacity: 0.2;
  }

  .neon-text {
    color: #FFF;
    font-size: 36px;
    font-family: 'Arial', sans-serif;
    text-shadow: 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 100px #fff;
    
  }
  
  
  .blinking-text {
    animation: blink 4.5s ease-in-out infinite;
  }

  .blinking-text-2 {
    animation: blink2 3.5s ease-in-out infinite;
  }
  .blinking-text-3 {
    animation: blink3 2.5s ease-in-out infinite;
  }
  .blinking-text-4 {
    animation: blink4 3s ease-in-out infinite;
  }
  .blinking-text-5 {
    animation: blink5 1s ease-in-out infinite;
  }
  
  
  
  @keyframes blink {
    0% {
      opacity: 1;
    }
    15% {
      opacity: 0;
    }
    20% {
      opacity: 0.2;
    }
    50% {
      opacity: 1;
    }
    55% {
      opacity: 0.2;
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes blink2 {
    0% {
      opacity: 1;
    }
    15% {
      opacity: 1;
    }
    20% {
      opacity: 0.2;
    }
    50% {
      opacity: 0;
    }
    55% {
      opacity: 0.5;
    }
    60% {
      opacity: 0;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes blink3 {
    0% {
      opacity: 1;
    }
    15% {
      opacity: 0;
    }
    20% {
      opacity: 0.2;
    }
    50% {
      opacity: 1;
    }
    55% {
      opacity: 0.5;
    }
    60% {
      opacity: 0;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes blink3 {
    0% {
      opacity: 1;
    }
    15% {
      opacity: 1;
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    55% {
      opacity: 0.2;
    }
    60% {
      opacity: 0.5;
    }
    70% {
      opacity: 1;
    }
    80% {
      opacity: 0.2;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes blink5 {
    0% {
      opacity: 0;
    }
    15% {
      opacity: 0;
    }
    20% {
      opacity: 0.2;
    }
    50% {
      opacity: 1;
    }
    55% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    70% {
      opacity: 0;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @keyframes spin {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
    
  }
  @keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
  }


  @media only screen and (max-width: 900px) {

    body{
      width: 100%;
      height: 100%;
      overflow: hidden; 
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container-cube {
      position: absolute;
      z-index: 1;
      perspective: 2000px;
      width: 300px;
      height: 300px;
      text-align: center;
      font-size: 50px;
      font-family: 'Arvo', serif;
      text-shadow: 0 0 10px #fff, 0 0 20px #fff,0 0 30px #fff, 0 0 40px #fff,0 0 50px #fff, 0 0 60px #fff;
      color: white;
      margin: 0;
      padding: 0;
    }


    .bg {
      animation:slide 5s infinite alternate;
      background-image: linear-gradient( -60deg, rgba(106, 126, 192, 0.918) 50%, rgb(31, 45, 58) 50%);
      bottom:0;
      left:-50%;
      opacity:.5;
      position:fixed;
      right:-50%;
      top:0;
      z-index:-1;
    }
    
    
    .bg2 {
      animation-direction:alternate-reverse;
      animation-duration:4s;
    }
    
    .bg3 {
      animation-duration:3s;
    }


  }