* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Koxnot', sans-serif;
}

:root {
  --card_width: 350px;
  --card_border_radius: 16px;
  --row_increment: 10px;
  --card_small: 26;
  --card_medium: 33;
  --card_large: 45;
  --b1cd: #500033;
  --b1cl: #ff0077;
  --b2cd: #000050;
  --b2cl: #0033ff;
  --b3cd: #00501d;
  --b3cl: #00ff44;
  --b4cd: #554d00;
  --b4cl: #ff4e00;
  --b5cd: #300050;
  --b5cl: #8000ff;
  --black: #000;
  --white: #fff;
  --grey: #b5b4b4;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #041010;
  overflow-x: hidden;
}

main {
  height: 803vh;
  overflow-x: hidden;
}

.colorPrimary {
  color: #D8AB81 !important;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: #000;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: none;
  overflow-x: hidden;
}

#preloader.hide {
  opacity: 0;
}

#preloader video {
  width: 100vw;
  height: 100%;
  object-fit: cover;
}

.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 803vh;
  margin: auto;
  width: 90vw;
  display: flex;
  justify-content: space-between;
}

.line {
  position: relative;
  width: 1px;
  height: 100%;
  overflow: hidden;
}

.line::after {
  content: '';
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation: drop 15s 0s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

.line:nth-child(1)::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation-delay: 0.5s;
}

.line:nth-child(2)::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation-delay: 1s;
}

.line:nth-child(3)::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation-delay: 1.5s;
}

.line:nth-child(4)::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation-delay: 2s;
}

.line:nth-child(5)::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation-delay: 2.5s;
}

.line:nth-child(6)::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation-delay: 3s;
}

.line:nth-child(7)::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation-delay: 3.5s;
}

.line:nth-child(8)::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation-delay: 4s;
}

.line:nth-child(9)::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation-delay: 4.5s;
}

.line:nth-child(10)::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  animation-delay: 5s;
}

@keyframes drop {
  0% {
    top: -50%;
  }

  100% {
    top: 110%;
  }
}