/*
###
### NAVBAR
###
*/

body[data-bs-theme="light"] {
    background-color: #ffffff;
    color: #000000;
}

body[data-bs-theme="dark"] {
    background-color: #343a40;
    color: #ffffff;
}

.navbar[data-bs-theme="light"] {
    background-color: #c2c2c2;
    color: #000;
}

.navbar[data-bs-theme="dark"] {
    background-color: #000000;
    color: #fff;
}

.navbar-nav>.active>a {
    color: #296c2c;
}

/*
###
### TOTALS
###
*/

.my_totals {
    color: #ffffff;
    background-color: #296c2c;
}

/*
###
### DARK THEME TOGGLE
###
*/

.toggle-theme {
    opacity: 0;
    position: absolute;
    display: none !important;
}

.toggle-theme-label {
    background-color: #111;
    width: 50px;
    height: 26px;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fa-moon {
    color: #f1c40f;
}

.fa-sun {
    color: #f39c12;
}

.toggle-theme-label .ball {
    background-color: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: trasform 0.2s linear;
}

.toggle-theme:checked+.toggle-theme-label .ball {
    transform: translateX(24px);
}

#toggle-theme {
    display: none;
}

/*
###
### CONSOLE CODE
###
*/

.console_code {
    background-color: #4a4a4a;
    border-radius: 25px;
    padding-left: 20px;
    width: 30%;
}

/*
###
### CONSOLE CODE
###
*/

@font-face {
    font-family: 'KarioDuplexVar';
    src: URL('fonts/Kario39C3Var-Roman.ttf') format('truetype');
    src: URL('fonts/Kario39C3VarWEB-Roman.woff') format('woff');
    src: URL('fonts/Kario39C3VarWEB-Roman.woff2') format('woff2');
}

@keyframes font_weight_wave {
    from {
        font-weight: 10;
    }

    to {
        font-weight: 100;
    }
}

@keyframes font_weight_width_wave {
    from {
        font-weight: 10;
        font-stretch: 30%;
    }

    to {
        font-weight: 100;
        font-stretch: 120%;
    }
}

@keyframes font_width_wave {
    from {
        font-stretch: 30%;
    }

    to {
        font-stretch: 120%;
    }
}

.anim1_39c3 {
    font-family: KarioDuplexVar;
    font-weight: 10;
    font-kerning: none;
    font-size: 2rem;

    animation: font_weight_wave 3s ease-in-out 0s infinite alternate both;
}

.anim2_39c3 {
    font-family: KarioDuplexVar;
    font-weight: 10;
    font-kerning: none;
    font-size: 4rem;
    text-wrap: wrap;
    text-align: center;
}

.anim3_39c3 {
    font-family: KarioDuplexVar;
    font-weight: 10;
    font-kerning: none;
    font-size: 4rem;

    animation: font_weight_width_wave 6s ease-in-out 0s infinite alternate both;
}

.anim4_39c3 {
    font-family: KarioDuplexVar;
    font-weight: 10;
    font-kerning: none;
    font-size: 4rem;

    animation: font_width_wave 6s ease-in-out 0s infinite alternate both;
}

.anim5_39c3 {
    font-family: KarioDuplexVar;
    font-weight: 09;
    font-kerning: none;
    font-size: 2rem;

    animation: font_weight_wave 3s ease-in-out 0s infinite alternate both;
}