:root{--toggleHeight: 8em;--toggleWidth: 15em;--toggleBtnRadius: 4em;--bgColor--night: #423966;--toggleBtn-bgColor--night: var(--bgColor--night);--mooncolor: #d9fbff;--bgColor--day: #9ee3fb;--toggleBtn-bgColor--day: var(--bgColor--day)}.theme-button{transition:all .2s ease-in-out;background:#ffbf71;outline:2px solid #69410f;text-align:center;font-size:20%;position:relative;height:var(--toggleHeight);width:var(--toggleWidth);border-radius:var(--toggleHeight);transition:all .5s ease-in-out}.sun{position:absolute;display:block;border-radius:50%;transition:all .4s ease-in-out;top:1.75em;left:8.5em;transform:rotate(0);width:var(--toggleBtnRadius);height:var(--toggleBtnRadius);background:#fff;box-shadow:3em 3em 0 5em #fff inset,0 -3em 0 -1.6em #fff,2em -2em 0 -1.8em #fff,3em 0 0 -1.6em #fff,2em 2em 0 -1.8em #fff,0 3em 0 -1.6em #fff,-2em 2em 0 -1.8em #fff,-3em 0 0 -1.6em #fff,-2em -2em 0 -1.8em #fff}.night{background:var(--bgColor--night);outline:2px solid var(--bgColor--day)}.moon{top:2.05em;left:2em;transform:rotate(-125deg);width:var(--toggleBtnRadius);height:var(--toggleBtnRadius);background:var(--bgColor--night);box-shadow:0 1.6em 0 0 var(--mooncolor) inset,#ffffff1a -5em 6em 0 -1.7em,#ffffff1a 2em -2.1em 0 -1.7em,#ffffff1a -1em 6em 0 -1.5em,#ffffff1a -2em 3em 0 -1.4em,#ffffff1a -5em 2.5em 0 -1.3em,#fff3 -3em 5em 0 -1.7em,#ffffff4d -3em 7.9em 0 -1.5em}