.bodyG{
    justify-content: center;
    align-items: center;
    background: #E1E6F9;
}
.correcto{
    justify-content: center;
    align-items: center;
    vertical-align: bottom;
}
.players{
    
    display:inline;
    align-content: space-between;
}
.contadorG{
    --color: #fff;
    --color-hover: var(--color);
    --background: gray;
    --background-hover: var(--background);
    --hover-back: #6D58FF;
    --hover-front: #5C86FF;
    vertical-align:  center;
    padding: 10px 28px;
    border-radius: 30px;
    line-height: 54px;
    font-size: 64px;
    font-weight: 600;
    letter-spacing: .02em;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    color: var(--c, var(--color));
    background: var(--b, var(--background));
    transition: color .2s linear var(--c-d, .2s), background .3s linear var(--b-d, .2s);
    &:not(.simple) {
        &:before,
        &:after {
            content: '';
            position: absolute;
            background: var(--pb, var(--hover-back));
            top: 0;
            left: 0;
            right: 0;
            height: 200%;
            border-radius: var(--br, 40%);
            transform: translateY(var(--y, 50%));
            transition: transform var(--d, .4s) ease-in var(--d-d, 0s), border-radius .5s ease var(--br-d, .08s);

        }
        &:after {
            --pb: var(--hover-front);
            --d: .44s;
        }
    }
    
    div {
        z-index: 1;
        position: relative;
        display: flex;
        span {
            display: block;
            backface-visibility: hidden;
            transform: translateZ(0);
            animation: var(--name, none) .7s linear forwards .18s;
        }
}
}

.buttonG {
    --color: #fff;
    --color-hover: var(--color);
    --background: #2B3044;
    --background-hover: var(--background);
    --hover-back: #6D58FF;
    --hover-front: #5C86FF;
    vertical-align:  center;
    padding: 14px 28px;
    border-radius: 30px;
    line-height: 24px;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: .02em;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    color: var(--c, var(--color));
    background: var(--b, var(--background));
    transition: color .2s linear var(--c-d, .2s), background .3s linear var(--b-d, .2s);
    &:not(.simple) {
        &:before,
        &:after {
            content: '';
            position: absolute;
            background: var(--pb, var(--hover-back));
            top: 0;
            left: 0;
            right: 0;
            height: 200%;
            border-radius: var(--br, 40%);
            transform: translateY(var(--y, 50%));
            transition: transform var(--d, .4s) ease-in var(--d-d, 0s), border-radius .5s ease var(--br-d, .08s);

        }
        &:after {
            --pb: var(--hover-front);
            --d: .44s;
        }
    }
    
    div {
        z-index: 1;
        position: relative;
        display: flex;
        span {
            display: block;
            backface-visibility: hidden;
            transform: translateZ(0);
            animation: var(--name, none) .7s linear forwards .18s;
        }
}
}

.titulo h1 {
    --color: #fff;
    --color-hover: var(--color);
    --background: #1e90ff;
    --background-hover: var(--background);
    --hover-back: #6D58FF;
    --hover-front: #5C86FF;
    vertical-align:  center;
    padding: 14px 28px;
   /* border-radius: 30px;*/
    line-height: 24px;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    letter-spacing: .02em;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    color: var(--c, var(--color));
    background: var(--b, var(--background));
    transition: color .2s linear var(--c-d, .2s), background .3s linear var(--b-d, .2s);
    
    
    div {
        z-index: 1;
        position: relative;
        display: flex;
        span {
            display: block;
            backface-visibility: hidden;
            transform: translateZ(0);
            animation: var(--name, none) .7s linear forwards .18s;
        }
}
}

.puntos{
    font-size: 70px;
    font-weight:bold;
    text-align: center;
}

.puntoLateral{
    font-size: 40px;
    font-weight:bold;
    text-align: center;
    padding: 5px 5px;
    align-items: center;
}

.lat{
    position: relative;
    top: 50%;
}


.strikes{
    font-size: 60px;
    font-weight:bold;
    text-align: center;
}

.circuloD {
border-radius: 0px 25px 50px 15px; /* Hace el div redondo */
}
.circulo {
border-radius: 25px 0 15px 50px; /* Hace el div redondo */
}

.si1, .si2, .si3, .si4, .si5{
    font-size: 23px;
}