:root {
    --title-container-background-color-1: rgb(76, 185, 218);
    --title-container-background-color-2: rgb(39, 134, 163);
    --title-container-background-color-3: rgb(28, 65, 135);

    --lite-container-background-color: rgb(0, 35, 73);
    --lite-container-background-color-1: rgb(0, 35, 73);
    --lite-container-background-color-2: rgb(7, 55, 105);
    --lite-container-background-opacity: 1;
    --stats-container-background-color: rgb(2, 24, 48);
    --stats-container-border-color: rgba(59, 155, 255, 0);
    --stats-container-hover-background-color-1: rgb(18, 63, 112);
    --stats-container-hover-background-color-2: rgb(9, 44, 82);
    --stats-container-hover-background-color-3: rgb(18, 63, 112);
    --stats-container-subtext-color: rgb(128, 128, 128);
    --stats-container-subtext-hover-color: rgb(49, 126, 209);

    --stats-container-icon-color: rgb(59, 155, 255);

    --container-divider-color: rgba(59, 155, 255, 0.1);

    --pulse-text-color-1: rgb(38, 130, 228);
    --pulse-text-color-2: rgb(124, 184, 248);
    --pulse-text-color-3: rgb(38, 130, 228);

    --pulse-animation-duration: 7s;

    --container-box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
    --text-color: rgb(255, 255, 255);
    --text-secondary-color: rgb(18, 63, 112);
    --text-third-color: rgb(41, 102, 167);
    --text-hover-color: rgb(59, 155, 255);
    --text-secondary-hover-color: rgb(32, 90, 151);
    --text-third-hover-color: rgb(61, 129, 202);
    --subtext-color: rgb(128, 128, 128);
    --linktext-color: rgb(53, 142, 238);
    --linktext-hover-color: rgb(88, 164, 247);

    --button-background-color: rgb(30, 37, 54);
    --button-background-color-1: rgb(38, 119, 206);
    --button-background-color-2: rgb(53, 142, 238);
    --button-background-color-3: rgb(38, 119, 206);
    --button-border-color: rgb(88, 88, 88);
    --button-hover-background-color: rgb(39, 48, 70);
    --button-hover-border-color: rgb(204, 204, 204);
}

:root[data-theme="light"] {
    /*--title-container-background-color-1: rgb(109, 213, 231);
    --title-container-background-color-2: rgb(104, 176, 218);
    --title-container-background-color-3: rgb(95, 151, 216);

    --lite-container-background-color: rgb(199, 239, 255);
    --lite-container-background-opacity: 0;
    --stats-container-background-color: rgb(255, 255, 255);
    --stats-container-border-color: rgb(158, 158, 158);
    --stats-container-hover-background-color-1: rgb(191, 240, 255);
    --stats-container-hover-background-color-2: rgb(220, 247, 255);
    --stats-container-hover-background-color-3: rgb(191, 240, 255);
    --stats-container-subtext-hover-color: rgb(38, 119, 206);

    --stats-container-icon-color: rgb(96, 157, 214);

    --container-divider-color: rgba(16, 47, 83, 0.1);
    
    --text-color: rgb(15, 23, 42);
    --linktext-color: rgb(170, 170, 170);*/
}

.title-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 500px;
    background-image: linear-gradient(
        to bottom right,
        var(--title-container-background-color-1),
        var(--title-container-background-color-2),
        var(--title-container-background-color-3)
    );
    align-items: center;
    justify-content: center;
}

.title-text-container {
    color: white;
    font-size: 2rem;
    text-align: center;
    justify-content: center;
}

.big-title-text {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.7);
    transition-duration: 0.3s;
}

.big-title-text:hover {
    color: rgb(124, 185, 250);
}

.little-title-text {
    font-family: "Varela Round", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}

@keyframes pulse {
    40% { background-position: 40% center; }
    100% { background-position: 200% center; }
}

.title-button-container {
    position: relative;
    display: flex;
    top: 9%;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.title-button {
    background-color: var(--button-background-color);
    border: 1.6px solid var(--button-border-color);
    text-align: center;
    border-radius: 0.8rem;
    transition-duration: 0.3s;
}

.title-color-button {
    background-image: linear-gradient(
        to bottom right,
        var(--button-background-color-1),
        var(--button-background-color-2),
        var(--button-background-color-3)
    );
    text-align: center;
    border-radius: 0.8rem;
    transition-duration: 0.3s;
}

.title-button a, .title-color-button a {
    text-decoration: none;
    font-size: 1.1rem;
    padding: 0.45rem 0.7rem 0.45rem 0.7rem;
    display: block;
    font-family: "Acme", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.title-button a {
    color: rgba(255, 255, 255, 0.7);
}

.title-color-button a {
    color: rgba(255, 255, 255, 0.9);
}

.title-button:hover {
    background-color: var(--button-hover-background-color);
    border: 1.7px solid var(--button-hover-border-color);
    /* transform: scale(1.04); */
}

.title-color-button:hover {
    transform: scale(1.06);
}

.big-text {
    font-family: "Berkshire Swash", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4rem;
}

.little-text {
    font-family: "Varela Round", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    color: rgb(255 255 255 / 0.7);
    margin-top: 20px;
}

.pulse-text {
    color: transparent;
    background-image: linear-gradient(
        to right,
        var(--pulse-text-color-1), 
        var(--pulse-text-color-2),
        var(--pulse-text-color-3)
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    animation: pulse var(--pulse-animation-duration) linear infinite;
}

.container-textbox {
    transition-duration: 0.3s;
    min-width: 0;
    max-width: 85%;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-top: 30px;
    padding-bottom: 20px;
}

.container-textbox-title {
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 1000;
    font-size: 2.4rem;
    color: var(--text-color);
    transition-duration: 0.3s;
}

.container-textbox-subtext {
    font-family: "Varela Round", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--subtext-color);
    transition-duration: 0.3s;
}

.container-textbox-link {
    font-family: "Varela Round", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    color: var(--linktext-color);
    transition-duration: 0.3s;
}

.container-textbox-link:hover {
    color: var(--linktext-hover-color);
}

.lite-container {
    position: relative;
    background-color: var(--lite-container-background-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 100px;
    transition-duration: 0.3s;
    z-index: 1;
}

.lite-container::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(
        to bottom right,
        var(--lite-container-background-color-1),
        var(--lite-container-background-color-2)
    );
    opacity: var(--lite-container-background-opacity);
    transition: opacity 0.3s ease;
    z-index: 0;
}

.stats-inner {
    position: relative;
    z-index: 1;
    width: 95%;
    display: flex;
    flex-wrap: nowrap;
}

.stats-inner-meta {
    position: relative;
    width: 95%;
    margin: 0 auto;
    padding: 32px 20px;
    display: flex;
    gap: 32px;
    flex-wrap: nowrap;
}

.stats-container {
    background-color: var(--stats-container-background-color);
    border: 1px solid var(--stats-container-border-color);
    border-radius: 1rem;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition-duration: 0.3s;
}

.stats-container::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(
        to bottom right,
        var(--stats-container-hover-background-color-1),
        var(--stats-container-hover-background-color-2),
        var(--stats-container-hover-background-color-3)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.stats-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    /* background-color: var(--stats-container-icon-background-color); */
    color: var(--stats-container-icon-color);
    /* border-radius: 20px; */
    width: 54px;
    height: 54px;
    padding: 0.25rem;
    margin-bottom: 5px;
    transition-duration: 0.3s;
}

.stats-icon svg {
    width: 100%;
    height: auto;
}

.stats-title {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 1000;
    font-size: 2.4rem;
    transition-duration: 0.3s;
}

.stats-subtext {
    font-family: "Varela Round", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--stats-container-subtext-color);
    transition-duration: 0.3s;
}

.stats-container > * {
    position: relative;
    z-index: 1;
}

.stats-container:hover {
    transform: scale(1.04);
}

.stats-container:hover .stats-icon {
    transform: scale(1.2);
}

.stats-container:hover .stats-title {
    transform: scale(1.08);
}

.stats-container:hover .stats-subtext {
    color: var(--stats-container-subtext-hover-color);
}

.stats-container:hover::after {
    opacity: 1;
}

.container-divider {
    height: 3px;
    width: 90%;
    border-radius: 100px;
    background-color: var(--container-divider-color);
    margin: 20px 20px;
    z-index: 1;
}

@media (max-width: 1350px) {
    .stats-inner {
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 20px 0;
    }
}

@media (max-width: 1000px) {
    .title-container {
        height: 600px;
    }
    
    .title-text-container {
        max-width: 80%;
    }

    .title-button-container {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-inner-meta {
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 20px 0;
    }

    .stats-container {
        flex: auto;
        width: 90%;
    }
}