@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";
* {
  box-sizing: border-box;
  margin: 0;
}

a {
  color: #fff;
  text-decoration: none;
}

body {
  font-family: Montserrat, sans-serif;
  overflow-y: hidden;
}

.bgvid {
  z-index: -5;
  position: absolute;
  /*transform: translateY(-20%);*/
}

.grapContainer {
  transform-origin: 0 0;
  scrollbar-width: none;
  background: #fff;
  width: 51vh;
  height: 115vw;
  overflow: hidden auto;
  transform: rotate(-95deg)translate(-153%, -59%);
}

body::-webkit-scrollbar {
  display: none;
}

.grapContainer .sub-container {
  transform-origin: 0 0;
  white-space: nowrap;
  transform: rotate(90deg)translateY(-100%);
}

.grapContainer .sub-container .child {
  vertical-align: top;
  white-space: break-spaces;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 33vw;
  height: 51vh;
  display: inline-flex;
}

.radial-gradient {
  aspect-ratio: 16 / 9;
  opacity: 0;
  background: radial-gradient(#ffc505 80% 20%, #02d1f6);
  border-radius: 1rem;
  width: 32.8rem;
  position: fixed;
}

.child:hover .radial-gradient {
  opacity: .2;
}

.child:hover {
  transition: all 1s ease-in;
}

.child {
  flex-direction: column;
  display: flex;
}

.child img {
  z-index: -1;
  height: 100%;
  position: absolute;
}

.child video {
  border-radius: 1rem;
  margin-bottom: 1.2rem;
}

.hover_text {
  color: #fff;
  display: none;
}

.child:hover .hover_text {
  font-size: 3rem;
  font-weight: bolder;
  display: block;
  position: absolute;
}

h1 {
  margin-top: 5rem;
  font-size: 10em;
  transform: rotate(-5deg)translateY(-10%);
}

h1 span {
  float: left;
  color: #363636;
  filter: blur(2px);
  margin: 0 5px;
  padding: 0;
  animation: 3.3s linear infinite animate;
  display: block;
  position: relative;
}

h1 span:first-child {
  animation-delay: .3s;
}

h1 span:nth-child(2) {
  animation-delay: .9s;
}

h1 span:nth-child(3) {
  animation-delay: 1.2s;
}

h1 span:nth-child(4) {
  animation-delay: 1.5s;
}

h1 span:nth-child(5) {
  animation-delay: 1.8s;
}

h1 span:nth-child(6) {
  animation-delay: 2.1s;
}

h1 span:nth-child(7) {
  animation-delay: 2.4s;
}

h1 span:nth-child(8) {
  animation-delay: 2.7s;
}

h1 span:nth-child(9) {
  animation-delay: 3s;
}

h1 span:nth-child(10) {
  animation-delay: 3.3s;
}

@keyframes animate {
  0%, 100% {
    color: #fff;
    filter: blur();
    text-shadow: 0 0 10px #a5489e, 0 0 20px #a5489e, 0 0 40px #a5489e, 0 0 80px #a5489e, 0 0 120px #a5489e, 0 0 200px #a5489e, 0 0 300px #a5489e, 0 0 700px #a5489e;
  }

  5%, 95% {
    color: #363636;
    filter: blur(3px);
    text-shadow: none;
  }
}

@media only screen and (width <= 1486px) and (width >= 1200px) {
  .child video {
    width: 440px;
  }

  .radial-gradient {
    width: 27.45rem;
  }
}

@media only screen and (width <= 461px) and (width >= 320px) {
  body {
    background-color: #000;
  }

  h1 {
    font-size: 2.5rem;
  }

  .grapContainer {
    overflow-x: auto;
    transform: rotate(-95deg) translate(-128%, -12%);
  }
    .child:hover{
        display:none !important;
    }
  .grapContainer .sub-container .child {
    width: 134vw;
  }
}
/*# sourceMappingURL=graphics.bf57c19f.css.map */