*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto',sans-serif;
}

.quiniela{
    margin: auto;
    background-image: url("../img/VARIOS1.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    max-width: 400px;
    border-radius: 20px;

}



.botonera{
    margin-top: 3%;
    width: 100%;
}

@media (max-width: 400px){
    .botonera {
        /*margin-top: 2vh;*/
    }
}

.aux{
    background-color: rgba(165, 42, 42, 0);
    width: 100%;
    height: 13.5%;
    padding-top: 2.5%;
}
.aux h3{
    width: 9%;
    padding-top: 5px;
    margin-left: 4px;
    background-color: rgba(255, 255, 255, 0.288);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.288);
}
.aux h3 ion-icon{
    display: table-row-group;
}


.quiniela span{
    width: 10.5%;
    display: inline-flex;
    -webkit-transition:background-color 0.3s ease;
   -moz-transition:background-color 0.3s ease;
   -o-transition:background-color 0.3s ease;
   transition:background-color 0.3s ease;  
}

#_{
    background-color: rgba(128, 255, 0, 0);
    width: 34.1%;
    height: 100%;
    display: inline-flex;
}


.partido{
    display: flex;
    height: 5.6%;
    width: 100%;
}

body{
    max-width: 400px;
    margin: auto;
    background-color: rgb(0, 0, 0);
    background-image: url("../img/fondohalloween.jpg");
    background-repeat: repeat-y;
    background-position: top;
}

  

h1{
    background-color: teal;
    text-align: center;
    padding: 10.6px;
    color: rgb(255, 255, 255);
    margin-top: 5%;
    border: solid 1px black;
    border-radius: 0 0 14px 14px;
    background: -webkit-linear-gradient(0.04turn, rgb(75, 75, 76)  ,rgb(8, 8, 8) 80%);
    background: linear-gradient(0.04turn, rgb(65, 65, 67)  ,rgb(5, 5, 5) 80%);
    font-size: x-large;
}

h2,h3{
    background:  linear-gradient(0,  rgb(0, 175, 0) 20%, #4ac959 90%);
    text-align: center;
    padding: 12px 20px 12px 0;
    margin-right: 6px;
    border-radius: 6px;
    box-shadow: 2px 2px 5px black;
    font-size: large;
}

#nombretext{
    color: gray;
    font-size: 9px;
    text-align: center;
    padding: 2px 0 0 2px;
}

#botonlisto{
    background: linear-gradient(0,  rgb(0, 134, 175) 20%, rgb(15, 163, 201)); 
    padding: 8px;
    border-radius: 15px;
    padding-top: 10px;
    font-size: x-large;
}

#botonborrar{
    background:  linear-gradient(0,  rgb(184, 0, 0) 20%, rgb(187, 1, 1) 90%);
    border-radius: 15px;
    padding-top: 10px;
    padding: 8px;
    font-size: x-large;
}

#nombrebox{
    border-collapse: collapse;
    background:  linear-gradient(0,  rgb(220, 220, 220) 20%, rgb(255, 255, 255) 90%);
    text-align: center;
    border-radius: 6px;
    box-shadow: 2px 2px 5px black;

}

#nombre{
    background:transparent;
    display: inline-block;
    width: 100%;
    border: none;
    text-align: center;
    padding-bottom: 13px;
    margin: 0 0 2px 2px;
}


#ultimonombre{
    margin-left: 11%;
    height: 17px;
    box-shadow: 1px 1px black;
}

#random{
    background:  linear-gradient(0,  rgb(250, 250, 200) 20%, rgb(255, 255, 255) 90%);
    border-radius: 4px;
    padding: 3px 25%;
    font-size: small;
    box-shadow: 1px 1px 3px black;
    font-weight: bold;
}

#checkcombinaciones{
    height: 25px;
    background: rgb(255,255,255,0.7);  
    border-radius: 4px;
    padding: 2px 5px;
    font-size: small;
    box-shadow: 1px 1px 3px black;
    text-align: center;
    border: solid 1px #777777;
    color: #777777; 
    -webkit-transition:background-color 0.3s ease;
    -moz-transition:background-color 0.3s ease;
    -o-transition:background-color 0.3s ease;
    transition:background-color 0.3s ease;
}

/*#undo{
    float: right;
    background:  linear-gradient(0,  rgb(250, 200, 200) 20%, rgb(255, 255, 255) 90%);
    border-radius: 4px;
    padding: 2px;
}*/


p{
    padding: 10px;
}

#display{
    border: solid black 2px;
    width: 100%;
    background-color: rgba(255, 255, 240, 0.4);
    border-radius: 5px;
    text-align: left;
    padding: 5px 0px;
    margin: 15px 0;
    table-layout: fixed;   
}

/*.cellname{
    font-size: small;
    overflow: scroll;
    border: none;
}*/




#display td{
    border-right: 1px solid rgb(0,0,0,0.2);
    text-align: center;
}


h4{
    float: left;
    display: contents;
    text-align: center;
}

h6{
    display: inline;
}

#total{
    display: inline-block;
    float: right;
    margin-top: 0;
    color: rgb(29, 30, 31);
    background-color: rgba(220, 221, 224, 0.507);
    padding: 0 2px;
    border-radius: 3px;
}

#costo{
    color: rgb(18, 18, 19);
    background-color: rgba(163, 163, 165, 0.842);
    display:inline;
    padding: 0 2px;
    border-radius: 3px;
}
#numquinielas{
    color: rgba(11, 15, 0, 0.753);
    background-color: rgba(213, 215, 216, 0.342);
    display:inline;
    padding: 0 2px;
    border-radius: 3px;
}
.reglas {
    
    background: #e2aa01;
    border-radius: 10px;
    border: 1px solid rgb(12, 12, 12);
    font-size: 11px;
    padding-left: 10px;
    box-shadow: 2px 2px 2px #f5f3f3;
}


#bolsa{
    color:white;
    text-align: center;
    font-weight: bolder;
    margin: auto;
    text-shadow: 1px 1px 5px black;
}

.aux2{
    height: 6%;
}

/* Canvas a pantalla completa */
#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* no bloquea clics */
    z-index: 9999;
}