: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(0deg);width:var(--toggleBtnRadius);height:var(--toggleBtnRadius);background:#fff;box-shadow:inset 3em 3em 0 5em #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,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{outline:2px solid var(--bgColor--day)}.moon,.night{background:var(--bgColor--night)}.moon{top:2.05em;left:2em;transform:rotate(-125deg);width:var(--toggleBtnRadius);height:var(--toggleBtnRadius);box-shadow:0 1.6em 0 0 var(--mooncolor) inset,rgba(255,255,255,.1) -5em 6em 0 -1.7em,rgba(255,255,255,.1) 2em -2.1em 0 -1.7em,rgba(255,255,255,.1) -1em 6em 0 -1.5em,rgba(255,255,255,.1) -2em 3em 0 -1.4em,rgba(255,255,255,.1) -5em 2.5em 0 -1.3em,rgba(255,255,255,.2) -3em 5em 0 -1.7em,rgba(255,255,255,.3) -3em 7.9em 0 -1.5em}