
.theme_button {
    cursor: pointer;
    background: #423966;
    border-radius: 10em;
    width: 30em;
    height: 16em;
    margin: 0 auto;
    font-size: 30%;
    transition: all .5s ease-in-out;
    position: relative;
    transform: scale(.45) translateX(55%);
    position: absolute;
    right: 30px;    
}

.theme_button .sun_moon {
    position: absolute;
    transition: all 500ms ease-in-out;
    border-radius: 50%;
    top: 3em;
    left: 3em;
    transform: rotate(-75deg);
    width: 10em;
    height: 10em;
    background: #423966;    
    box-shadow:
        3em 2.5em 0 0em #D9FBFF 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;
}

.theme_button.night .sun_moon {
    top: 23px;
    left: 18em;
    border-radius: 50%;
    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;
}
.theme_button.night {
    background: #FFBF71;
}   