/* -------------- BUTTON -------------- */
    .btn {
        background-color: #fff;
        width: 3em;
        height: 1.8em;
        border-radius: 10em;
        padding: 0 0.1em;
        box-shadow: inset 0 8px 60px rgba(0, 0, 0, .1),
            inset 0 8px 8px rgba(0, 0, 0, .1),
            inset 0 -4px 4px rgba(0, 0, 0, .1);
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .btn__indicator {
        background-color: #fff;
        width: 1.6em;
        height: 1.6em;
        border-radius: 50%;
        position: absolute;
        box-shadow: 0 8px 40px rgba(0, 0, 0, .2);
        transition: transform .3s ease;
    }

    .btn__icon-container {
        width: 100%;
        height: 100%;

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

    .btn__icon {
        color: var(--light-icon-color);
        font-size: 0.8em;
    }

    /* -------------- ANIMATION ------------ */
    .btn__icon.animated {
        animation: spin 0.5s;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* -------------- DARKMODE -------------- */
    body.darkmode {
        background-color: var(--dark-color);
        color: var(--light-color);
    }

    .darkmode p {
        text-shadow: 2px 2px 2px var(--dark-color);
    }

    .darkmode .btn {
        box-shadow: inset 0 8px 60px rgba(0, 0, 0, .3),
            inset 8px 0 8px rgba(0, 0, 0, .3),
            inset 0 -4px 4px rgba(0, 0, 0, .3);
    }

    .darkmode .btn__indicator {
        transform: translateX(1.43em);
        background-color: var(--dark-color);
        box-shadow: 0 8px 40px rgba(0, 0, 0, .3);
    }

    .darkmode .btn__icon {
        color: var(--dark-icon-color);
    }

    .darkmode .toparrow,
    .darkmode .backtoparrow1,
    .darkmode .backtoparrow2,
    .darkmode .downarrow2,
    .darkmode .downarrow3,
    .darkmode .downarrow4,
    .darkmode .downarrow5,
    .darkmode .downarrow6,
    .darkmode .leftarrow,
    .darkmode .rightarrow {
        filter: invert(0%);
    }

    .darkmode #github {
        filter: invert(0%);
    }

    .darkmode .socials_description a {
        padding: 10px;
        text-decoration: none;
        color: var(--light-text);
    }

    .darkmode .modal {
        background-color: var(--dark-color);
    }

    .darkmode,
    .darkmode .prev,
    .darkmode .next {
        color: var(--light-color);
    }

    .darkmode #slides_section>.prev,
    .darkmode #slides_section>.next {
        background-color: var(--dark-color);
    }

    @media screen and (max-width: 1050px) {

    .btn {
        width: 9em;
        height: 5.4em;
        border-radius: 30em;
        padding: 0 0.3em;
    }

    .btn__indicator {
        background-color: #fff;
        width: 4.8em;
        height: 4.8em;
    }

    .btn__icon-container {
        width: 100%;
        height: 100%;
    }

    .btn__icon {
        color: var(--light-icon-color);
        font-size: 3.2em;
    }

    .darkmode .btn__indicator {
        transform: translateX(4.29em);
    }
    }

    /* ------------ VARIABLES ------------ */
    :root {
        /* COLORS */
        --color: #9176FF;
        --dark-color: #000000;
        --dark-icon-color: #fff;
        --light-color: #f7f7f7;
        --light-icon-color: #FFDE59;
        --light-text: #ffffff;
    }