.stats-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto auto auto auto;

    color: var(--theme-black);
    font-size: 24px;

    margin: 16px;
    gap: 8px;

    & .stats-row {
        display: grid;
        grid-template-columns: 128px 128px 128px 128px;
        grid-template-rows: auto;

        text-align: center;
        font-family: "BW";
        font-weight: 600;
      
        gap: 8px;

        & .stat-headers {
            width: 128px;

            border-radius: 8px;
            background: linear-gradient(0deg, var(--theme-gray-dark), var(--theme-gray-base));
            outline: solid 2px black;

            align-content: center;
            color: var(--theme-white);
        }
        
        & .stat-header-hp {
            width: 128px;

            background-color: #fa7c7c;
            border-radius: 16px;

            align-content: center;
        }

        & .stat-header-fp {
            width: 128px;

            background-color: #ffc457;
            border-radius: 16px;

            align-content: center;
        }


        & .stat-header-stamina {
            width: 128px;

            background-color: #fffd7d;
            border-radius: 16px;

            align-content: center;
        }


        & .stat-header-magic {
            width: 128px;

            background-color: #89fe7a;
            border-radius: 16px;

            align-content: center;
        }


        & .stat-header-attack {
            width: 128px;

            background-color: #8cf9ff;
            border-radius: 16px;

            align-content: center;
        }


        & .stat-header-defense {
            width: 128px;

            background-color: #8d85ff;
            border-radius: 16px;

            align-content: center;
        }


        & .stat-header-resistance {
            width: 128px;

            background-color: #cc80ff;
            border-radius: 16px;

            align-content: center;
        }        
        
        & .stat {
            width: 128px;

            border: solid 2px var(--theme-accent-2-base);
            background: black;
            border-radius: 8px; 
            letter-spacing: 2px;
            padding:0px;
            align-content: center;
            color: var(--theme-white);
        }

        & .growth {
            width: 128px;

            background: linear-gradient(0deg, var(--theme-gray-base), var(--theme-gray-light));
            border-radius: 8px;   
            border-style: solid;
            border-color: var(--block);

            align-content: center;
            text-align: center;
            letter-spacing: 4px;
        }
    }
    
    & h3 {
        background: linear-gradient(0deg, var(--theme-gray-dark), var(--theme-gray-base));
        border-radius: 8px; 
        border-style: solid;  
        border-color: var(--block);

        text-align: center;
        color: var(--theme-white);
        font-family: "BW";
        font-style: normal;
        font-size: 32px;

        margin: 8px 8px 8px 8px;
        padding: 8px 8px 8px 8px;

        &.warning {
            font-size: 22px;
            background: linear-gradient(0deg, var(--theme-alert-dark), var(--theme-alert-base));
        }
    }

    & table {
        background-color: var(--theme-white);
        border: var(--theme-primary-2-dark) solid 2px;
        border-width: 2px;

        row-gap: 8px;
        border-spacing: 0px 0px;

        & tr td {
            border-style: solid;
            border-color: var(--theme-primary-2-dark);
            border-width: 0px 0px 1px 0px;  
        }
        
        & thead {
            background-color: var(--theme-gray-light);
        }

        & tr:nth-child(even) {
            background-color: var(--theme-gray-light);
        }
    }
}