html, body {

  background-color: #232323;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  border: none;
  overflow: hidden;
}


/* /////FONDO\\\\\\ */

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 0;
  position: fixed;
}

.ball {
  position: absolute;
  border-radius: 50%;
  backface-visibility: hidden;
  animation: move linear infinite;
  
}

.ball:nth-child(odd) {
    color: #ffffff;
}

.ball:nth-child(even) {
    color: #fcfcfc;
}

/* Using a custom attribute for variability */
.ball:nth-child(1) {
  top: 77%;
  left: 88%;
  animation-duration: 40s;
  animation-delay: -3s;
  transform-origin: 16vw -2vh;
  background-image: url('/copito_1.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 10vmin;
  height: 10vmin;
}
.ball:nth-child(2) {
  top: 42%;
  left: 2%;
  animation-duration: 53s;
  animation-delay: -29s;
  transform-origin: -19vw 21vh;
  background-image: url('/copito_2.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2vmin;
  height: 2vmin;
  filter: blur(2px);
}
.ball:nth-child(3) {
  top: 28%;
  left: 18%;
  animation-duration: 49s;
  animation-delay: -8s;
  transform-origin: -22vw 3vh;
  background-image: url('/copito_1.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 8vmin;
  height: 8vmin;
  filter: blur(2px);
}
.ball:nth-child(4) {
  top: 50%;
  left: 79%;
  animation-duration: 26s;
  animation-delay: -21s;
  transform-origin: -17vw -6vh;
  background-image: url('/copito_2.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 5vmin;
  height: 5vmin;
  filter: blur(1px);
}
.ball:nth-child(5) {
  top: 46%;
  left: 15%;
  animation-duration: 36s;
  animation-delay: -40s;
  transform-origin: 4vw 0vh;
  background-image: url('/copito_1.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 12vmin;
  height: 12vmin;
  filter: blur(2px);
}
.ball:nth-child(6) {
  top: 77%;
  left: 16%;
  animation-duration: 31s;
  animation-delay: -10s;
  transform-origin: 18vw 4vh;
  background-image: url('/copito_2.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 3vmin;
  height: 3vmin;
  filter: blur(1px);
}


form{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 1%;
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  text-align: center;
  
}
form input{

  font-family: 'Poppins', sans-serif;
}

button{
  position: relative;
  font-family: 'Poppins', sans-serif;
  background-color: white;
  color: #fc9f9f;
  border: 0;
  top: -3%;
}


#password {
  padding-right: 40px; /* espacio para el botón */

}

#togglePassword {
  display: flex;
  position: relative;
  left: 85%;
  top: -48%;
  background: none;
  border: none;
  color: rgb(65, 65, 65);
  cursor: pointer;
  font-size: 18px;
}
 

 .text{

    margin-top: 10px;
 }
.title{
  font-size: 30px;
  color: white;
  margin-bottom: 10px;
 }

 .letra-v {
  color: #f7c7c7;
}

.log{
  display: flex;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  padding: 5%;
  max-width: fit-content;
  z-index: 100;
  top: 50%;
  left: 50%;
   transform: translate(-50%, -50%);
  transition: all 200ms;
}

.center {
  text-align: center;
}

.forget{

  color: #d8adad;
  cursor: pointer;

}

.codigo-panel {
  display: none;
  position: fixed;
  justify-content: center;
  text-align: center;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  padding: 5%;
  border: 40px solid rgba(0, 0, 0, 0.01);
  max-width: fit-content;
  z-index: 100;
  top: 50%;
  left: 50%;
   transform: translate(-50%, -50%);
  transition: all 200ms;
  color: white;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 1%;
  font-family: 'Poppins', sans-serif;
  max-width: 400px;
}

.codigo-digito {
  position: relative;
  width: 40px;
  height: 40px;
  text-align: center;
  flex-direction: row;
  font-size: 20px;
  margin: 5px;
  border: 2px solid #fc9f9f;
  border-radius: 5px;
}

#password02 {
  padding-right: 40px; /* espacio para el botón */
  font-family: 'Poppins', sans-serif;
  margin-top: 8%;
  margin-bottom: 8%;
}

#togglePassword02 {
  display: flex;
  position: absolute;
  left: 69%;
  top: 65%;
  background: none;
  border: none;
  color: rgb(65, 65, 65);
  cursor: pointer;
  font-size: 18px;
}

.input-group01{
  display: flex;

}

.arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: none;
  border-right: 15px solid rgb(233, 168, 168);
  border-bottom: 10px solid transparent;
}