/* General Reset */
* {
    margin: 0px;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

/* Fondo del cuerpo */
body {
    background-image: url("../image/fondo1.png");
    background-size: cover; /* Asegura que la imagen se ajuste al contenedor */
   /* background-repeat: no-repeat;
    background-position: center center; */
}

/* Vara (flecha de la ruleta) */
.vara {
    height: 10vh; /* Altura relativa a la pantalla */
    width: 2vw; /* Anchura relativa al ancho de la pantalla */
    background-color: #aaa;
    margin: auto;
    position: relative;
    top: 1vh; /* Ajuste relativo a la pantalla */
    border-radius: 0px 0px 8px 8px;
    border: 1px solid #000;
    border-top: 5px solid #000;
    z-index: 1000;
}

/* Imagen (ruleta) */
img {
    z-index: 100;
    width: 90%; /* Ajusta el tamaño de la ruleta al contenedor */
    max-width: 800px; /* No excederá un tamaño grande */
    height: auto; /* Mantiene la proporción */
    transition: all 5s;
    margin: auto;
    display: block;
}

/* Texto del premio */
#premio {
    color: white;
    position: absolute;
    font-weight: bold;
    font-size: 1.5rem; /* Escala relativa al tamaño base */
    padding: 20px;
    top: 10%; /* Ajustado para que se vea bien en pantallas pequeñas */
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Efecto de sombra para visibilidad */
}


.swal2-styled.swal2-confirm {
  
    background-color: #44ABE1;
    
}

/* Media Queries para diferentes pantallas */

/* Pantallas pequeñas (teléfonos) */
@media (max-width: 600px) {
    .vara {
        height: 8vh;
        width: 3vw;
        top: 2vh;
    }

    img {
        width: 95%;
        max-width: 800px;
    }

    #premio {
        font-size: 1.2rem;
    }
}

/* Pantallas medianas (tabletas) */
@media (min-width: 601px) and (max-width: 1024px) {
    .vara {
        height: 9vh;
        width: 2.5vw;
        top: 1.5vh;
    }

    img {
        width: 85%;
        max-width: 800px;
    }

    #premio {
        font-size: 1.4rem;
    }
}

/* Pantallas grandes (escritorios) */
@media (min-width: 1025px) {
    .vara {
        height: 70px;
        width: 15px;
        top: 10px;
    }

    img {
        width: 80%;
        max-width: 800px;
    }

    #premio {
        font-size: 1.8rem;
    }
}