@font-face{font-family:noto;src:url(/fonts/NotoSansJP.ttf) format("truetype")}@font-face{font-family:shigoto;src:url(/fonts/Shigoto.ttf) format("truetype")}@font-face{font-family:noto-serif;src:url(/fonts/serif.ttf) format("truetype")}html{padding:0;margin:0;width:100%;overflow:hidden}body{margin:0;padding:0}button{color:var(--text);background-color:color-mix(in srgb,var(--text) 10%,transparent);padding:10px;border:none;border-radius:5px;font-family:noto;font-weight:700}button:hover{background-color:color-mix(in srgb,var(--text) 8%,transparent);cursor:pointer}main{font-family:noto,Arial,sans-serif;text-align:center;position:relative;background-color:var(--background);color:var(--text);width:100%;height:100vh}.dark-mode .material-symbols-rounded{color:var(--text)}input{font-family:noto}.result{font-weight:700}.result.true{color:var(--green)}.result.false{color:var(--pink)}.fail{margin-top:60px}input[type=checkbox].toggle{position:relative;width:40px;height:20px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:color-mix(in srgb,var(--text) 10%,transparent);outline:none;border-radius:20px;box-shadow:inset 0 0 5px color-mix(in srgb,var(--text) 10%,transparent);transition:.7s;outline:1px solid color-mix(in srgb,var(--text) 20%,transparent)}input[type=checkbox].toggle:checked{background:var(--green)}input[type=checkbox].toggle:checked:before{left:20px}input[type=checkbox].toggle:before{content:"";position:absolute;width:20px;height:20px;border-radius:20px;top:0;left:0;background:var(--light);transform:scale(1.1);box-shadow:0 2px 5px color-mix(in srgb,var(--text) 10%,transparent);transition:.5s;outline:1px solid color-mix(in srgb,var(--text) 20%,transparent)}.score-card{padding:20px 40px;border-radius:10px;box-shadow:#00000059 0 5px 15px;max-width:fit-content;margin:20px auto auto}.score-card p{color:color-mix(in srgb,var(--text) 70%,transparent)}.game{padding-top:20vh}.game input{font-size:large;background-color:color-mix(in srgb,var(--text) 15%,transparent);color:var(--text);font-weight:700;border:transparent;letter-spacing:1.5px;border-radius:10px;padding:10px 20px}.game input:focus{outline:none}@media (max-width: 500px){.game input{max-width:min(300px,50vw)}}.game .dots{color:color-mix(in srgb,var(--text) 40%,transparent);letter-spacing:4px}.game .ending-screen{display:flex;flex-direction:column;align-items:center;gap:10px}.game .ending-screen button{width:250px;margin-bottom:10px}.game .mono-font{font-family:noto}.game .handwriting-font{font-family:shigoto;font-size:350%;margin-top:2%;margin-bottom:-10px}.game .serif-font{font-family:noto-serif}.confirmation{padding:20px 40px;border-radius:10px;box-shadow:#00000059 0 5px 15px;background-color:var(--background);position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);z-index:2;width:auto;display:flex;flex-direction:column;align-items:center}.confirmation .require-confirmation{display:flex;white-space:nowrap;padding:10px}.confirmation .require-confirmation input{margin:4px 0 5px 5px;cursor:pointer}.confirmation .warning-message{font-weight:700}.overlay{z-index:1;background-color:color-mix(in srgb,var(--dark) 50%,transparent);width:100vw;height:100vh;position:fixed;display:block;border-radius:0;top:0;left:0}.overlay:hover{background-color:color-mix(in srgb,var(--dark) 50%,transparent)}:root{--pink: #EE7EA0;--green: #97b497;--light: #fff2f7;--dark: #444043;--correct: var(--green);--try-again: var(--pink);--background: var(--light);--text: var(--dark)}.dark-mode{--pink: #dc8da3;--green: #afbf8f;--correct: var(--green);--try-again: var(--pink);--background: var(--dark);--text: var(--light)}.settings-container{position:absolute;right:10px;top:0;display:flex;flex-direction:column;align-items:flex-end}.settings-container button:not(#score-button,.overlay){margin:10px 0;background-color:transparent;border:none}.settings-container button:not(#score-button,.overlay)#display-settings{background-color:transparent;border:none;cursor:pointer}.settings-container .settings-popup{background-color:var(--background);margin-right:10px;padding:10px;border-radius:10px;box-shadow:#00000059 0 5px 15px;display:flex;flex-direction:column;align-items:center;min-width:100px;gap:10px}.settings-container .settings-popup h4{align-self:center;margin-bottom:0}.settings-container .settings-popup .include-options{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.settings-container .settings-popup .include-options .include-option{display:flex;width:160px;justify-content:space-between}.settings-container .settings-popup .hiragana-toggle{position:relative;transition:.7s;width:100%}.settings-container .settings-popup .hiragana-toggle #is-hiragana-checkbox{cursor:pointer;position:relative;width:150px;height:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:color-mix(in srgb,var(--text) 10%,transparent);outline:none;border-radius:20px;box-shadow:inset 0 0 5px color-mix(in srgb,var(--text) 10%,transparent);outline:1px solid color-mix(in srgb,var(--text) 20%,transparent);transition:.5s}.settings-container .settings-popup .hiragana-toggle #is-hiragana-checkbox+.toggle-label{cursor:pointer;text-align:right;color:color-mix(in srgb,var(--dark) 90%,white);position:absolute;left:5%;transition:.5s;top:5px;font-family:noto}@media (max-width: 500px){.settings-container .settings-popup .hiragana-toggle #is-hiragana-checkbox+.toggle-label{transform:scale(.75);font-weight:700}}.settings-container .settings-popup .hiragana-toggle #is-hiragana-checkbox:checked{background:color-mix(in srgb,var(--light) 10%,transparent)}.settings-container .settings-popup .hiragana-toggle #is-hiragana-checkbox:checked:before{left:50%;background-color:color-mix(in srgb,var(--text) 10%,var(--light))}.settings-container .settings-popup .hiragana-toggle #is-hiragana-checkbox:checked+.toggle-label{text-align:right;position:absolute;left:55%}.settings-container .settings-popup .hiragana-toggle #is-hiragana-checkbox:before{content:"";position:absolute;width:50%;height:30px;border-radius:20px;top:0;left:0;background-color:var(--light);transform:scale(1.1);transition:.5s;outline:1px solid color-mix(in srgb,var(--text) 20%,transparent)}.settings-container .settings-popup input:not([type=checkbox]){background-color:color-mix(in srgb,var(--text) 10%,transparent);padding:5px;border-radius:5px;border:none;color:var(--text)}@media (max-width: 500px){.settings-container .settings-popup #attempts{min-width:50px}}.settings-container .settings-popup .setting-field{gap:10px;width:100%;display:flex;justify-content:space-between}.settings-container .settings-popup select{background-color:color-mix(in srgb,var(--text) 10%,transparent);padding:5px;border-radius:5px;border:none;color:var(--text);font-family:noto}.settings-container .settings-popup select option{font-family:noto;margin:40px;background:var(--background);color:var(--text)}.settings-container .settings-popup select option:hover{background-color:color-mix(in srgb,var(--text) 10%,transparent)}.settings-container .settings-popup #score-button{align-self:center;margin-bottom:15px;width:100%}.settings-container .settings-popup #score-button:hover{background-color:color-mix(in srgb,var(--text) 8%,transparent);cursor:pointer}.settings-container .settings-popup input[type=number]::-webkit-inner-spin-button{background-color:#b39e70}.settings-container .settings-popup .settings-buttons{display:flex;justify-content:space-around;width:100%}