html,body{margin:0}body{height:100dvh;display:flex;justify-content:center;align-items:center;background:black;font-family:Poppins,sans-serif;color:#fff;font-size:3.5rem;line-height:1.2;font-weight:600}.clock{width:calc(min(300px,70vw) + 3.5rem);height:calc(min(300px,70vw) + 7.7rem);padding-top:4.55rem;position:relative;overflow:hidden}.clock__vertical-text{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center}.clock__vertical-text-item{filter:drop-shadow(0px 0px 11px rgba(164,170,182,.5))}.clock__wheel{width:calc(min(300px,70vw) + 3.5rem);height:calc(min(300px,70vw) + 3.5rem);position:relative;transition:rotate ease-in-out .2s;rotate:calc(var(--active-index) * 360deg / 16 * -1)}.clock__wheel-item{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transform:translateY(calc(min(300px,70vw)/-2));rotate:calc(var(--index) * 360deg / 16);transition:all ease-in-out .2s}.clock__wheel-item--active{filter:drop-shadow(0px 0px 11px rgba(164,170,182,.5))}.clock__wheel-item:not(.clock__wheel-item--active){opacity:.5}.sound-effects-button{position:absolute;bottom:32px;left:50%;translate:-50% 0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;padding:0 9px;background:rgba(255,255,255,.25);border-radius:24px;border:1px solid rgba(255,255,255,.18);transition:all ease-in-out .2s;opacity:.5;cursor:pointer;overflow:hidden;outline-color:#fff}.sound-effects-button:hover,.sound-effects-button:active{opacity:1;width:200px}.sound-effects-button:hover .sound-effects-button__text,.sound-effects-button:active .sound-effects-button__text{margin-left:8px;opacity:1}.sound-effects-button:active{background:rgba(255,255,255,.3)}.sound-effects-button__icon{color:#fff;width:28px;height:28px}.sound-effects-button__text{overflow:hidden;color:#fff;font-size:1rem;font-family:Poppins,sans-serif;font-weight:500;transition:all ease-in-out .2s;white-space:nowrap;opacity:0}