.theme{--bg-color:#111;--main-color:#fefefe;position:relative;display:flex;justify-content:center;align-items:center;width:30px;height:30px;background-color:var(--bg-color);border-radius:100%;border:1.5px solid var(--main-color);box-shadow:3px 3px var(--main-color);margin-right:.5rem;margin-left:.25rem}.input{cursor:pointer;width:100%;height:100%;z-index:10;opacity:0}.icon,.input{position:absolute}.icon{top:calc(50% - 9px);left:calc(50% - 9px);width:18px;height:18px}.icon.icon-moon{fill:var(--main-color)}.icon.icon-sun{stroke:var(--main-color);display:none}.input:checked~.icon.icon-sun{display:block}.input:checked~.icon.icon-moon{display:none}.theme:active{box-shadow:0 0 var(--main-color);transform:translate(2px,2px)}:root[class=light] .theme{--bg-color:#fefefe;--main-color:#111}