* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg1: hsl(var(--hue),10%,90%); --bg2: hsl(var(--hue),10%,60%); --fg: hsl(var(--hue),10%,10%); --trans-dur: 0.3s; font-size: calc(20px + (40 - 20) * (100vw - 320px) / (2560 - 320)); } body, input { font: 1em/1.5 sans-serif; } body { background-image: linear-gradient(135deg,var(--bg1),var(--bg2)); background-position: center; color: var(--fg); display: flex; height: 1vh; } .menu { display:grid; grid-template-columns:1fr 1fr 1fr; } .am, .am__crack, .am__input { border-radius: 50%; } .am, .am__input { -webkit-tap-highlight-color: transparent; } .am { background-image: linear-gradient(-45deg,var(--bg1),var(--bg2)); position: relative; width: 5em; height: 5em; } .am__crack { background-color: hsl(0,0%,0%); box-shadow: 0 0 0.5em hsla(var(--hue),90%,70%,0); display: block; position: absolute; top: 0.25em; left: 0.25em; width: 4.5em; height: 4.5em; transition: background-color 0.15s linear, box-shadow 0.15s linear, opacity var(--trans-dur) ease-in-out; } .am__input { background-image: linear-gradient(-45deg,hsl(var(--hue),90%,40%) 10%,hsl(var(--hue),90%,50%),hsl(var(--hue),90%,60%) 90%); box-shadow: 0.1em 0.1em 0.1em hsla(var(--hue),90%,90%,0.5) inset, -0.1em -0.1em 0.1em hsla(var(--hue),90%,10%,0.5) inset; display: block; filter: grayscale(0.9); position: absolute; top: 0.375em; left: 0.375em; width: 4.25em; height: 4.25em; transition: filter var(--trans-dur) ease-in-out, transform var(--trans-dur) ease-in-out; -webkit-appearance: none; appearance: none; z-index: 1; } @supports selector(:focus-visible) { .am__input:focus ~ .am__crack { background-color: hsl(0,0%,0%); box-shadow: 0 0 0.5em hsla(var(--hue),90%,70%,0); } .am__input:focus-visible ~ .am__crack { background-color: hsl(var(--hue),90%,70%); box-shadow: 0 0 0.5em hsla(var(--hue),90%,70%,1); } } /* `:checked` */ .am__input:checked { filter: grayscale(0); transform: scale(0.96); } .am__input:checked ~ .am__crack { opacity: 0.8; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg1: hsl(var(--hue),10%,40%); --bg2: hsl(var(--hue),10%,10%); --fg: hsl(var(--hue),10%,90%); }