:root {
    --bg-clr: #382f60;
    --card-bg-clr: #8274A6;
    --card-clr-left: #57417F;
    --card-clr-right: #645AA8;
    --bg-clr-button: #8274A6;
    --text-clr-light: #d3cedf;
    --text-clr: #fff;
}

.container_stats {
    color: var(--text-clr);
    /*    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
    font-family: "Brown", Arial, sans-serif;
    /*    font-weight: 400;*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*    margin: 7em 0;*/
    height: 100dvh;

    .card {
        background: linear-gradient(to right, var(--card-clr-left), var(--card-clr-right)), ;
        margin: 1em 1em;
        padding: 8em 8em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        gap: 5vw;
        /*        max-width: 75dvw;*/
        width: 70dvw;
        height: 40dvh;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-color: rgba(0, 0, 0, 1.0) !important;
        border-radius: 2rem;
    }

    .type {
        width: 30vw;
    }

    .type h1 {
        letter-spacing: 0.1rem;
        font-weight: 500;
        /*        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
        color: #ffffff;
        background-color: rgba(50, 75, 85, 0.7);
        padding: 1vw;
        border-radius: 0.5vw;
    }

    .type p {
        /*        width: 45vh;*/
        margin: 1em auto 2em;
    }

    .type a {
        outline: none;
        border: none;
        /*background: var(--blue-color-logo);
        color: var(--yellow-color-logo);*/
        background: var(--yellow-color-logo);
        color: var(--blue-color-logo);
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 0.2ch;
        padding: 1em 2em;
        border-radius: 2px;
        transition: all 150ms;
        text-decoration: none;
    }

    .type a:hover {
        transform: translateY(-10%);
        /*background: var(--yellow-color-logo);
        color: var(--blue-color-logo);*/
        background: var(--blue-color-logo);
        color: var(--yellow-color-logo);
    }

    /*    .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        position: relative;
    }*/

    .stats_number_span {
        font-weight: 600;
        font-size: 5rem;
        text-align: center;
        width: 100%;
        /*        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
        color: #ffffff;

        & span {
            font-size: 2rem;
        }
    }

    .stats_number {
        margin: 1vw 1.35vw;
        background-color: rgba(50, 75, 85, 0.7);
        padding: 1vw;
        border-radius: 3vw;
    }

    .stats p {
        font-size: 1.5rem;
        font-weight: 700;
        /*        margin-left: 3em;*/
        text-transform: capitalize;
        color: #FFF8E8;
        text-align: center;
        /*        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
        color: #ffffff;
    }

    .card::before {
        content: '';
        position: absolute;
        z-index: -10;
        width: 90%;
        height: 110%;
        left: 5%;
        right: 0;
        top: -5%;
        bottom: 0;
        background: var(--blue-color-logo);
    }
}


.stats {
    border-collapse: collapse;
}

.stats td {
    border: 3px solid #443874;
}

.stats tr:first-child td {
    border-top: 0;
}

.stats tr td:first-child {
    border-left: 0;
}

.stats tr:last-child td {
    border-bottom: 0;
}

.stats tr td:last-child {
    border-right: 0;
}

@media(max-width: 1000px) {
    .container_stats {
        height: 70vh;
        margin: 10vh 0;

        & .card {
            margin: 1vw 1vh;
            padding: 1vw 1vh;
            flex-direction: column;
            width: 90dvw;
            gap: 10vh;
        }

        & .type {
            padding-top: 15vh;
            width: 80vw;
        }
    }
}

@media(max-width: 600px) {
    .container_stats {
        margin: 7.5vh 0 15vh 0;
        height: 100%;

        & .card {
            height: 88vh;
        }
    }
}