body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 120vh; 
    background-image: url('images/fondo1.jpg');
    background-position: 69% 1%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    text-align: center;
}

:root{
 --outher-shadow: 
 0 0 0.1vw 0.4vw #fffb00,
 0 0 0.4vw 0.6vw #000000,
 0 0 1vw 0.4vw #0001214,
}

.ul1{
    position:absolute;
    top: 773px;
    left: 60%;
    transform: translate(-50%, -50%);
    display:block;
    user-select: none;
}


#apuesta{
    position: relative;
    list-style: none;
    background: transparent;
    border-color: transparent;
    width: 470px;
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 0.5vw;
    color: #555;
    top: -5px;
    text-shadow: none;
    animation: anim 1s infinite linear;
    user-select: none; 
    left: 290px;
    transform: translate(-50%, -50%);
 }
 #premio{
    position: relative;
    list-style: none;
    background: transparent;
    border-color: transparent;
    width: 435px;
    top: -3px;
    font-weight: 500;
    font-size: 2.5rem;
    letter-spacing: 0.5vw;
    color: #555;
    text-shadow: none;
    animation: anim 1s infinite linear;
    user-select: none;
    left: 10px;
   
 }
 
@keyframes anim {
    0% {
        color: #555;
        text-shadow: none;
    }
    18% {
        color: #555;
        text-shadow: none;
    }
    20% {
        color: #ffea00;
        text-shadow: 0 0 1vw #ffc400,
        0 0 3vw #f44336;
    }
    30% {
        color: #555;
        text-shadow: none;
    }
    35% {
        color: #ffea00;
        text-shadow: 0 0 1vw #ffc400,
        0 0 3vw #f44336;
    }
    70% {
        color: #555;
        text-shadow: none;
    }
    85% {
        color: #ffea00;
        text-shadow: 0 0 1vw #ffc400,
        0 0 3vw #f44336;
    }
    90% {
        color: #555;
        text-shadow: none;
    }
    100% {
        color: #ffea00;
        text-shadow: 0 0 1vw #ffc400,
        0 0 3vw #f44336;
    }
}

.ul1 p:nth-child(1){
    animation-delay: .2s;
}
.ul1 p:nth-child(2){
    animation-delay: .4s;
}
.ul1 p:nth-child(3){
    animation-delay: .6s;
}
.ul1 p:nth-child(4){
    animation-delay: .8s;
}
.ul1 p:nth-child(6){
    animation-delay: 1s;
}
.ul1 p:nth-child(7){
    animation-delay: 1.2s;
}
.ul1 p:nth-child(8){
    animation-delay: 1.4s;
}
.ul1 p:nth-child(9){
    animation-delay: 1.6s;
}
.ul1 p:nth-child(10){
    animation-delay: 1.8s;
}

.slot{
    width: 95%;
    height: 400px;
    overflow: hidden;
    margin: auto;
    margin-top: 0px;
    background-color: transparent;
    border-radius: 8px;
    box-shadow: var(--outher-shadow);
}

#slot-screen{
    height: 500px;
    position: relative;
    overflow: hidden;
    top: 20px;
}

ul{
    list-style: none;
}

ul li{
    border: 2px solid black;
    border-radius: 5px;
    border-color: #10d6d6;
    width: 97%;
    margin: 1px 0;
    background-color: rgba(2, 3, 56, 0.301);
    backdrop-filter: blur(15px);
}


.clicks {
    color: rgb(246, 250, 39);
    top: 120px;
    user-select: none;
    text-shadow: none;
    overflow: hidden;
}

.reels{
    width: 31%;
    position: absolute;
    padding: 0px;
}

.reels:nth-child(1){
    left: 0;
}

.reels:nth-child(2){
    left: 34.5%;
}

.reels:nth-child(3){
    right: 0;
}

.reel img{
    display: block;
    margin: auto;
    height: 240px;
    max-width: 100%;
    pointer-events: none;
}
.stop{
    display:inline-flex;
    color: rgb(13, 226, 241);
    font-weight:bold;
    pointer-events: none;
    margin: 0px;
    z-index: 10;
}
.stop-btn{
    display:inline-flex;
    padding: 5px;
    margin: 40px;
    height: 70px;
    --glow-color: rgb(217,176,255);
  --glow-spread-color:rgb(191,123,255,0.781);
  --enhanced-glow-color:rgb(231,206,255);
  --btn-color:rgb(22, 1, 41);
    padding: 0.4em 1em;
    border: .20em solid var(--glow-color);
    color: var(--glow-color);
    background-color: transparent;
    outline: none;   
    border-radius: 1em;   
    box-shadow: 0 0 1em .21em var(--glow-color);    
    text-shadow: 0 0 1em var(--glow-color); 
    
    z-index: 15;
}

.stop-btn:hover{
    background-color: rgb(8, 216, 243);
    cursor: pointer;
    box-shadow: 0 0 29 31 #06d4db,
    0 0 19px 19px rgb(5, 245, 245),
    0 0 33px 17px rgb(108, 228, 236);
}

.stop-btn:active{
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}

#start-btn{
    display: inline-block;
    --glow-color: rgb(217,176,255);
  --glow-spread-color:rgb(191,123,255,0.781);
  --enhanced-glow-color:rgb(231,206,255);
  --btn-color:rgb(22, 1, 41);
    padding: 0.5em 1em;
    border: .20em solid var(--glow-color);
    color: var(--glow-color);
    font-size: 29px; 
    background-color: transparent;  
    outline: none;   
    border-radius: 1em;   
    box-shadow: 0 0 1em .21em var(--glow-color);    
    text-shadow: 0 0 1em var(--glow-color); 
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
    overflow: hidden;
}

#start-btn:hover{
    background-color: #10d6d6;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    border-bottom: none;
}

#start-btn:active{
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    border-bottom: none;
    overflow: hidden;
}

.balloon_container{
    position: relative;
    display: flex;
    align-items: center;
}

.balloon{
    
    display:inline-block;
    width: 79px;
    height: 89px;
    border-radius: 80%;
    position: relative;
    box-shadow: inset -10px -10px 0 rgba(0, 0, 0,0.07);
    transition: transform 0.5s ease;
    z-index: 10;
    transform-origin: bottom center;
    color: #fff;
    font-weight: bold;
    font-family: cursive;
}

.balloon1{
    animation: balloons1 forwards;
    font-size: 58px;
}


@keyframes balloons1{
0%{ transform: translateY(10vh) rotate3d(1,1,1,90deg);
    opacity: 1; }
10% { transform: translateY(-70vh) rotate3d(1,1,1,180deg);
    opacity: 1;}
100% {
        transform: translateY(-20vh) rotate3d(1,1,1,360deg);
        opacity: 1;    
}    
}

.balloon1:nth-child(1){background: rgba(255,100,100);
    animation-duration: 3.3s; left: 27px; }

.balloon1:nth-child(1):nth-child(1)::before{color: rgba(255,100,100);}

.balloon1:nth-child(2){background: rgb(194, 247, 3);
    animation-duration: 4.1s; left: 19px; }
    
.balloon1:nth-child(2):nth-child(2)::before{color: rgb(247, 247, 13);}

.balloon1:nth-child(3){background: rgb(240, 6, 6);
    animation-duration: 5.2s; left: 09px; }
    
.balloon1:nth-child(3):nth-child(3)::before{color: rgb(253, 10, 10);}

.balloon1:nth-child(4){background: rgba(0,255,255);
    animation-duration: 6.3s; left: -01px; }
    
.balloon1:nth-child(4):nth-child(4)::before{color: rgba(0,255,255);}

.balloon1:nth-child(5){background: rgba(0,0,255);
    animation-duration: 4.4s; left: -14px; }
    
.balloon1:nth-child(5):nth-child(5)::before{color: rgba(0,0,255);}

.balloon1:nth-child(6){background: rgb(247, 170, 4);
    animation-duration: 6.7s; left: -23px; }
    
.balloon1:nth-child(6):nth-child(6)::before{color: rgb(252, 174, 8);}

.balloon1:nth-child(7){background: rgb(19, 65, 1);
    animation-duration: 7.3s; left: -33px; }
    
.balloon1:nth-child(4):nth-child(4)::before{color: rgba(0,255,255);}

@media (max-width:560px) {
            .stop-btn{
            margin: 10px;
            position: relative;
            padding: 25px;
            height: 100px;
            margin-top: 30px;
        }
          
        .reel img{
            height: 240px;
            max-width: 100%;
        }
        ul li{
            width: 95%;
            margin: 1px 0;   
        }
        .slot{
            width: 99%;
            height: 300px;
            margin-top: 50px;
        }
        #start-btn{
        margin-top: 50px;
    }
}


@media (max-width:360px) {
    ul li{
        width: 91%;
        margin: 1px 0;   
    }
        .stop-btn{
            margin: 15px;
            padding: 5px;    
            height: 70px;
            margin-top: 20px;
        }
        .reel img{
            height: 230px;
            max-width: 100%;
        }
       
        #start-btn{
        margin-top: 20px;
        padding: 9px;
    }
    }