body {
    font-family: Arial, Helvetica, sans-serif;

    background:
        radial-gradient(
            ellipse at 10% 20%,
            #ffffff 0%,
            #d0d0d0 25%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 90% 30%,
            #8f8f8f 0%,
            #eeeeee 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 30% 85%,
            #ffffff 0%,
            #a0a0a0 30%,
            transparent 60%
        ),
        linear-gradient(
            120deg,
            #ffffff,
            #a0a0a0,
            #f5f5f5,
            #707070,
            #ffffff,
            #999999,
            #eeeeee,
            #555555,
            #ffffff
        );

    background-size:
        180% 180%,
        220% 220%,
        200% 200%,
        500% 500%;

    animation: backgroundWave 7s linear infinite;

    color: #222222;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    background-attachment: fixed;
}


/* =========================
   TÍTULOS
   ========================= */

h2,
h3 {
    text-align: center;
    margin: 5px 0;
    color: #111111;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}


/* =========================
   INFORMAÇÕES
   ========================= */

.count-info {
    text-align: center;
    font-weight: bold;
    color: #222222;
    margin-bottom: 10px;
}


/* =========================
   TABELA - TOTALMENTE BRANCA
   ========================= */

table {
    border-collapse: collapse;
    width: 90%;
    margin: 20px auto;

    /* SEMPRE BRANCO */
    background: #ffffff !important;

    border: 2px solid #000000;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.20),
        0 20px 45px rgba(0, 0, 0, 0.12);

    border-radius: 8px;
    overflow: hidden;
}


/* =========================
   CÉLULAS - SEMPRE BRANCAS
   ========================= */

th,
td {
    background: #ffffff !important;
    color: #000000 !important;

    border: 1px solid #000000;

    padding: 12px;
    text-align: center;
}


/* =========================
   CABEÇALHO - BRANCO
   ========================= */

th {
    background: #ffffff !important;
    color: #000000 !important;

    font-weight: bold;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* =========================
   LINHAS - TODAS BRANCAS
   ========================= */

tr,
tr:nth-child(even),
tr:nth-child(odd) {
    background: #ffffff !important;
}


/* =========================
   HOVER - CONTINUA BRANCO
   ========================= */

tr:hover,
tr:hover td {
    background: #ffffff !important;
    color: #000000 !important;

    box-shadow: none !important;
    transform: none !important;
}


/* =========================
   CONTAINER
   ========================= */

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #d0d0d0,
            #ffffff,
            #999999,
            #ffffff
        );

    background-size: 400% 400%;
    animation: containerWave 5s linear infinite;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.20);

    border: 1px solid #777777;
    border-radius: 10px;
}


/* =========================
   BOXES
   ========================= */

.box {
    width: 200px;
    height: 200px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #999999,
            #ffffff,
            #555555,
            #ffffff
        );

    background-size: 400% 400%;
    animation: boxWave 4s linear infinite;

    color: #000000;

    font-size: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 10px;
    border: 2px solid #000000;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.box:hover {
    transform: scale(1.05);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.30);
}


/* =========================
   BOX 2
   ========================= */

.box:nth-child(2) {
    background:
        linear-gradient(
            135deg,
            #666666,
            #ffffff,
            #bdbdbd,
            #ffffff,
            #777777
        );

    background-size: 450% 450%;
    animation: boxWave2 5s linear infinite;
}


/* =========================
   BOX 3
   ========================= */

.box:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #777777,
            #eeeeee,
            #444444,
            #ffffff
        );

    background-size: 450% 450%;
    animation: boxWave3 6s linear infinite;
}


/* =========================================================
   FUNDO PRINCIPAL
   ========================================================= */

@keyframes backgroundWave {

    0% {
        background-position:
            0% 0%,
            100% 100%,
            0% 100%,
            0% 50%;
    }

    10% {
        background-position:
            25% 70%,
            80% 20%,
            40% 60%,
            20% 80%;
    }

    20% {
        background-position:
            60% 100%,
            20% 80%,
            80% 20%,
            40% 20%;
    }

    30% {
        background-position:
            100% 60%,
            0% 20%,
            60% 0%,
            70% 80%;
    }

    40% {
        background-position:
            70% 0%,
            40% 100%,
            20% 70%,
            100% 30%;
    }

    50% {
        background-position:
            20% 40%,
            100% 50%,
            100% 100%,
            50% 100%;
    }

    60% {
        background-position:
            0% 100%,
            60% 0%,
            30% 20%,
            0% 30%;
    }

    70% {
        background-position:
            40% 20%,
            100% 100%,
            80% 80%,
            80% 0%;
    }

    80% {
        background-position:
            100% 80%,
            20% 40%,
            0% 0%,
            40% 70%;
    }

    90% {
        background-position:
            60% 100%,
            70% 20%,
            50% 100%,
            90% 40%;
    }

    100% {
        background-position:
            0% 0%,
            100% 100%,
            0% 100%,
            0% 50%;
    }
}


/* =========================================================
   CONTAINER
   ========================================================= */

@keyframes containerWave {

    0% {
        background-position: 0% 50%;
    }

    20% {
        background-position: 100% 0%;
    }

    40% {
        background-position: 100% 100%;
    }

    60% {
        background-position: 0% 100%;
    }

    80% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* =========================================================
   BOXES
   ========================================================= */

@keyframes boxWave {

    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 100% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    75% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 0% 50%;
    }
}


@keyframes boxWave2 {

    0% {
        background-position: 100% 0%;
    }

    20% {
        background-position: 0% 60%;
    }

    40% {
        background-position: 100% 100%;
    }

    60% {
        background-position: 20% 0%;
    }

    80% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 0%;
    }
}


@keyframes boxWave3 {

    0% {
        background-position: 0% 100%;
    }

    20% {
        background-position: 70% 0%;
    }

    40% {
        background-position: 100% 80%;
    }

    60% {
        background-position: 20% 20%;
    }

    80% {
        background-position: 80% 100%;
    }

    100% {
        background-position: 0% 100%;
    }
}