* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important; }

html, body {
  height: 100%; }

body {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  color: #f95252;
  line-height: 1.6;
  position: relative;
  font-family: sans-serif;
  overflow: hidden; }
.logo {
  z-index: 99;
  position: relative; }
.info {
  font-size: 14px;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 20px;
  background-color: transparent;
  z-index: 99;  }
.info img {
  vertical-align: bottom; }
.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 100vw; }

.line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgb(102 109 68 / 10%);
  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%, #95e19b 75%, #31cf1d 100%);
    animation: drop 5s 0s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); }
	.line:nth-child(1) {
    margin-left: -37.5%; }
    .line:nth-child(1)::after {
      animation-delay: 1s; }
	.line:nth-child(2) {
    margin-left: -25%; }
    .line:nth-child(2)::after {
      animation-delay: 3s; }
	.line:nth-child(3) {
    margin-left: -12.5%; }
    .line:nth-child(3)::after {
      animation-delay: 3.5s; }
	.line:nth-child(5) {
    margin-left: 12.5%; }
    .line:nth-child(5)::after {
      animation-delay: 4s; }
	.line:nth-child(6) {
    margin-left: 25%; }
    .line:nth-child(6)::after {
      animation-delay: 2.5s; }
	.line:nth-child(7) {
    margin-left: 37.5%; }
    .line:nth-child(7)::after {
      animation-delay: 1.5s; }

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