body,#root{height:100vh;width:100vw;background-color:#1d1d1d;margin:0}.App{display:flex;flex-direction:column;height:100%;width:100%}.nav-bar{display:flex;justify-content:center;align-items:center;border-bottom:1px solid #747171;box-shadow:#747171 0 0 10px 2px;background-color:#1a1919;width:100vw;position:relative;z-index:1;margin-bottom:5vh}.nav-header{font-size:2.5rem;font-family:Arial,Helvetica,sans-serif;color:#fff;margin:5px}.main-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:fit-content;width:60vw;height:60vh;margin-left:auto;margin-right:auto;background-color:#1a1919;padding:5vh;border-radius:25px;background:#1a1919;box-shadow:37px 37px 35px #121111,-37px -37px 35px #222121}.input-container,.guess-container{display:flex;flex-direction:row}.general-button{font-family:Arial,Helvetica,sans-serif;font-size:12px;width:80px;height:40px;margin:.1vw;border:rgb(109,109,109) 1px solid;color:#fff;user-select:none;border-radius:5px;background-color:#242424;cursor:pointer}.general-button:hover{background-color:#3a3a3a}.general-button:active{background-color:#242424}.char-container{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;font-size:1em;width:40px;height:40px;margin:.1vw;border:rgb(109,109,109) 1px solid;color:#fff;user-select:none;border-radius:5px}.default{background-color:#242424}.correct{background-color:#43b648}.almost{background-color:#fdba29}.to-correct{animation:to-correct 2.5s ease-in both}.to-almost{animation:to-almost 2.5s ease-in both}.to-wrong{animation:to-default 2.5s ease-in both}.reveal-correct{animation:reveal-correct .5s ease-in both}.reveal-almost{animation:reveal-almost .5s ease-in both}.reveal-default{animation:reveal-default .5s ease-in both}.horizontal-shake{animation:horizontal-shake .5s ease-in both}.keyboard-row{display:flex;flex-direction:row;justify-content:center;margin:.1vh}.keyboard{margin-top:25px}footer{position:fixed;bottom:0;display:flex;width:100vw;align-items:center;background-color:#1a1919;border-top:1px solid #747171;box-shadow:#747171 0 0 10px 2px}.clock-container{position:absolute;right:0;margin-right:10px;margin-left:10px}.bg-blur{height:100%;width:100%;background-color:#0009;font-family:Arial,Helvetica,sans-serif;display:flex;justify-content:center;align-items:center;position:absolute;top:0;z-index:1}.popup-container{display:flex;flex-direction:column;color:#fff;background-color:#192d28;align-items:center;width:60vw;height:60vh;padding:4.5vh;border-radius:10px;position:relative;overflow-y:scroll}::-webkit-scrollbar{width:5px}.notification-container{position:fixed;display:flex;flex-direction:column;align-items:center;height:fit-content;width:fit-content;z-index:1;top:50px;pointer-events:none;align-self:center;justify-self:center}.notification{display:flex;align-items:center;justify-content:center;border-radius:14px;font-size:1.2em;font-family:Arial,Helvetica,sans-serif;color:#fff;background-color:#42424266;max-width:fit-content;padding:10px;border:rgba(42,141,116,.664) 2px solid;margin:1vh;padding:1vh;user-select:none;animation:notiAnim 4s ease-in-out;transform:scale(0)}@keyframes notiAnim{0%{transform:translateY(-25px) scale(0)}15%{transform:translateY(0) scale(1)}85%{transform:translateY(0) scale(1)}to{transform:translateY(50px) scale(0)}}@keyframes reveal-correct{0%{-webkit-transform:rotateY(0);transform:rotateY(0);background-color:#242424}70%{background-color:#43b648}to{-webkit-transform:rotateY(360deg);transform:rotateY(360deg);background-color:#43b648}}@keyframes reveal-almost{0%{-webkit-transform:rotateY(0);transform:rotateY(0);background-color:#242424}70%{background-color:#fdba29}to{-webkit-transform:rotateY(360deg);transform:rotateY(360deg);background-color:#fdba29}}@keyframes reveal-default{0%{-webkit-transform:rotateY(0);transform:rotateY(0);background-color:#242424}to{-webkit-transform:rotateY(360deg);transform:rotateY(360deg);background-color:#242424}}@keyframes to-correct{0%{background-color:#242424}99.9%{background-color:#242424}to{background-color:#43b648}}@keyframes to-almost{0%{background-color:#242424}99.9%{background-color:#242424}to{background-color:#fdba29}}@keyframes to-default{0%{background-color:#242424}99.9%{background-color:#242424}to{background-color:#0e0e0e}}@keyframes horizontal-shake{0%{transform:translate(0)}25%{transform:translate(5px)}50%{transform:translate(-5px)}75%{transform:translate(5px)}to{transform:translate(0)}}.rises-up{animation:rises-up .2s ease-in both}@keyframes rises-up{0%{transform:translateY(75px) scale(0);opacity:0}25%{transform:translateY(60px) scale(.25)}50%{transform:translateY(40px) scale(.5)}75%{transform:translateY(15px) scale(.75)}to{transform:translateY(0) scale(1);opacity:1}}