body{background-color:#000;background-image:linear-gradient(to bottom right, rgb(2, 1, 16), rgb(64, 76, 93));background-repeat:no-repeat;font-family:"Delicious Handrawn","Nanum Pen Script",Helvetica,Arial,sans-serif;height:100vh;min-height:850px}.wrapper{display:none}header{display:flex;justify-content:space-between}#word{display:flex;font-size:3em;color:#f9e834}#wordMobile{display:none}.flex{display:flex}.flex div{width:50%}.modal{width:100%;height:100%;position:relative;z-index:1000;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0);width:100%;height:100%;padding:20px;box-sizing:border-box;margin-top:75px}.modal .box{width:100%;max-width:500px;margin:auto;background-color:#0a0b4a;color:#f9e834;font-family:"Delicious Handrawn","Nanum Pen Script",Helvetica,Arial,sans-serif;text-align:center;padding:20px;border-radius:20px;margin:10px}.modal .box img{width:100%;max-width:400px;margin-top:-130px}.modal .box h1{font-size:4em;margin:5px 0}.modal .box h6{font-size:2.5em;margin:15px}.modal .box p{font-size:2em;margin:10px 0;color:#fff}.level form{display:flex;flex-wrap:wrap;flex-direction:row;margin:auto}.level form #submit{background-color:#38fd95;color:#000;padding:15px 40px;border:none;border-radius:40px;font-family:"Delicious Handrawn","Nanum Pen Script",Helvetica,Arial,sans-serif;font-size:3em;margin:10px auto;opacity:1}.level form #submit:hover{background-color:#2abd6e;cursor:pointer}.level form #submit:disabled{opacity:.3}.level label{display:flex;cursor:pointer;font-weight:500;position:relative;overflow:hidden;margin:.375em 5px;justify-content:center}.level label input{position:absolute;left:-9999px}.level label input:checked+span{background-color:#f9e834;color:#000}.level label input:checked+span:before{box-shadow:inset 0 0 0 .4375em #000}.level label span{display:flex;align-items:center;padding:.375em .75em .375em .375em;border-radius:99em;transition:.25s ease;font-size:2em}.level label span:hover{background-color:#207fff}.level label span:before{display:flex;flex-shrink:0;content:"";background-color:#fff;width:1.5em;height:1.5em;border-radius:50%;margin-right:.375em;transition:.25s ease;box-shadow:inset 0 0 0 .125em #000}.header-items{display:flex;align-items:center}.header-items h6{margin:0;color:#fff;font-size:1.8em;padding:0 20px;font-family:"Delicious Handrawn","Nanum Pen Script",Helvetica,Arial,sans-serif}.header-items #timer,.header-items #score2{color:#f9e834}.playPause{background-color:#38fd95;border-radius:40px;width:50px;height:50px;text-align:center;margin:10px}.playPause i{padding:0}.playPause:hover{cursor:pointer;background-color:#2abd6e}.playing{background-color:#ff5e52 !important}.playing:hover{background-color:#cc4b41 !important}.keyboard-container{display:flex}.keyboard{background-color:rgba(0,0,0,0);display:grid;font-family:"Roboto",sans-serif;font-size:16px;font-weight:300;grid-template-columns:repeat(58, 17px);grid-template-rows:repeat(10, 34px);justify-content:center;letter-spacing:1px;line-height:24px;padding:16px;transform-origin:top left;margin:auto;transform:inherit}.key{align-items:center;background-color:#333;color:#fff;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;grid-column-end:span 4;grid-row-end:span 2;grid-template-columns:repeat(2, 32px);grid-template-rows:repeat(2, 32px);justify-content:center;padding:5px 9px;margin:2px}.key:hover{background-color:#62c3fd;color:#fff}.key:active{background-color:#207fff;color:#fff}.key.is-arrow-down,.key.is-arrow-up{grid-column-start:51;grid-row-end:span 1}.key.is-arrow-down{border-radius:0 0 4px 4px;grid-row-start:10;margin-top:1px}.key.is-arrow-up{border-radius:4px 4px 0 0;grid-row-start:9;margin-bottom:1px}.key.is-backspace,.key.is-tab{grid-column-end:span 6}.key.is-backspace{align-items:flex-end}.key.is-capslock{grid-column-end:span 7}.key.is-command,.key.is-shift-left{grid-column-end:span 5}.key.is-enter{border-radius:0 4px 4px 4px;grid-column-start:56;grid-column-end:span 3;grid-row-end:span 4;position:relative}.key.is-enter::before,.key.is-enter::after{content:"";position:absolute}.key.is-enter::before{background-color:#333;border-radius:4px 0 0 4px;height:64px;left:-16px;top:0;width:16px}.key.is-enter::after{border-top-right-radius:4px;box-shadow:-4px 4px 0 0 #333 inset;cursor:default;height:8px;left:-4px;top:60px;width:8px}.key.is-enter .key__top{height:54px}.key.is-left,.key.is-right{font-size:12px;justify-content:space-between;line-height:20px}.key.is-left{align-items:flex-start}.key.is-right{align-items:flex-end}.key.is-shift-right{grid-column-end:span 9}.key.is-space{grid-column-end:span 20}.key.is-tab{align-items:flex-start}.key__bottom,.key__top{display:flex;flex-direction:column;justify-content:flex-end}.key__bottom{flex-grow:1}.logo{max-width:100px;width:100%}.logo img{width:100%;padding:10px;box-sizing:border-box}.display{font-size:3em;color:#fff;text-align:center;font-family:"Delicious Handrawn","Nanum Pen Script",Helvetica,Arial,sans-serif}.display input{background-color:rgba(0,0,0,0);width:100%;padding:0;margin:0;font-size:3em;text-align:center;color:#fff;border:none;font-family:"Delicious Handrawn","Nanum Pen Script",Helvetica,Arial,sans-serif}.keyPressed{color:#fff !important;background-color:#207fff !important}#keyboard-mobile{background:#000;font-family:sans-serif;color:#fff}.mobileKeys{width:100%}.keyboard__row{display:flex}.keyboard__key{display:block;height:60px;width:12.5%;flex-grow:1;text-align:center;line-height:60px;font-family:sans-serif;font-size:24px;margin:5px;border-radius:5px;background:#333;cursor:pointer}.keyboard__key:hover{background-color:#62c3fd;color:#fff}.keyboard__key:active{background-color:#207fff;color:#fff}.keyboard__key.is-down{background:#8af;color:#fff}#keyboard-mobile{display:none}#keyboard-desktop{display:flex}.mobile-keyboard-toggle{margin:15px 0 10px 0;text-align:center;padding:10px;background:rgba(255,255,255,.1);border-radius:5px;display:none}.mobile-keyboard-toggle label{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;color:#fff;font-family:"Roboto",sans-serif}.mobile-keyboard-toggle label input[type=checkbox]{margin:0;transform:scale(1.2)}@media(max-width: 700px){.mobile-keyboard-toggle{display:block}}#keyboard-mobile.device-keyboard-active{opacity:.3;pointer-events:none;transition:opacity .3s ease;position:relative}#keyboard-mobile.device-keyboard-active::after{content:"Device keyboard active";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:rgba(85,85,85,.8);color:#fff;padding:8px 16px;border-radius:4px;font-size:12px;pointer-events:none;z-index:10}@media(max-width: 700px){.level form{flex-direction:column}.modal{margin-top:150px}.display{font-size:1em}.header-items h6{font-size:1.2em}#word{font-size:1.2em;display:none}#wordMobile{display:block;font-size:1.5em;text-align:center;color:#f9e834;margin:5px 0px}#keyboard-mobile{display:block}#keyboard-desktop{display:none}}/*# sourceMappingURL=style.css.map */