*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}body{font-family:Red Hat Text,sans-serif;font-size:1.6rem;background-color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body>div{min-height:100vh;display:flex;flex-direction:column}body>div main{height:calc(100vh - 70px);text-align:center}h1,h2,h3{display:block;font-family:Red Hat Text,sans-serif;font-weight:500;color:#2e2eff}h1{font-size:3.6rem;text-transform:uppercase;margin:2.6rem 0}h2{font-size:2.8rem;margin:2rem 0}h3{font-size:2.2rem;margin:1.6rem 0}a{display:inline-block;font-weight:500;text-decoration:none}li{list-style:none}p{margin:1rem 0}img{display:block;width:100%;max-height:100%}button{display:inline-block;-webkit-user-select:none;user-select:none;font-family:Red Hat Text,sans-serif;font-size:1.6rem}button:hover{cursor:pointer}input,select,textarea{display:inline-block;border:none;font-family:Red Hat Text,sans-serif}textarea{display:block;resize:none}::placeholder{font-weight:400;color:gray}.header{height:40px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:100}.header .nav{position:relative;display:flex;justify-content:space-between;align-items:center;height:100%;width:100%;padding:0 1rem}@media screen and (min-width: 768px){.header .nav{padding:0 2rem}}.header .nav .logo_ctn{display:flex;height:32px;width:32px}@media screen and (min-width: 768px){.header .nav .logo_ctn{margin-left:1rem}}.header .nav .title{position:absolute;left:calc(50% - 60px);transform:translate(-50%) translate(60px);font-size:min(8vw,3.6rem);letter-spacing:2px;white-space:nowrap;-webkit-user-select:none;user-select:none;color:#1f2722}@media screen and (min-width: 768px){.header .nav .title{font-size:3.6rem;transform:translate(-50%) translate(60px) scaleX(1.3)}}.header .nav .toggle_theme_btn{position:absolute;top:6px;right:40px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;font-size:1.8rem;color:#1f2722;background-color:#fff;transition:color .3s}.header .nav .toggle_theme_btn:hover{color:#5858f6}.header .nav .menu{position:absolute;top:-16rem;left:0;right:0;display:flex;flex-direction:column;width:100%;padding:.8rem 0 1rem;background:url(/img/orange-blossom-small.jpg);background-blend-mode:darken;transition:transform 5s ease-out;z-index:101}@media screen and (min-width: 768px){.header .nav .menu{right:unset;width:200px;background:#8c8cff}}.header .nav .menu>li>a{display:block;width:calc(50% - .8rem);margin:.4rem auto;padding:.6rem 0;outline:1px solid #fff;outline-offset:-1px;border:none;border-radius:.6rem;font-family:Red Hat Text,sans-serif;font-size:1.6rem;font-weight:600;text-align:center;text-decoration:none;text-transform:uppercase;color:#5858f6;background-color:#fff;transition:all .4s}@media screen and (min-width: 768px){.header .nav .menu>li>a{width:calc(100% - 2rem)}}.header .nav .menu>li>a:hover{color:#fff;background-color:#5858f6}.header .nav .show_menu{transform:translateY(16rem) translateY(40px);transition:transform 5s ease-out}.burger_btn{position:absolute;top:2px;left:8px;display:flex;align-items:center;justify-content:center;height:36px;width:36px;border:none;border-radius:9px;color:var(--secondary-color);background-color:transparent;z-index:10;transition:color .4s}.burger_btn:hover{color:var(--tertiary-color-2)}.burger_btn>svg{font-size:2.4rem}.switch_lang_ctn{position:absolute;top:40px;transform:translateY(-40px) translateY(8px);right:0;display:flex;justify-content:center;width:40px}@media screen and (min-width: 768px){.switch_lang_ctn{left:unset;right:20px}}.switch_lang_ctn .current_lang_btn{width:24px;height:24px;border:none;border-radius:50%;outline:2px solid #b3b3b3;background-color:transparent;transition:all .3s;z-index:10}.switch_lang_ctn .current_lang_btn:hover{outline-color:#2e2eff}.switch_lang_ctn .current_lang_btn>img{width:100%;height:100%;border-radius:50%;object-fit:fit}.switch_lang_ctn .current_lang_btn>span{display:none;position:absolute;top:20px;right:-20px}.switch_lang_ctn .lang_menu{position:absolute;top:-6px;right:2px;width:36px;height:36px;padding:6px;border-radius:20px;background-color:#c6e8ff;transition:all .5s ease-out;z-index:120}.switch_lang_ctn .lang_menu .lang_ctn{display:flex;align-items:center}.switch_lang_ctn .lang_menu .lang_ctn+.lang_ctn{margin-top:12px}.switch_lang_ctn .lang_menu .lang_ctn .lang_txt{position:absolute;right:44px;display:inline-block;padding:2px 6px;border-radius:6px;white-space:nowrap;font-weight:600;text-align:right;-webkit-user-select:none;user-select:none;background-color:#c6e8ff}.switch_lang_ctn .lang_menu .lang_ctn .lang_btn{width:24px;height:24px;border:none;border-radius:50%;outline:2px solid #b3b3b3;background-color:transparent;transition:all .3s}.switch_lang_ctn .lang_menu .lang_ctn .lang_btn:hover{outline-color:#2e2eff}.switch_lang_ctn .lang_menu .lang_ctn .lang_btn>img{width:100%;height:100%;border-radius:50%;object-fit:fit}.switch_lang_ctn .lang_menu .lang_ctn .lang_btn>span{display:none;position:absolute;top:20px;right:-20px}.switch_lang_ctn .lang_menu .lang_ctn .grey_outline{outline-color:#626262}.show_lang_menu .lang_menu{height:148px;opacity:1;z-index:120}.show_lang_menu .lang_menu .lang_btn{display:inline-block}.hide_lang_menu .lang_menu{opacity:0;z-index:0}.hide_lang_menu .lang_menu .lang_btn{display:none}.footer{display:flex;flex-direction:column;align-items:center;height:30px;overflow:hidden;margin-top:auto;font-size:1.4rem;text-align:center;background-color:#fff}.footer p{display:block;font-size:1.2rem;color:gray}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;aspect-ratio:1}@media screen and (min-width: 768px){.spinner{width:80px}}.spinner>path:first-child{stroke:#5858f6}.spinner>path:last-child{stroke:#2e2eff;fill:#8c8cff;-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;-o-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@keyframes spin{0%{transform-origin:50% 50%;transform:rotate(0)}to{transform-origin:50% 50%;transform:rotate(360deg)}}.home{position:relative}@media screen and (min-width: 768px){.home{background:left/cover no-repeat url(/img/wave-big.jpg)}}.home>*{position:absolute;height:calc(100vh - 70px);width:100%}@media screen and (min-width: 768px){.home>*{max-width:600px;left:50%;transform:translate(-50%)}}.home .choose_mode{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:left/cover no-repeat url(/img/wave-small.jpg)}@media screen and (min-width: 768px){.home .choose_mode{background:none}}.home .choose_mode .level_txt{margin-top:-4rem;padding:8px 12px;font-size:3rem;font-weight:600;color:#00f;background-color:#fff}.home .choose_mode .main_btn{margin:2rem auto;font-weight:700;outline:10px solid white;box-shadow:0 0 20px #fff}@media screen and (min-width: 768px){.home .kanji_to_meaning_section{background-color:#fff}}.home .kanji_to_meaning_section .card_section{animation:1s ease-in-out fadein}.home .kanji_to_meaning_section .card_section .question_ctn{display:flex;align-items:center;justify-content:center;height:25vh;width:40vw;margin:2rem auto;border-radius:6px;font-family:"Noto Serif JP";font-weight:600;font-size:10rem;background-color:#c6e8ff}@media screen and (min-width: 768px){.home .kanji_to_meaning_section .card_section .question_ctn{width:160px}}.home .kanji_to_meaning_section .card_section .question_ctn>p{margin-bottom:3rem}.home .kanji_to_meaning_section .card_section .choices_ctn{display:flex;flex-direction:column;margin:20px}@media screen and (min-width: 768px){.home .kanji_to_meaning_section .card_section .choices_ctn{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;margin:0 auto;padding:0 4rem 2rem}}.home .kanji_to_meaning_section .card_section .choices_ctn .letters{width:100%;height:10vh}.home .kanji_to_meaning_section .card_section .choices_ctn .letters+.letters{margin-top:20px}@media screen and (min-width: 768px){.home .meaning_to_kanji_section{background-color:#fff}}.home .meaning_to_kanji_section .card_section{animation:1s ease-in-out fadein}.home .meaning_to_kanji_section .card_section .question_ctn{display:flex;align-items:center;justify-content:center;height:12vh;margin:2rem;border-radius:6px;font-weight:600;font-size:3.4rem;background-color:#c6e8ff}@media screen and (min-width: 768px){.home .meaning_to_kanji_section .card_section .question_ctn{height:80px}}.home .meaning_to_kanji_section .card_section .choices_ctn{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px}@media screen and (min-width: 768px){.home .meaning_to_kanji_section .card_section .choices_ctn{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;margin:0 auto;padding:0 4rem 2rem}}.home .meaning_to_kanji_section .card_section .choices_ctn .kanji{width:100%;height:30vh}@keyframes fadein{0%{opacity:0}to{opacity:1}}.infobar{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;padding:4px 20px;background-color:#cbcbff}@media screen and (min-width: 768px){.infobar{flex-direction:row;align-items:center}}.infobar .info_item{display:flex;align-items:center;margin:3px 0}.infobar .info_item:first-child{min-width:60%}@media screen and (min-width: 768px){.infobar .info_item:first-child{min-width:70%}}.infobar .info_item>span{font-size:1.4rem}.infobar .info_item>span:last-child{margin-left:4px;padding:1px 5px;border-radius:4px;font-weight:700;color:#00f;background-color:#e2e2fb}.letters,.kanji{position:relative;display:flex;align-items:center;justify-content:center;border:none;border-radius:20px;box-shadow:2px 2px 2px #444;background-color:#e2e2fb;transition:background-color .4s}@media screen and (min-width: 768px){.letters:hover,.kanji:hover{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border:6px solid #8c8cff}}.letters .text,.kanji .text{margin-bottom:3rem;font-family:"Noto Serif JP";font-size:10rem}.letters .text{margin:0;font-family:Red Hat Text,sans-serif;font-weight:600;font-size:3.6rem}.wrong{background-color:#b83d6e}.correct{background-color:#08d25c}.correct_blinking{animation:.6s ease-in-out infinite blinking}@keyframes blinking{50%{background-color:#08d25c}}.main_btn{display:block;margin:0 auto;padding:.8rem 1.2rem;border:none;border-radius:.6rem;font-weight:600;color:#fff;letter-spacing:.1rem;text-transform:uppercase;-webkit-user-select:none;user-select:none;background-color:#2e2eff;transition:opacity .3s}.main_btn:hover{cursor:pointer;opacity:.7}.gameover{display:flex;flex-direction:column;align-items:center;justify-content:center;background:center/cover no-repeat url(/img/girl-houses-small.jpg)}@media screen and (min-width: 768px){.gameover{background:linear-gradient(#55144c66,#55144c66),center/cover no-repeat url(/img/girl-houses-small.jpg)}}.gameover>div{margin:4rem;padding:2rem 2rem 3rem;border-radius:12px;background-color:#fff}.gameover>div>p{margin:.5rem 0;font-size:2rem}.gameover>div .gameover_txt{font-weight:700;color:#00f}.gameover>div .message{white-space:pre-wrap}.gameover>div .message>span{font-weight:600}.gameover>div .link{margin-top:1rem;padding:.8rem 1.2rem;border-radius:.6rem;font-weight:600;color:#fff;letter-spacing:.1rem;text-transform:uppercase;-webkit-user-select:none;user-select:none;background-color:#2e2eff;transition:opacity .3s}.gameover>div .link:hover{cursor:pointer;opacity:.7}.settings{width:90%;max-width:600px;height:100%;margin:0 auto}.settings>h2{margin-top:0;text-align:center}.settings_ctn{display:flex;align-items:center;padding:.5rem}.settings_ctn>button{margin-left:1rem}.switch_btn{position:relative;width:36px;height:20px;border-radius:10px;border:none;background-color:#b3b3b3;transition:background-color .3s,outline .1s}.switch_btn:hover{outline:2px solid #8c8cff}.switch_btn .thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background-color:#fff;transition:left .3s,background-color .3s}.toggled{background-color:#2e2eff}.toggled .thumb{left:calc(100% - 17px)}.about{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem 4rem;background:linear-gradient(#02ade780,#02ade780),url(/img/wave-small.jpg)}@media screen and (min-width: 768px){.about{background:linear-gradient(#02ade780,#02ade780),center/cover no-repeat url(/img/wave-big.jpg)}}@media screen and (min-width: 768px){.about>*{margin:2px 0;width:100%;max-width:600px}}.about h1{padding:0 .8rem;border-radius:6px;font-size:4.6rem;font-weight:400;color:#fff;text-shadow:0 0 6px #0000ff;background-color:#c6e8ffcc}@media screen and (min-width: 768px){.about h1{padding:1rem}}.about .info{margin-bottom:10rem;padding:2rem 1rem;border-radius:6px;text-align:left;background-color:#c6e8ffcc}@media screen and (min-width: 768px){.about .info{padding:4rem}}.about .info>div{display:flex;flex-direction:column;margin-bottom:1rem}@media screen and (min-width: 768px){.about .info>div{flex-direction:row;justify-content:space-between}}.about .info>div>span:first-child{font-weight:500}.about .info>div>span:last-child{text-align:right;color:#1f2722;text-shadow:0 0 1px #0000ff}.not_found{padding:calc(40px + 4rem) 2rem 0}.not_found p{color:#5858f6}.not_found p a{margin-left:.5rem;padding:.3rem .5rem;border:1px solid #b3b3b3;border-radius:4px;font-weight:500;color:#2e2eff;background-color:#c6e8ff;transition:all .5s}.not_found p a:hover{color:#1f2722;background-color:#b3b3b3}