#mode-toggle {
    --toggleHeight: 16em;
    --toggleWidth: 30em;
    --toggleBtnRadius: 10em;
    --bgColor--day: #FFBF71;
    --bgColor--night: #423966;
    --mooncolor: #D9FBFF;

    margin: 0 0 0 auto;
    /*change size of toggle with font-size*/
    font-size: 10%;
    position: relative;
    height: var(--toggleHeight);
    width: var(--toggleWidth);
    border-radius: var(--toggleHeight);
    cursor: pointer;
    transition: background 500ms ease-in-out;

    .mode-toggle-emoji {
        position: absolute;
        display: block;
        border-radius: 50%;
        transition: all 400ms ease-in-out;
    }
}

body[data-theme="light"] #mode-toggle {
    background: var(--bgColor--day);

    .mode-toggle-emoji {
        top: 4.5em;
        left: 18em;
        transform: rotate(0deg);
        width: 7em;
        height: 7em;
        background: #fff;
        box-shadow: 3em 3em 0 5em #fff inset,
            0 -5em 0 -2.7em #fff,
            3.5em -3.5em 0 -3em #fff,
            5em 0 0 -2.7em #fff,
            3.5em 3.5em 0 -3em #fff,
            0 5em 0 -2.7em #fff,
            -3.5em 3.5em 0 -3em #fff,
            -5em 0 0 -2.7em #fff,
            -3.5em -3.5em 0 -3em #fff;
    }
}

body[data-theme="dark"] #mode-toggle {
    background: var(--bgColor--night);

    .mode-toggle-emoji {
        top: 3em;
        left: 3em;
        transform: rotate(-75deg);
        width: var(--toggleBtnRadius);
        height: var(--toggleBtnRadius);
        background: var(--bgColor--night);
        box-shadow:
            3em 2.5em 0 0em var(--mooncolor) inset,
            rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
            rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
            rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
            rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
            rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
            rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
            rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
            rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
    }
}