@charset "UTF-8";*{box-sizing:border-box;margin:0;padding:0}.off-light-switcher{--hue:35;--border-color:rgb(128,128,128);--lightness:65%;--saturation:25%;--color-active:hsl(var(--hue),100%,20%);--main-switch-color:hsl(var(--hue),var(--saturation),var(--lightness));--secondary-switch-color:hsl( var(--hue),var(--saturation),calc(var(--lightness) + 20%) );min-height:700px;width:100%;max-width:1200px;margin:1.5rem auto;position:relative;display:flex;flex-direction:column;justify-content:end;isolation:isolate;padding:1.5rem;font-family:inherit;background-image:url(https://hornernetworks.com/images/entertaining.jpg);background-size:cover;background-position:center}.switcher-bg-image{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:0;transition:opacity 500ms ease-in-out}.switcher-bg-image.active{opacity:1}.switcher-keypad{width:200px;height:300px;background-image:linear-gradient( 45deg,var(--main-switch-color),var(--secondary-switch-color) 100% );background-position:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.1rem;border-radius:10px;background-repeat:no-repeat;box-shadow:0 1px 1px rgba(0,0,0,0.12),0 2px 2px rgba(0,0,0,0.12),0 4px 4px rgba(0,0,0,0.12),0 8px 8px rgba(0,0,0,0.12),0 16px 16px rgba(0,0,0,0.12)}.switcher-keypad-buttons-container{box-shadow:1px 1px 5px hsl(0,0%,0%,0.4),-1px -1px 5px hsl(0,0%,100%,0.3);border-radius:5px}.switcher-keypad-button{width:95px;height:50px;padding:0.5rem;font-size:0.5rem;transition:250ms ease;text-transform:uppercase;letter-spacing:1.2px;font-weight:bold;border:1px solid var(--border-color);color:var(--border-color)}@media (max-width:600px){.switcher-keypad{width:160px;height:250px}.switcher-keypad-button{width:90px;height:45px}}.switcher-keypad-button:nth-child(1){border-radius:5px 5px 0 0}.switcher-keypad-button:last-child{border-radius:0 0 5px 5px}.switcher-keypad-button:hover,.switcher-keypad-button.active{color:var(--color-active);cursor:pointer;text-shadow:0 0 7px var(--color-active),0 0 42px var(--secondary-switch-color),0 0 82px var(--secondary-switch-color),0 0 92px var(--secondary-switch-color),0 0 102px var(--secondary-switch-color),0 0 151px var(--secondary-switch-color)}.switcher-keypad-button.active{box-shadow:inset 3px 3px 7px hsl(0,0%,0%,0.3),inset -2px -2px 7px hsla(0,0%,100%,0.4)}