:root{--green:#00f100;--yellow:#f0c500;--gray:#838383;--orange:#f5793a;--blue:#85c0f9;--shadow:0 0 0.6em rgba(0,0,0,.2)}body,html{height:100%;margin:0}a{color:#000}body{background-color:#212121;color:#fff;font-family:sofia-pro,sans-serif;font-style:normal;font-weight:400}.modal{background-color:#000;background-color:hsla(0,0%,100%,.5);display:flex;height:100%;overflow:auto;position:fixed;top:0;width:100%;z-index:1}.modalContent{animation:SlideIn .2s;background-color:#e9e9e9;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);color:#000;font-size:14px;margin:auto;padding:16px;position:relative;top:25px;width:400px}.close{color:#aaa;font-size:34px;font-weight:700;line-height:34px;margin-bottom:3px}div.close{text-align:right;width:100%}span.close{float:right}.close:focus,.close:hover{color:#000;cursor:pointer;text-decoration:none}.exampleRow{background-color:#212121;display:flex;padding:7.5px}.exampleRow,.exbox{align-items:center;height:50px;justify-content:center}.exbox{border-radius:50px;color:#000;display:inline-flex;margin:7.5px;width:50px}.bigContainer{flex-direction:column;height:100%;margin:0 auto;max-width:500px;width:100%}#header,.bigContainer{display:flex;justify-content:space-between}#header{align-items:center;background-color:#000;border-radius:5px;padding:5px}.icon{cursor:pointer;height:30px;margin-left:5px;margin-right:5px}.title{left:0;pointer-events:none;position:absolute;right:0;text-align:center}h1{font-size:30px;line-height:30px;margin-block-end:0;margin-block-start:0}#message{background-color:#000;border-radius:5px;display:none;margin:0 auto;padding:8px 50px}#msgContainer{align-items:center;display:flex;flex-basis:60px;flex-shrink:10;min-height:50px}#gridRow{display:flex;flex-basis:200px}.rowSpacer{flex-basis:0px;flex-shrink:100}#gridCol1,#gridCol2{flex-basis:40%;flex-grow:2}#boxGrid{grid-row-gap:15px;grid-column-gap:15px;box-sizing:border-box;display:inline-grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}#boxGrid,.inputbox{height:100%;width:100%}.inputbox{align-items:center;background-color:#333;border-radius:100%;color:#000;display:inline-flex;justify-content:center;text-align:center}.inputbox:before{content:"";display:inline-block;padding-bottom:100%}.unfilled{background-color:#333}.filled{background-color:#e9e9e9}.green{background-color:var(--green)}.colorblind .green{background-color:var(--orange)}.yellow{background-color:var(--yellow)}.colorblind .yellow{background-color:var(--blue)}.gray{background-color:var(--gray)}#stackobuttons{background-color:#000;border-radius:5px;display:flex;flex-direction:column;height:100%;justify-content:space-around;margin-left:5%}.button{background-color:#212121;border-radius:5px;cursor:pointer;font-size:11px;margin-left:5px;margin-right:5px;padding:10px 5px;text-align:center}#keyringRow{display:flex;flex-basis:300px;flex-grow:1;flex-shrink:10;margin-bottom:10px;margin-top:10px;min-height:0;min-width:0}#keyringSVG{height:100%;margin:auto}.white-dot{fill:#fff;cursor:pointer}.green-dot{fill:var(--green);cursor:pointer}.colorblind .green-dot{fill:var(--orange);cursor:pointer}.yellow-dot{fill:var(--yellow);cursor:pointer}.colorblind .yellow-dot{fill:var(--blue);cursor:pointer}.gray-dot{fill:var(--gray);cursor:pointer}#endModal,#loseModal,#settingsModal,#winModal,.textCopied{display:none}.textCopied{text-align:center}.niceButton{align-items:center;background-color:#00f100;border:none;border-radius:5px;cursor:pointer;display:flex;font-family:inherit;font-size:20px;height:52px;justify-content:center;margin:auto;width:50%}.centeredImage{display:block;margin-left:auto;margin-right:auto;width:300px}.switch{background:#333;border-radius:999px;display:block;height:20px;position:relative;width:32px}.switch.on{background:var(--green)}.colorblind .switch.on{background:var(--orange)}.knob{background:#fff;border-radius:8px;display:block;height:calc(100% - 4px);left:2px;position:absolute;top:2px;transform:translateX(0);transition:transform .3s;width:50%}.setting{align-items:center;display:flex;justify-content:space-between}.callout{background-color:var(--green);border-radius:3px;padding:5px}.colorblind .callout{background-color:var(--orange)}.interval{stroke-width:35px;filter:drop-shadow(--shadow);opacity:.8}.interval.ic1{stroke:#f80046}.interval.ic2{stroke:#f0c500}.interval.ic3{stroke:#00f100}.interval.ic4{stroke:#00efc1}.interval.ic5{stroke:#203ef3}.interval.ic6{stroke:#d100f2}