body {
    background: linear-gradient(135deg, #0d3b66, #0a0a0a);
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
}

/* TOPO */
.topo {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-bottom: 2px solid #f4d35e;
}

.logo {
    max-height: 60px;
}

.autoTitle {
    color: #0a0a0a
}

.numero {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* NÚMEROS */
.numero,
.numero-admin {
    font-size: 20pt;
    padding: 12px;
    border-radius: 10px;
    transition: 2s all ease;
}
@media (max-width: 9000px) {
    .numero {
        font-size: calc(240pt + 50%);
    }
}
@media (max-width: 8000px) {
    .numero {
        font-size: 240pt;
    }
}
@media (max-width: 7000px) {
    .numero {
        font-size: 110pt;
    }
}
@media (max-width: 6000px) {
    .numero {
        font-size: 170pt;
    }
}
@media (max-width: 5000px) {
    .numero {
        font-size: 130pt;
    }
}
@media (max-width: 4000px) {
    .numero {
        font-size: 107pt;
    }
}
@media (max-width: 3000px) {
    .numero {
        font-size: 75pt;
    }
}
@media (max-width: 2600px) {
    .numero {
        font-size: 62pt;
    }
}
@media (max-width: 2500px) {
    .numero {
        font-size: 55pt;
    }
}

@media (max-width: 2000px) {
    .numero {
        font-size: 41.5pt;
    }
}

@media (max-width: 1400px) and (max-height: 800px) {
    .numero {
        font-size: 20pt;
    }
}


/* ÚLTIMO */
.ultimo {
    font-size: 90px;
    color: #f4d35e;
}


#overlayNumero.show {
    opacity: 1;
    transform: scale(1);
}

/* ANIMAÇÃO */
.animar-admin {
    animation: aparecer-admin 1s ease;
    animation-iteration-count: 3;
}

.animar-numeroGrande {
    animation: animar-numeroGrande 1s ease;
}

.animar {
    animation: aparecer-normal 1s ease;
    animation-iteration-count: 3;
}


@keyframes aparecer-admin {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }


    60% {
        transform: scale(.9);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes aparecer-normal {
    0% {
        transform: scale(0.0);
        opacity: 0;
    }

    20% {
        transform: scale(0.2);
        opacity: 0.5;
    }

    60% {
        transform: scale(.9);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes animar-numeroGrande {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

/* OVERLAY (fica sobre a tabela) */
#overlayNumero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 500pt;
    color: #f4d35e;
    font-weight: bold;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    transition: 0.4s;
}

#overlayNumero.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;

    animation: animar-numeroGrande 0.5s ease, piscar 1s infinite;
}

.numero:hover {
    transform: scale(1.1);
    transition: 0.2s;
}

@keyframes zoom {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}