*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{min-height:100vh;display:grid;place-items:center}.simon{position:relative;width:min(90%,40rem);aspect-ratio:1/1;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);border-radius:50%;gap:1rem;box-shadow:0 0 .5rem .25rem #12121280;overflow:hidden}.simon:before{content:"";position:absolute;top:10rem;right:10rem;bottom:10rem;left:10rem;background-color:#000;border-radius:50%;z-index:1;pointer-events:none}.simon:after{content:"Simon";font-family:"Press Start 2P",system-ui,Avenir,Helvetica,Arial,sans-serif;position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:3rem;font-weight:700;text-transform:uppercase;z-index:1;pointer-events:none}.simon .btn{position:relative;transition:filter .2s ease-out;filter:brightness(.9)}.simon .btn:active{filter:brightness(1)}.simon .btn:before,.simon .btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:2rem;aspect-ratio:1;background-color:transparent}.simon .btn.red{background-color:red}.simon .btn.red:after{border-top-left-radius:50%;box-shadow:-.5rem -.5rem #121212}.simon .btn.red:before{margin-top:auto;margin-left:auto;border-bottom-right-radius:50%;box-shadow:.5rem .5rem #121212}.simon .btn.green{background-color:#0f0}.simon .btn.green:after{margin-top:auto;border-bottom-left-radius:50%;box-shadow:-.5rem .5rem #121212}.simon .btn.green:before{margin-left:auto;border-top-right-radius:50%;box-shadow:.5rem -.5rem #121212}.simon .btn.yellow{background-color:#ff0}.simon .btn.yellow:after{border-top-left-radius:50%;box-shadow:-.5rem -.5rem #121212}.simon .btn.yellow:before{margin-top:auto;margin-left:auto;border-bottom-right-radius:50%;box-shadow:.5rem .5rem #121212}.simon .btn.blue{background-color:#00f}.simon .btn.blue:after{margin-left:auto;border-top-right-radius:50%;box-shadow:.5rem -.5rem #121212}.simon .btn.blue:before{margin-top:auto;border-bottom-left-radius:50%;box-shadow:-.5rem .5rem #121212}
