body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html{height:100vh}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.App{background:linear-gradient(to top left,#013558,#ceedf1);font-size:62.5%;height:100vh;text-align:center}.title{-webkit-text-fill-color:transparent;background:linear-gradient(#c9258a,#252a79);background:-webkit-linear-gradient(#c9258a,#252a79);background-clip:text;-webkit-background-clip:text;color:#8695c7;font-family:Dancing Script,cursive;font-family:Monoton,cursive;font-size:7.6rem}.timer-component{align-items:center;display:flex;flex-direction:column;height:80vh;justify-content:space-between;position:fixed;right:.5rem;top:53.5%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:4.5rem}.timer-icon{opacity:.3;width:4rem}.timer-wrapper{align-items:center;border:3px solid rgba(98,212,247,.6);border-radius:6rem;display:flex;height:calc(100% - 10rem);justify-content:center;padding:.5rem;width:1rem}.timer{align-items:flex-end;border:2px solid #0e75b9;border-radius:5rem;display:flex}.timer,.timer-inner{height:100%;width:100%}.timer-inner{background:linear-gradient(270deg,#3fce7a,#089939);background:linear-gradient(270deg,#cecc3f,#bba009);background:linear-gradient(270deg,#ce603f,#af483a);transition:all 1s linear}.time-left{color:#fff;font-size:2.4rem}.pulseX{-webkit-animation:pulseX 1s infinite;animation:pulseX 1s infinite}.pulseY{-webkit-animation:pulseY 1s infinite;animation:pulseY 1s infinite}@-webkit-keyframes pulseX{0%{box-shadow:none;-webkit-transform:scaleX(1);transform:scaleX(1)}50%{box-shadow:0 0 1rem hsla(0,0%,100%,.2);-webkit-transform:scaleX(1.2);transform:scaleX(1.2)}to{box-shadow:none;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulseX{0%{box-shadow:none;-webkit-transform:scaleX(1);transform:scaleX(1)}50%{box-shadow:0 0 1rem hsla(0,0%,100%,.2);-webkit-transform:scaleX(1.2);transform:scaleX(1.2)}to{box-shadow:none;-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes pulseY{0%{box-shadow:none;-webkit-transform:scaleY(1);transform:scaleY(1)}50%{box-shadow:0 0 1rem hsla(0,0%,100%,.2);-webkit-transform:scaleY(1.2);transform:scaleY(1.2)}to{box-shadow:none;-webkit-transform:scaleY(1);transform:scaleY(1)}}@keyframes pulseY{0%{box-shadow:none;-webkit-transform:scaleY(1);transform:scaleY(1)}50%{box-shadow:0 0 1rem hsla(0,0%,100%,.2);-webkit-transform:scaleY(1.2);transform:scaleY(1.2)}to{box-shadow:none;-webkit-transform:scaleY(1);transform:scaleY(1)}}.gear-icon{-webkit-animation:rotate 18s linear infinite;animation:rotate 18s linear infinite;color:#fff;cursor:pointer;height:3.5rem;position:fixed;right:1rem;top:1rem;z-index:1000}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.settings-menu{background:linear-gradient(to top right,#bbb,#eee);border-radius:.3rem;box-shadow:0 0 1.6rem rgba(0,0,0,.3);padding:.4rem;position:fixed;right:.5rem;top:5rem;width:10rem;z-index:1000}.background-modal{background:#333;height:100vh;opacity:.8;position:fixed;width:100vw;z-index:750}.word-length-wrapper{font-size:1rem;font-weight:700}.word-length{margin-top:-1rem}.change-word-length-btn{background:linear-gradient(#3475ca,#1a49a1);background:-webkit-linear-gradient(#3369bb,#1b59aa);border:1px solid #4a8ff8;border-radius:50%;color:#fff;cursor:pointer;font-size:1.8rem;height:2.2rem;margin:.2rem;width:2.2rem}.change-word-length-btn:active{color:#fff;font-weight:700}.word-length{-webkit-text-fill-color:transparent;background:linear-gradient(#c9258a,#252a79);background:-webkit-linear-gradient(#c9258a,#252a79);background-clip:text;-webkit-background-clip:text;font-size:4rem}.line{background:#919697;height:2px;margin:1rem auto;width:80%}.timed-game-wrapper{font-size:1rem;font-weight:700}.switch-wrapper{border-radius:.3rem;height:1.5rem;margin:auto;width:6rem}.backing{color:#fff;display:inline-block;height:100%;text-align:center;width:50%}.off-backing{background:linear-gradient(to top right,#a13030,#cc3c31)}.switch{background:linear-gradient(to top right,#e2e2e2,#ececec);border:1px solid #8d99b3;border-radius:.2rem;box-shadow:0 0 4rem rgba(0,0,0,.2);cursor:pointer;display:inline-block;height:100%;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%);transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;width:50%;z-index:2000}.timed-on{-webkit-transform:translate(50%,-100%);transform:translate(50%,-100%)}.on-backing{background:linear-gradient(to top right,#499b64,#4ecc74)}.settings-msg{font-size:.8rem;font-weight:700;margin:.8rem}.attempt-line{flex-direction:row;margin:auto}.attempt-line,.letter-square{align-items:center;display:flex;justify-content:center;transition:all 2s ease}.letter-square{background:linear-gradient(to top right,#ccc,#eee);border:2.2px solid #3266a1;border-radius:.7rem;box-shadow:3px 3px 10px rgba(0,0,0,.2);color:#3d417c;font-size:4.2rem;height:7rem;margin:1rem;width:7rem}.shake{-webkit-animation:shake .8s ease-in-out;animation:shake .8s ease-in-out}@-webkit-keyframes shake{0%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg)}10%{-webkit-transform:skewX(3deg);transform:skewX(3deg)}20%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg)}30%{-webkit-transform:skewX(3deg);transform:skewX(3deg)}40%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg)}50%{-webkit-transform:skewX(3deg);transform:skewX(3deg)}60%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg)}70%{-webkit-transform:skewX(3deg);transform:skewX(3deg)}80%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg)}90%{-webkit-transform:skewX(3deg);transform:skewX(3deg)}to{-webkit-transform:skewX(0deg);transform:skewX(0deg)}}@keyframes shake{0%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg)}10%{-webkit-transform:skewX(3deg);transform:skewX(3deg)}20%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg)}30%{-webkit-transform:skewX(3deg);transform:skewX(3deg)}40%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg)}50%{-webkit-transform:skewX(3deg);transform:skewX(3deg)}60%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg)}70%{-webkit-transform:skewX(3deg);transform:skewX(3deg)}80%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg)}90%{-webkit-transform:skewX(3deg);transform:skewX(3deg)}to{-webkit-transform:skewX(0deg);transform:skewX(0deg)}}.bounce{-webkit-animation:bounce 1s ease-in-out;animation:bounce 1s ease-in-out}@-webkit-keyframes bounce{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-17px);transform:translateY(-17px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounce{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-17px);transform:translateY(-17px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.bounce:first-child{-webkit-animation-delay:1s;animation-delay:1s}.bounce:nth-child(2){-webkit-animation-delay:1.2s;animation-delay:1.2s}.bounce:nth-child(3){-webkit-animation-delay:1.4s;animation-delay:1.4s}.bounce:nth-child(4){-webkit-animation-delay:1.6s;animation-delay:1.6s}.bounce:nth-child(5){-webkit-animation-delay:1.8s;animation-delay:1.8s}.bounce:nth-child(6){-webkit-animation-delay:2s;animation-delay:2s}.bounce:nth-child(7){-webkit-animation-delay:1.2s;animation-delay:1.2s}.input{bottom:5%;flex-direction:column;justify-content:center;margin:0;position:fixed;width:100%}.input,.kb-row{align-items:center;display:flex}.kb-row{flex-direction:row;height:6rem}.key{align-items:center;background:linear-gradient(to top right,#ccc,#eee);border:none;border-radius:.3rem;box-shadow:1px 1px 3px rgba(0,0,0,.4);box-sizing:border-box;cursor:pointer;display:flex;font-size:1.8rem;height:4rem;justify-content:center;margin:0 .3rem;min-width:4rem;padding:1rem}.key:active{background:linear-gradient(to top right,#d1d1c3,#dfdfca)}:disabled{cursor:default}.key-text{-webkit-touch-callout:none;pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.DEL{background:linear-gradient(to bottom right,#7a1c1c,#633434);color:#fff}.ENTER{background:linear-gradient(to bottom right,#4d6d4e,#415241);color:#fff}.answer-submit-btn{background:linear-gradient(to top left,#530943,#160a58);border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-size:1.5rem;height:4.5rem;margin-top:1.5rem;width:12rem}.shrink{height:4rem}.shrink>div{font-size:2rem;height:3rem;margin:.4rem;width:3rem}.correct{background:linear-gradient(to bottom right,#17550b,#0e5005);color:#fff}.present{background:linear-gradient(to bottom right,#c2a60a,#a37f07);color:#fff}.complete-modal{background:linear-gradient(to top right,#1b2d61,#026168);border-radius:1rem;box-shadow:5px 5px 15px rgba(0,0,0,.2);box-sizing:border-box;color:#fff;font-size:2rem;height:14rem;left:50%;padding:2rem;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:60rem;z-index:100}.complete-btn{background:linear-gradient(to top right,#9e7609,#cfbc09);border:none;border-radius:.5rem;box-shadow:2px 2px 8px rgba(0,0,0,.3);cursor:pointer;font-size:1.8rem;height:4rem;outline:none;width:16rem}.invalid{align-items:center;-webkit-animation:fade 1.5s ease-in-out;animation:fade 1.5s ease-in-out;background:linear-gradient(to top right,#333,#555);border-radius:.5rem;color:#fff;font-size:.9rem;font-weight:700;height:3rem;justify-content:center;left:50%;opacity:0;position:fixed;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:9.5rem;z-index:500}@-webkit-keyframes fade{0%{opacity:0}25%{opacity:1}50%{opacity:1}75%{opacity:1}to{opacity:0}}@keyframes fade{0%{opacity:0}25%{opacity:1}50%{opacity:1}75%{opacity:1}to{opacity:0}}:disabled{color:#fff;opacity:.5}:disabled,:disabled:hover{background:linear-gradient(to top right,#333,#555)}@media screen and (max-width:1150px){.time-left,.timer-icon{display:none}.timer-wrapper{border:none}.timer-component{height:4rem;left:50%;top:96%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:80vw;z-index:1000}.timer-wrapper{height:.4rem;width:80vw}}@media screen and (max-width:820px){.letter-square{font-size:3.1rem;height:5rem;width:5rem}.kb-row{height:3.3rem}.key{font-size:1.3rem;height:2.4rem;margin:0 .2rem;max-width:7rem;min-width:3rem;padding:.4rem}.key-text{margin:0}}@media screen and (max-width:650px){.title{font-size:5.8rem;margin-bottom:0}.gear-icon{height:2.5rem}.settings-menu{top:4rem}.letter-square{margin:1.8rem .4rem .4rem}.key{font-size:1.1rem;height:2.4rem;max-width:6rem;min-width:2.4rem;padding:.3rem}.complete-modal{font-size:1.6rem;padding:2rem;width:100%}}@media screen and (max-width:500px){.title{font-size:3.7rem}.shrink>div{font-size:1.4rem;font-weight:700;height:2.6rem;margin:.3rem;width:2.6rem}.letter-square{font-size:2.4rem;height:4rem;width:4rem}.key{font-size:1.1rem;height:2.4rem;max-width:5rem;min-width:1.8rem;padding:.3rem}.complete-modal{font-size:1.5rem;height:55vw;width:80vw}.complete-btn{font-size:1rem;font-weight:700;height:2.5rem;width:6rem}}@media screen and (max-width:400px){.title{font-size:3.2rem;padding-top:1.3rem}.shrink{height:15vw}.shrink>div{font-size:6vw;height:11vw;width:11vw}.letter-square{font-size:8vw;font-weight:700;height:15vw;margin-left:1vw;margin-right:1vw;width:15vw}.key{font-size:.8rem;height:2.4rem;max-width:3rem;min-width:1.5rem;padding:.3rem}.complete-modal{font-size:1rem;height:55vw;width:80vw}.complete-btn{font-size:1rem;font-weight:700;height:2.5rem;width:6rem}}@media screen and (max-width:340px){.title{font-size:2.6rem}.gear-icon{height:1.8rem;right:.8rem}.kb-row{height:2.9rem}.key{font-size:.8rem;height:2.4rem;max-width:3rem;min-width:1.35rem;padding:.3rem}.complete-btn,.complete-modal{font-size:1rem}.complete-btn{font-weight:700;height:2.5rem;width:6rem}}@media screen and (max-width:310px){.kb-row{height:2.9rem}.key{font-size:.8rem;height:2.2rem;max-width:3rem;min-width:1.2rem;padding:.2rem}.complete-modal{font-size:1rem;height:70vw;width:80vw}.complete-btn{font-size:1rem;font-weight:700;height:2.5rem;width:6rem}}
/*# sourceMappingURL=main.b7ef35ee.css.map*/