html, body{
   height: 100%; 
   margin: 0; 
}

body {
    background-image: url('../imagenes/fondo.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.panel-login{
   background-color: #f8f9fa;
   height: auto;
   min-width: 380px;
   padding: 20px;

}

.flex-center {
   height: 80vh;
}

.bold-text {
   font-weight: bold;
}

.ganador {
   background-color: #d4edda; /* Fondo verde claro */
   color: green; /* Texto verde */
   font-weight: bold; /* Resaltar en negrita */
}

/* Añadir a tu archivo de estilos.css */
#nombreGanador {
   font-size: 3rem; /* Aumentar el tamaño del texto */
   font-weight: bold;
   color: #ff6347; /* Color llamativo para el nombre */
   text-align: center;
   animation: bounceIn 1s ease; /* Animación de entrada */
}

@keyframes bounceIn {
   0% {
       transform: scale(0);
       opacity: 0;
   }
   50% {
       transform: scale(1.1);
       opacity: 1;
   }
   100% {
       transform: scale(1);
   }
}

#confirmarGanador {
   font-size: 1.5rem;
   padding: 12px 30px;
   background-color: #28a745;
   color: white;
   border-radius: 5px;
   border: none;
   cursor: pointer;
   display: block;
   margin: 20px auto 0;
}

#confirmarGanador:hover {
   background-color: #218838;
}

#modalSorteo .modal-content {
   background-color: #f8f9fa;
   border-radius: 10px;
   padding: 20px;
}

#nombreGanador {
   font-size: 4rem;
   color: black; /* Azul brillante */
   animation: glow 1.5s infinite alternate;
}

@keyframes glow {
   0% {
       text-shadow: 0 0 5px #007bff, 0 0 10px #007bff, 0 0 15px #007bff;
   }
   100% {
       text-shadow: 0 0 20px #ff6347, 0 0 30px #ff6347, 0 0 40px #ff6347;
   }
}