@import url("./_variables.css");

/* Universal */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables */

/* Classes */
body {
  background-color: var(--background-color);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

span {
  position: absolute;
  height: 20vh;
  background: linear-gradient(transparent, var(---ligth-color));
  border-radius: 1rem;
  z-index: 2;
  animation: rain 5s linear infinite;
}

span:nth-child(3n + 1) {
  background: linear-gradient(transparent, var(--first-color));
}

span:nth-child(3n + 2) {
  background: linear-gradient(transparent, var(--second-color));
}

span:nth-child(3n + 3) {
  background: linear-gradient(transparent, var(--third-color));
}

img {
  opacity: 0.5;
  filter: drop-shadow(0 0 1rem rgb(255, 255, 255));
  width: 50vw;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: fade 10s linear infinite;
}

/* Animations */
@keyframes rain {
  from {
    transform: translateY(-50vh);
  }
  to {
    transform: translateY(150vh);
  }
}

@keyframes fade {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}