#cult::before,button::after{content:'';position:absolute}#cult::before,button,button::after,canvas{position:absolute}#cult{background-color:#3f3c45}#cult::before{left:6px;bottom:10px;width:70px;height:70px;background:radial-gradient(circle,#000 0,#000 30%,transparent 30%);background-repeat:repeat;background-size:10px 10px}canvas{top:6px;left:6px;border-radius:10px}button{--color:hsla(0, 95%, 60%, 1);--color-light:hsla(0, 95%, 70%, 1);--color-lighter:hsla(0, 95%, 80%, 0.8);--color-lightest:hsla(0, 95%, 80%, 0.3);--color-darkish:hsla(0, 95%, 55%, 1);--color-dark:hsla(0, 95%, 50%, 1);--color-darker:hsla(0, 95%, 40%, 1);--color-darkest:hsla(0, 95%, 25%, 1);--color-black:hsla(0, 95%, 20%, 1);--size:67px;bottom:10px;display:inline-flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);border:0;outline:0;cursor:pointer;border-radius:100px;transition:box-shadow .2s;background-color:var(--color);box-shadow:inset 0 calc(var(--size)/ 24) 0 var(--color-light),inset 0 calc(-1 * var(--size)/ 24) 0 var(--color-dark),inset 0 0 0 calc(var(--size)/ 24) var(--color-dark),inset 0 0 0 calc(var(--size)/ 10) var(--color),inset 0 0 0 calc(var(--size)/ 8) var(--color-darker),inset 0 0 0 calc(var(--size)/ 7) var(--color-black),inset 0 0 0 calc(var(--size)/ 6) var(--color-lightest),inset 0 0 0 calc(var(--size)/ 4) var(--color),inset 0 calc(var(--size)/ 2) calc(var(--size)/ 6) var(--color-darkish),inset 0 0 calc(var(--size)/ 8) calc(var(--size)/ 4.5) var(--color-dark),0 calc(var(--size)/ 16) 0 rgba(0,0,0,.3)}button::after{bottom:calc(var(--size)/ 18);left:calc(var(--size)/ 9);display:block;width:calc(var(--size)/ 1.3);height:calc(var(--size)/ 1.3);border:calc(var(--size)/ 15) solid rgba(0,0,0,.3);border-width:0 0 calc(var(--size)/ 12);border-radius:100px;transition-duration:.2s}button:active{box-shadow:inset 0 calc(var(--size)/ 24) 0 var(--color-light),inset 0 calc(-1 * var(--size)/ 24) 0 var(--color-dark),inset 0 0 0 calc(var(--size)/ 24) var(--color-dark),inset 0 0 0 calc(var(--size)/ 10) var(--color),inset 0 0 0 calc(var(--size)/ 8) var(--color-darker),inset 0 0 0 calc(var(--size)/ 6.2) var(--color-darkest),inset 0 0 0 calc(var(--size)/ 6) var(--color-lighter),inset 0 0 0 calc(var(--size)/ 4) var(--color-darkish),inset 0 calc(var(--size)/ 2) calc(var(--size)/ 6) var(--color-dark),inset 0 0 calc(var(--size)/ 8) calc(var(--size)/ 4.5) var(--color-darker),0 calc(var(--size)/ 16) 0 rgba(0,0,0,.3)}button:active::after{bottom:calc(var(--size)/ 10);border-width:0}#l,#r{--color:hsla(120, 70%, 60%, 1);--color-light:hsla(120, 70%, 70%, 1);--color-lighter:hsla(120, 70%, 80%, 0.8);--color-lightest:hsla(120, 70%, 80%, 0.3);--color-darkish:hsla(120, 70%, 55%, 1);--color-dark:hsla(120, 70%, 50%, 1);--color-darker:hsla(120, 70%, 40%, 1);--color-darkest:hsla(120, 70%, 25%, 1);--color-black:hsla(120, 70%, 20%, 1);width:calc(var(--size) * 1.5)}#q{--color:hsla(31, 80%, 60%, 1);--color-light:hsla(31, 80%, 70%, 1);--color-lighter:hsla(31, 80%, 80%, 0.8);--color-lightest:hsla(31, 80%, 80%, 0.3);--color-darkish:hsla(31, 80%, 55%, 1);--color-dark:hsla(31, 80%, 50%, 1);--color-darker:hsla(31, 80%, 40%, 1);--color-darkest:hsla(31, 80%, 25%, 1);--color-black:hsla(31, 80%, 20%, 1);width:calc(var(--size) * .75);height:calc(var(--size) * .75);right:15px;bottom:20px}#l::after,#r::after{width:calc(var(--size) * 1.65 / 1.3)}#q::after{width:calc(var(--size) * .7 / 1.3)}#l{left:100px}#x{left:50%;transform:translateX(-50%)}#r{right:100px}#l::before,#q::before,#r::before,#x::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;opacity:.8;color:#fff;transition:opacity .2s}#x::before{content:'X'}#l::before{content:'◄'}#r::before{content:'►'}#q::before{content:'?'}#l:active::before,#q:active::before,#r:active::before,#x:active::before{opacity:1}