a{
  text-decoration: none;
}

html, body{ 
  height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  background: none; /* Start with no background */
  /*animation: backgroundChange 5s forwards;*/
}

.logo-img{
  width: min(15rem,80%);
  /*animation: blendChange 5s forwards;*/
}

/* .invert{
  animation: colorChange 5s forwards;
} */

form{
  z-index: 1;
  position: relative;
}
.navbar{
  z-index: 1;
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgb(52 147 133);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 7s;
    animation-duration: 7s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

.w-fx{
  width: min(80%, 30rem) !important;
  margin: auto;
}

.border-right-0{
  border-right: none;
}

.input-group-text{
  background-color: #e8f0fe;
}

.cursor-pointer{
  cursor: pointer;
}

@keyframes backgroundChange {
  to {
    background: #2d7f73; /* Set a solid blue background */
  }
}

@keyframes animate {

  0%{
      transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
  }

  100%{
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      border-radius: 50%;
  }

}

@keyframes blendChange {
  to {
    filter: invert(1) grayscale(1) brightness(1.7); /* Set a solid blue background */
  }
}

@keyframes colorChange {
  to {
    color: white; /* Set a solid blue background */
  }
}

.btn-close:hover, .btn-close:focus{
  outline: none;
  border: none;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
  color: var(--bs-btn-active-color); 
  background-color: #4ca093;
  border-color: #4ca093;
}

.app-version {
  margin-top: 40px;
  text-align: center;
  font-size: 13px;
  color: #9aa3a8;
  letter-spacing: 0.5px;
  font-weight: 500;
  opacity: 0.8;
}