/*Animación para contenedor de formulario*/
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}

@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}

.content {
position: absolute;
top: 50%;
right: 10%;
transform: translateY(-50%);
color: white;
z-index: 1;
padding: 50px;
width: 350px;
border-radius: 20px;
box-shadow:0 0 15px #09fccb, 0 0 20px #ffffff, 0 0 15px #09fccb inset;

/* Añadir animación */
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #00ffcc;
    text-align: center;
}

p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #00ffcc;
    text-align: center;
}

.form-control {
    background-color: transparent;
    border: 2px solid #00ffcc;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px #00ffcc;
    color: #00ffcc;
}

.form-control::placeholder {
    color: #00ffcc;
    text-align: left;
}

.form-control:focus {
    border-color: #00ffcc;
    box-shadow: 0 0 10px #00ffcc;
}

.form-check-label {
    color: #00ffcc;
}

.btn-light {
    background-color: transparent;
    color: #00ffcc;
    border: 2px solid #00ffcc;
    border-radius: 15px;
    padding: 10px 20px;
    font-weight: bold;
    box-shadow: 0 0 10px #00ffcc;
}

.btn-light:hover {
    background-color: #00ffcc;
    color: black;
}

/*Para las validaciones*/
#errorContainer {
    margin-top: 10px;
    /* Espaciado superior para separar del botón */
    color: white;
    /* Color del texto de los mensajes de error */
}

#errorList {
    margin-top: 10px;
    /* Espaciado superior para separar del botón */
    color: white;
    /* Color del texto de los mensajes de error */
    list-style-type: none;
    /* Sin viñetas en la lista */
    padding: 0;
    /* Sin padding en la lista */
}