@import url(https://fonts.googleapis.com/css2?family=Marcellus&display=swap);@import url(https://fonts.googleapis.com/css2?family=Ubuntu&display=swap);:root{--primary-light:#edf2fb;--primary-dark:#16425b;--decor-color:#cdb4db;--right-color:#2d6a4f;--wrong-color:#a4161a;--simple-white:#fff;--decor-color-rgb:205,180,219;--primary-dark-rgb:22,66,91;--simple-black-rgb:0,0,0;--heading-font:"Marcellus",serif;--paragraph-font:"Ubuntu",sans-serif}*{box-sizing:border-box;margin:0;padding:0}#root{background-color:var(--primary-light);display:flex;flex-direction:column;min-height:100vh}.container{padding:0 1.5em}@media (min-width:700px){.container{padding:0 3em}}@media (min-width:1280px){.container{padding:0 10em}}.main{flex-grow:1}body{color:var(--primary-dark);font-family:var(--paragraph-font);font-size:1.3rem;letter-spacing:1.1px;line-height:1.5em}.uppercase-text{text-transform:uppercase}.big-header,.large-header,.mid-header{font-family:var(--heading-font);letter-spacing:1.2px}@media (min-width:700px){.big-header,.large-header,.mid-header{letter-spacing:2.5px}}.large-header{font-size:2.25rem}@media (min-width:700px){.large-header{font-size:3rem}}.big-header{font-size:1.55rem}@media (min-width:700px){.big-header{font-size:2rem}}.mid-header{font-size:1.3rem}@media (min-width:700px){.mid-header{font-size:1.5rem}}.error-text{color:var(--wrong-color);font-size:2rem;line-height:1.25em;text-align:center;text-transform:uppercase}.header{border-bottom:2px solid var(--decor-color);box-shadow:0 10px 5px -5px rgba(var(--decor-color-rgb),.25);flex-shrink:0;margin-bottom:3em}@media (min-width:700px){.header{margin-bottom:5em}}@media (min-width:1280px){.header{border-bottom:none;box-shadow:none}}.header-container{align-items:center;display:flex;justify-content:space-between;padding:1em 0}@media (min-width:700px){.header-container{padding:2em 0}}@media (min-width:1280px){.header-container{border-bottom:2px solid var(--decor-color);box-shadow:0 10px 5px -5px rgba(var(--decor-color-rgb),.25);padding:2em 2.5em}}.footer{flex-shrink:0;font-size:small;padding:1.5em 0;text-align:center}.test-container{display:flex;flex-direction:column-reverse;gap:2em;margin-bottom:2em}@media (min-width:700px){.test-container{flex-direction:row;gap:3em}}@media (min-width:1280px){.test-container{gap:5em}}.test-text-wrapper{background-color:var(--simple-white);border-radius:7px;box-shadow:0 0 10px 5px rgba(var(--decor-color-rgb),.25);padding:1em}@media (min-width:700px){.test-text-wrapper{display:grid;min-height:100%;padding:2em;place-items:center;width:100%}}.test-loading-text{align-self:start}.current-char,.wrong-char{color:var(--primary-light)}.current-char{background-color:var(--right-color)}.wrong-char{background-color:var(--wrong-color)}.right-char{color:var(--right-color)}.stats-container{align-items:center;background-color:var(--simple-white);border-radius:7px;box-shadow:0 0 10px 5px rgba(var(--decor-color-rgb),.25);display:flex;flex-wrap:wrap;gap:2em;justify-content:center;padding:1em;text-align:center}@media (min-width:700px){.stats-container{flex-direction:column;flex-wrap:nowrap;padding:2em}}.stat-title{margin-bottom:1em}.modal-window-blackout{background-color:rgba(var(--simple-black-rgb),.5);height:100%;left:0;position:fixed;top:0;width:100%;z-index:50}.modal-window{background-color:var(--simple-white);border:2px solid var(--decor-color);border-radius:15px;left:50%;padding:1.5em;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:90%;z-index:100}@media (min-width:700px){.modal-window{width:70%}}.modal-window-text{margin-bottom:1.5em}.base-button{border-radius:7px;cursor:pointer;display:block;font-family:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;margin:1em auto;padding:.5em 1.5em}@media (min-width:700px){.base-button{padding:.7em 2em}}.dark-button{background-color:var(--primary-dark);border:2px solid transparent;color:var(--simple-white);transition:.2s linear}.dark-button:hover{background-color:initial;border:2px solid var(--decor-color);color:var(--primary-dark)}.dark-button:active{box-shadow:inset 2px 2px 5px 1px rgba(var(--primary-dark-rgb),.25)}.select{border:2px solid var(--primary-dark);color:inherit;display:block;margin:1rem auto;padding:.25em 1em}
/*# sourceMappingURL=main.9cff8145.css.map*/