html,body,#root{position:fixed;top:0;left:0;width:100%;height:100%;background:ivory;background-image:linear-gradient(147deg,#FFFFFF 0%,#292C35 100%)}.interface{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;font-family:Bebas Neue,cursive}.time{position:absolute;top:4%;left:0;width:100%;color:#fff;font-size:6vh;background:#00000033;padding-top:5px;text-align:center}.restart{display:flex;justify-content:center;position:absolute;top:40%;left:0;width:100%;color:#fff;font-size:80px;background:#00000033;padding-top:10px;pointer-events:auto;cursor:pointer}.controls{position:absolute;bottom:4%;left:0;width:100%;pointer-events:none}.controls .raw{display:flex;justify-content:center;pointer-events:none}.controls .key{width:30px;height:30px;margin:4px;border:2px solid #ffffff;background:#ffffff44;pointer-events:all;cursor:pointer}.controls .key.large{width:114px}.controls .key.active{background:#ffffff99}.otherControls{position:absolute;bottom:10%;left:5%;width:20%;pointer-events:none}.otherControls .raw{display:flex;width:100%;justify-content:center;pointer-events:all}.otherControls .key{width:100%;height:100%;margin:1%;border:2px solid #ffffff;background:#ffffff44;pointer-events:all;cursor:pointer}.otherControls .key .text{color:#fff;font-size:2em;background:#00000033;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@media screen and (max-width: 768px){.otherControls .key .text{font-size:1.5em}}.loadingScreen{position:fixed;top:0;left:0;bottom:0;right:0;background-color:inherit;background-image:inherit;display:flex;align-items:center;justify-content:center;transition:opacity 4s;z-index:1;font-family:Almendra,serif}.loadingScreen__button{position:relative;padding:8px 32px;background-color:#0000003d;color:#fff;border:none;font-weight:700;font-size:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;width:calc(var(--loader-size) - 33px);height:calc(var(--loader-size) - 33px)}.loadingScreen__button:hover{background-color:#0000006b;cursor:pointer}.loadingScreen__button:disabled{opacity:.3;cursor:not-allowed}.loadingScreen__progress{position:absolute;bottom:0;left:0;width:100%;height:12px}.loadingScreen__progress__value{position:absolute;left:0;top:0;bottom:0;background-color:#0000007f;transition:width .4s}.loadingScreen--started{opacity:0;pointer-events:none}.loadingScreen--started .loader,.loadingScreen--started .loadingScreen__button{opacity:0}body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#292C35}:root{--loader-size: 200px}.loader{width:var(--loader-size);height:var(--loader-size);border-radius:50%;display:inline-block;position:fixed;border:3px solid;border-color:#ade8f4 #ade8f4 transparent #ade8f4;box-sizing:border-box;animation:rotation 1.5s linear infinite}.loader:after,.loader:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid;border-color:transparent transparent #FF3D00 #FF3D00;width:calc(var(--loader-size) - 15px);height:calc(var(--loader-size) - 15px);border-radius:50%;box-sizing:border-box;animation:rotationBack .7s linear infinite;transform-origin:center center}.loader:before{width:calc(var(--loader-size) - 30px);height:calc(var(--loader-size) - 30px);border-color:#FFF #FFF transparent transparent;animation:rotation 2s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}