*{margin:0;padding:0;box-sizing:border-box;transition:.5s}.theme-container{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;border-radius:99px}.theme-container label{width:80px;height:40px;border-radius:999px;background:#f3f3f3;box-shadow:inset 10px 10px 30px rgba(0,0,0,.05);cursor:pointer;position:relative}.circle{width:32px;height:32px;border-radius:99px;background:#fff;box-shadow:10px 10px 20px rgba(0,0,0,.05),inset -10px -10px 30px rgba(0,0,0,.05);position:absolute;top:50%;left:0;transform:translate(10%,-50%);display:flex;align-items:center;justify-content:center;overflow:hidden}.theme-container .sun{width:16px;color:#ffd600;margin-top:0;opacity:1;position:absolute}.theme-container .moon{width:16px;margin-top:-150%;color:#fff;opacity:0;position:absolute}input[type=checkbox]:checked+.theme-container{background:#2c2c2f}input[type=checkbox]:checked+.theme-container label{background:#1f1f21;box-shadow:inset 10px 10px 30px rgba(0,0,0,.5)}input[type=checkbox]:checked+.theme-container label .circle{left:100%;transform:translate(-110%,-50%);background:#2c2c2f;box-shadow:10px 10px 20px rgba(0,0,0,.5),inset -10px -10px 30px rgba(0,0,0,.5)}input[type=checkbox]:checked+.theme-container label .circle .sun{margin-top:150%;opacity:0}input[type=checkbox]:checked+.theme-container label .circle .moon{margin-top:0;opacity:1}input[type=checkbox]:checked+.theme-container label .circle-without-effect .sun{opacity:0}input[type=checkbox]:checked+.theme-container label .circle-without-effect .moon{opacity:1}label:active .circle{width:40px}