/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: #161d31;
}

.material-icons.text-base {
  font-size: inherit;
}

.bg-secondary {
  background-color: #283046;
}

.bg-gradient {
  background: linear-gradient(132deg, #FC415A, #591BC5, #212335);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
}

.cube {
  position: absolute;
  top: 100%;
  left: 45%;
  width: 10px;
  height: 10px;
  border: solid 1px #D7D4E4;
  transform-origin: top left;
  transform: scale(0) rotate(0deg) translate(-50%, -50%);
  animation: cube 8s ease-in forwards infinite;
}
.cube:nth-child(2n) {
  border-color: #FFF ;
}
.cube:nth-child(2) {
  animation-delay: 1s;
  left: 25%;
  top: 40%;
}
.cube:nth-child(3) {
  animation-delay: 3s;
  left: 80%;
  top: 50%;
}
.cube:nth-child(4) {
  animation-delay: 5s;
  left: 90%;
  top: 10%;
}
.cube:nth-child(5) {
  animation-delay: 7s;
  left: 10%;
  top: 50%;
}
.cube:nth-child(6) {
  animation-delay: 9s;
  left: 50%;
  top: 10%;
}

.latest {
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 20px 0;
}

.latest:after, .latest:before {
  content: " ";
  display: block;
  border-bottom: 3px solid #fff;
}



.ghost {
  border-radius: 150px 150px 7px 7px;
  -webkit-animation: ghost 1.5s ease-in-out alternate infinite;
          animation: ghost 1.5s ease-in-out alternate infinite;
}

.corner {
  width: 30px; height: 30px;
  border-radius: 5px; 
  background-color: #161d31;
  position: absolute;
  margin-top: 188px; 
  -webkit-transform: rotate(45deg); 
          transform: rotate(45deg); 
  z-index: -1; 
}
.corner.two {
  margin-left: 35px; 
}
.corner.three {
  margin-left: 70px; 
}
.corner.four {
  margin-left: 105px; 
}

.over {
  width: 30px; height: 30px;
  border-radius: 4px; 
  background-color: #161d31;
  position: absolute;
  margin-top: 188px; 
  -webkit-transform: rotate(45deg) translateX(4px) translateY(4px); 
          transform: rotate(45deg) translateX(4px) translateY(4px); 
}
.over.two {
  margin-left: 35px; 
}
.over.three {
  margin-left: 70px; 
}
.over.four {
  margin-left: 105px; 
}

.ghost-shadow {
  border-radius: 100%;
  -webkit-animation: shadow 1.5s ease-in-out alternate infinite;
          animation: shadow 1.5s ease-in-out alternate infinite;
}

@-webkit-keyframes shadow {
  0% {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px);
  }
  100% {
    -webkit-transform: scale(0.8) translateY(75px);
            transform: scale(0.8) translateY(75px);
  }
}

@keyframes shadow {
  0% {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px);
  }
  100% {
    -webkit-transform: scale(0.8) translateY(75px);
            transform: scale(0.8) translateY(75px);
  }
}
@-webkit-keyframes ghost {
  0% {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px)
  }
  100% {
    -webkit-transform: scale(1) translateY(-40px);
            transform: scale(1) translateY(-40px)
  }
}
@keyframes ghost {
  0% {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px)
  }
  100% {
    -webkit-transform: scale(1) translateY(-40px);
            transform: scale(1) translateY(-40px)
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}
