.bouncing-text {
  animation: bounce 5s infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-10px);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.custom-arrow-up {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("https://sport.vicket.com/img/arrow-up.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: invert(1) brightness(2);
}

#container {
  /* height: 700px;
  /*@media (max-width: 576px) {
      height: 500px;
  } */
  padding-bottom: 100px;

  background: linear-gradient(30deg, #ec098c, #f6931e);
  background-size: 400% 400%;
  animation: AnimationName 30s ease infinite;

  .title1 {
    letter-spacing: 13px;
    font-size: 130px;
    color: #ffffff;
  }

  @media (max-width: 576px) {
    .title1 {
      font-size: 50px;
      line-height: 60px;
    }
  }

  .title2 {
    font-size: 150px;
    line-height: 130px;
    font-weight: 900;
    margin-bottom: 50px;
    color: #ffffff;
  }

  @media (max-width: 576px) {
    .title2 {
      font-size: 65px;
      line-height: 70px;
    }
  }

  .subtitle {
    font-size: 30px;
    letter-spacing: 4px;
    margin-bottom: 2em !important;
  }

  @media (max-width: 768px) {
    .subtitle {
      margin-bottom: 2.5em !important;
    }
  }

  @media (max-width: 992px) {
    .subtitle {
      width: 100%;
    }
  }

  @media (min-width: 992px) {
    .subtitle {
      width: 42%;
    }
  }
  .button-container {
    display: flex;
    /* margin-bottom: 75px; */
  }

  @media (max-width: 768px) {
    .button-container {
      flex-direction: column;
      align-items: center;
    }

    .button-container .create-account-container {
      margin-bottom: 48px;
    }
  }

  .button-container div > a {
    white-space: nowrap;
    font-size: 17px;
    line-height: 17px;
    border-style: solid;
    border-width: 2px;
    letter-spacing: 2px;
    padding: 12px 35px;
    box-shadow: rgb(153, 153, 153) 0px 0px 0px 0px;
  }

  .button-container div > a.create-account {
    border-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
  }

  .button-container div > a.create-account:hover {
    border-color: #f4f4f5;
  }

  .button-container div > a.login {
    background-color: rgb(219, 28, 34);
    border-color: transparent;
    cursor: pointer;
  }

  .button-container div > a.login:hover {
    background-color: #040101;
    border-color: #040101;
  }

  .button-container .bouncing-text {
    animation: bounce 5s infinite;
    top: 88%;
    left: 59%;
  }
}

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