/* stylesheet for all pages */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');




/* -- COLORS -- */

:root {
    --background-color: mintcream; /* also set in manifest.json */
    --font-color: rgb(17, 54, 33); /* also set as theme color in manifest.json and layout view */
    --level-color: #474747;
    --radical-color: rgb(130, 130, 223);
    --kanji-color: rgb(226, 91, 91);
    --vocabulary-color: rgb(168, 82, 181);

    --grade-pleasant-color: rgb(35, 35, 61);
    --grade-painful-color: rgb(32, 56, 32);
    --grade-death-color: rgb(59, 37, 29);
    --grade-hell-color: rgb(59, 59, 31);
    --grade-paradise-color: rgb(72, 44, 55);
    --grade-reality-color: black;

    --navbar-color: rgba(255, 255, 255, 0.815);
    --navbar-dropdown-color: rgba(46, 46, 46, 0.568);
    --menu-color: rgb(43, 43, 43);
    --hr-color: rgba(132, 132, 132, 0.171);

    /* vocabulary context table */
    --context-table-buttons-color: rgb(190, 190, 190);
    --context-table-activated-button-color: #555;

    /* main page */
    --main-grid-color: rgb(245, 245, 245);
    --lessons-color: rgb(240, 240, 97);
    --reviews-color:burlywood;
    --profile-color: rgb(96, 95, 108);
}
.radical-color { background-color: var(--radical-color); }
.kanji-color { background-color: var(--kanji-color); }
.vocabulary-color { background-color: var(--vocabulary-color); }
.level-color { background-color: var(--level-color); }




/* -- DEFAULT -- */

* {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-family: "Noto Sans JP", sans-serif;
    text-decoration: none;
    box-sizing: border-box;
    cursor: inherit;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
}

body {
    padding-bottom: 30px;
    background-color: var(--background-color);
    color: var(--font-color);
}

a, button { cursor: pointer; }
input:focus { outline: none; }

.flexbox--row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
    .flexbox--row--left { justify-content: flex-start; gap: 0.5rem; }
    .flexbox--row--center { justify-content: center; }
.flexbox--column {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
    .flexbox--column--center-vertical { justify-content: center; }

    .flexbox----wrap { flex-wrap: wrap; }

.shadow { box-shadow: 3px 3px 10px #00000082 inset; }

.hide { display: none; }
.show { display: block; }

.dropdown { position: relative; }
.dropdown-content { position: absolute; }

.white { color: white; }

.square {
    display: flex;
    width: 3.5rem;
    height: 3.5rem;
    text-align: center;
    line-height: 3.5rem;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: white;
}
    .square--big { width: 7rem; height: 7rem; line-height: normal; }
        .square--big__large-span { font-size: 2.4rem; }
        .square--big__small-span { font-size: 1.2rem; margin-bottom: 5px; }

hr { border-top: 1px solid var(--hr-color); margin: 30px 0 15px 0; }
h1 { font-size: 3rem; }
h2 { font-size: 2rem; margin-bottom: 10px;}
h3 { font-size: 1.2rem; margin-bottom: 10px; margin-top: 20px;}
p { font-size: 1.2rem; }

section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.svg-radical { width: 2rem; height: 2rem; }
    .svg-radical--big { width: 3.4rem; height: 3.4rem; }


.loader { /* imported code */
    width: 60px;
    aspect-ratio: 4;
    --c: var(--font-color) 90%,#0000;
    background: 
        radial-gradient(circle closest-side at left  6px top 50%,var(--c)),
        radial-gradient(circle closest-side                     ,var(--c)),
        radial-gradient(circle closest-side at right 6px top 50%,var(--c));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: l4 1s infinite alternate;
}
@keyframes l4 {
    to{width:25px;aspect-ratio: 1}
}



input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}




/* -- NAVBAR -- */

.navbar {
    background-color: var(--navbar-color);
    position: sticky;
    top: 0;
    width: 100%;
    padding: 15px 10%;
    margin-bottom: 30px;
    box-shadow: 0 -5px 20px;
    z-index: 100000;
}
    .navbar__nav { width: 40%; }
        .navbar__logo__container { height: 1rem; }
        .navbar__logo { width: 3.2rem; height: 3.2rem; }
        .navbar__button {
            font-size: 1.2rem;
        }
            .navbar__button:hover { text-decoration: underline #0000004e 2px; }
        .navbar__dropdown-content {
            top: 2rem;
            padding: 5px 20px 20px 20px;
            background-color: var(--navbar-dropdown-color);
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.468);
        }
            .navbar__dropdown-content__grade { font-size: 1.3rem; }
    .navbar__search {
        width: 20%;
        padding: 5px;
        border: 2px solid var(--font-color);
        font-size: 1rem;
    }
    .navbar__mobile-menu { display: none; }
        .navbar__mobile-menu__button div {
            background-color: var(--font-color);
            width: 35px;
            height: 3px;
            margin: 6px 0;
        }
        .navbar__mobile-menu__content {
            position: fixed;
            height: 100%;
            width: 0;
            top: 0;
            right: 0;
            transition: 0.5s;
            background-color: var(--menu-color);
        }
            .navbar__mobile-menu__content * { transition: 0.5s; }
            .navbar__mobile-menu__heading { margin: 20px 25px; }
                .navbar__mobile-menu__search {
                    width: 50%;
                    padding: 0.5rem;
                    font-size: 1.5rem;
                    height: 3rem;
                    line-height: 1.5rem;
                    border: 2px solid white;
                    background-color: rgba(255, 255, 255, 0.042);
                }
                .navbar__mobile-menu__close { font-size: 40px; }
            .navbar__mobile-menu__grades {
                margin: 50px;
                display: grid;
                gap: 15px 15px;
                justify-content: center;
                transition: 0.5s;
            }
                .navbar__mobile-menu__grades a { width: 0; }




/* -- PAGE CONTENTS (SECTIONS) -- */

.title-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
    .title-container__grade { margin-right: 1.5rem; }
    .title-container__vocabulary-character { width: auto; padding: 0.75rem; white-space: nowrap; }

.element-ul {
    list-style-type: none;
    display: flex;
    gap: 5px;
}
    .element-ul--squares {
        flex-flow: row wrap;
        justify-content: flex-start;
    }
    .element-ul--rows {
        flex-flow: column nowrap;
        justify-content: center;
        gap: 10px;
    }

    .element-ul__li { width: 8rem; height: 8.5rem; color: white; }
        .element-ul__li--row { width: 100%; height: 4rem; }

        .element-ul__li__a {
            width: 100%;
            height: 100%;
            justify-content: center;
            padding: 1rem;
        }
            .element-ul__li__a--row { justify-content: space-between; }

            .element-ul__li__character { font-size: 3.4rem; }
            .element-ul__li__reading { font-size: 0.8rem; }
            .element-ul__li__name { font-size: 1rem; margin-bottom: 1rem; white-space: nowrap; }
                .element-ul__li__name--radical { margin-bottom: 0.5rem; }

            .element-ul__li__character--row { font-size: 2rem; flex: 1.5; line-height: 1rem; }
            .element-ul__li__reading--row { font-size: 1.2rem; flex: 1; }
            .element-ul__li__name--row { font-size: 1.4rem; flex: 1; text-align: right; margin: 0; }

.radical-combination-ul { list-style-type: none; gap: 20px; flex-wrap: wrap; }
    .radical-combination-ul__li__a {
        width: 100%;
        height: 100%;
        gap: 10px;
    }
    .radical-combination-ul__li__span { font-size: 1.3rem; }

.hint {
    width: 70%;
    margin: 20px 30px;
    padding: 15px;
    box-shadow: 3px 3px 10px #00000082 inset;
}
    .hint__p { color: rgba(0, 0, 0, 0.686); }

.readings-container__div { flex: 1; }
    .readings-container__div--grayed-out { color: rgba(0, 0, 0, 0.288); }
    .readings-container__p--bold, .vocabulary-reading__p--bold { font-weight: bold; font-size: 1.5rem; }
        .vocabulary-reading__p--aux { font-weight: normal; font-size: 1.2rem; }

.context-table { align-items: normal; gap: 0; }
    .context-table__patterns-of-use {
        border-right: 1px solid var(--hr-color);
    }   
        .patterns-of-use__h3 { margin-right: 40px; }
        .patterns-of-use__button {
            width: 100%;
            height: 2.5rem; 
            padding: 5px;
            text-align: left;
            background-color: var(--context-table-buttons-color);
            color: black;
            margin-bottom: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            font-size: 1.2rem;
            position: relative;
        }
            .patterns-of-use__button--activated {
                background-color: var(--context-table-activated-button-color);
                color: white;
            }

            .patterns-of-use__triangle {
                width: 0;
                height: 0;
                border-top: 1.25rem solid transparent;
                border-left: 2.5rem solid var(--context-table-activated-button-color);
                border-bottom: 1.25rem solid transparent;
                position: absolute;
                background: none;
                top: 0;
                left: 100%;
                right: 0px;
                bottom: 0;
            }
    .context-table__common-word-combinations {
        padding-left: 50px;
        border-left: 1px solid var(--hr-color);
        box-shadow: 10px 0px 10px -10px rgba(0, 0, 0, 0.152) inset;
    }
        .common-word-combinations__ul { list-style-type: none; }

.context-sentences__p--english, .common-word-combinations__p--english { margin-bottom: 20px; }




/* -- LOGIN PAGE -- */

.signin {
    width: 200px;
    height: 100px;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}
    .signin__input {
        display: block;
        padding: 5px;
        width: 100%;
        border: 2px solid var(--font-color);
        margin-bottom: 10px;
    }
    .signin__checkbox {
        width: 20px;
        height: 20px;
        background-color: rgb(239, 81, 81);
        display: inline-block;
        margin-right: 5px;
    }
        .signin__checkbox:checked { background-color: rgb(114, 238, 72); }
    .signin__button {
        border: 2px solid var(--font-color);
        padding: 3px;
        background-color: rgb(198, 241, 198);
    }




/* -- HOME PAGE -- */

.main-search {
    width: 100%;
    font-size: 1.3rem;
    padding: 7px;
    border: 2px solid var(--font-color);
}

.main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    margin: 20px 5px;
    border: 2px solid var(--hr-color);
    padding: 20px;
    background-color: var(--main-grid-color);
}
    .main-grid__title, .main-grid__lessons, .main-grid__reviews, .main-grid__profile {
        height: 180px;
        padding: 10px;
    }
    .main-grid__profile { color: white; }
    .main-grid__h1 { font-size: 4rem; }
    .main-grid__h3 { margin: 0; }

    .main-grid__lessons, .main-grid__reviews {
        color: rgba(0, 0, 0, 0.751);
        align-items: flex-start;
        justify-content: space-between;
        padding: 15px;
    }
        .main-grid__lessons { background-color: var(--lessons-color); }
        .main-grid__reviews { background-color: var(--reviews-color); }
            .main-grid__quiz-count-title { font-size: 1.8rem; }
            .main-grid__start-quiz-a { font-size: 2rem; }
                .main-grid__start-quiz-a:hover { color: rgba(0, 0, 0, 0.615); }
        .main-grid__profile { background-color: var(--profile-color); }
            .main-grid__profile__username { text-align: right; }
            .main-grid__profile__buttons { justify-content: space-evenly; height: 70%; }
                .main-grid__profile__button {
                    font-size: 1.2rem;
                    border: 2px solid white;
                    padding: 5px;
                }

.current-grade-level { margin-bottom: 20px; flex-wrap: wrap; }
    .current-grade-level .square { margin: 0 5px; }

.level-progress--container { width: 100%; height: 20px; border: 2px solid var(--font-color); }
    .level-progress { height: 100%; background-color: var(--font-color); } /* width is set in the backend */




/* -- SETTINGS -- */

.settings__form * { margin: 3px; }
    .settings__form input {
        text-align: center;
        border: 1px solid var(--font-color);
    }
        .settings__form__submit { margin: 15px; padding: 3px; }




/* -- LESSONS AND REVIEWS -- */

.quiz__header {
    height: 170px;
    margin-bottom: 30px;
    background-color: var(--lessons-color);
    position: relative;
}
    .quiz__header__progress--container {
        width: 100%;
        height: 10px;
        background-color: rgba(0, 0, 0, 0.11);
        position: absolute;
    }
        .quiz__header__progress { background-color: black; height: 100%; }
    .quiz__header__logo--container { position: absolute; margin: 5px; top: 10px; }
        .quiz__header__logo { width: 25px; height: 25px; }
    .quiz__header__container { width: 100%; height: 100%; }
        .quiz__header__title-number { font-size: 4.5rem; }
        
.quiz__iframe {
    width: 70%; /* height is set in lessons.js and reviews.js */
    border: 2px solid var(--hr-color);
}



/* -- LESSONS -- */

.quiz__header--lessons { background-color: var(--lessons-color); }
    .lessons__header__triangle {
        width: 0;
        height: 0;
        margin: 20px;
        border-top: 1.25rem solid transparent;
        border-bottom: 1.25rem solid transparent;
    }
        .lessons__header__triangle--left { border-right: 2.5rem solid var(--font-color); }
        .lessons__header__triangle--left:hover { border-right-color: rgba(0, 0, 0, 0.36); }
        .lessons__header__triangle--right { border-left: 2.5rem solid var(--font-color); }
        .lessons__header__triangle--right:hover { border-left-color: rgba(0, 0, 0, 0.36); }



/* -- REVIEWS -- */

.quiz__header--reviews {
    background-color: var(--reviews-color);
    margin: 0;
}
    .reviews__header__title-number { font-size: 4.5rem; }
.reviews__type-stripe { width: 100%; height: 25px; } /* background-color is set in reviews.js */

.reviews__question { padding: 10px; }
    .reviews__question__text { font-size: 2rem; text-align: center; }
    .reviews__question__text-input {
        margin: 10px;
        border: 2px solid var(--font-color);
        background-color: rgba(255, 242, 0, 0.123);
        padding: 10px;
        font-size: 1.5rem;
    }
    .reviews__question__canvas {
        margin: 10px;
        border: 2px solid black;
        background-color: rgba(255, 242, 0, 0.123);
        touch-action: none;
    }
    .reviews__question__submit { font-size: 2rem; }
        .reviews__question__submit:hover { color: rgb(66, 26, 117); }

    .reviews__correct-answer--container h2 { text-align: center; margin: 0; }
    .reviews__correct-answer--container p { text-align: center; }
    .reviews__question__rating-button {
        margin: 10px;
        padding: 8px;
        font-size: 1.4rem;
        color: white;
        border-radius: 3px;
    }
        .reviews__question__rating-button:hover { background-color: black; }

        .reviews__question__rating-button--again { background-color: rgb(67, 10, 10); }
        .reviews__question__rating-button--hard { background-color: rgb(78, 78, 15); }
        .reviews__question__rating-button--good { background-color: rgb(14, 46, 14); }
        .reviews__question__rating-button--easy { background-color: rgb(9, 9, 28); }
    
    .reviews__question__show-iframe { font-size: 2rem; color: rgba(0, 0, 0, 0.57); }
        .reviews__question__show-iframe:hover { color: rgba(0, 0, 0, 0.804); }





/* -- CUSTOM FLASHCARDS -- */

.custom__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    line-height: 70px;
    padding: 0 20px;
    margin-bottom: 15px;
    font-size: 1.4rem;
}
    .custom__new-button {
        background-color: var(--lessons-color);
        font-size: 1.6rem;
    }
    .custom__delete {
        width: 70px;
        height: 70px;
        background-color: #474747;
        margin-bottom: 15px;
    }
        .custom__delete svg { width: 40px; }

.custom__type-square-container { gap: 25px; }
    .custom__type-square-container div { flex: 1; cursor: pointer; }
.custom__onlykana-container {
    display: none;
    margin-top:5px;
    align-items: center;
    gap: 5px;
}
    .custom__onlykana-checkbox {
        width: 30px; height: 30px;
        border: 3px solid #F0F0F0;
        background-color: red;
    }
        .custom__onlykana-checkbox:checked { background-color: green; }
    .custom__name-input {
        width: 100%;
        border-bottom: solid 1px #00000060;
        font-size: 1.8rem;
        padding: 5px;
    }
.custom__readings-meanings-container { width: 100%; align-items: start; }
    .custom__readings-meanings-container > div { flex: 1; }
        .custom__readings-meanings-container input {
            width: 80%;
            border-bottom: solid 1px #00000060;
            padding: 5px;
        }
.custom__submit {
    font-size: 1.7rem;
    background-color: var(--lessons-color);
    padding: 10px;

}









@media (max-width: 1200px){
    section { max-width: 1000px; }
    .navbar__dropdown-content { width: 160px; height: 420px; }
    .navbar__dropdown-content__div { flex-flow: column wrap; height: 100%; margin: 0 auto; }
    .navbar__dropdown-content a {
        margin: 0;
    }
}

@media (max-width: 1000px){
    section { max-width: 800px; }
    .navbar__nav {
        width: 60%;
    }
    .context-sentences__p, .common-word-combinations__p { font-size: 1rem; }
    .element-ul__li__name--row { font-size: 1.1rem;}
}

@media (max-width: 800px){
    section { max-width: 600px; }
    .navbar__dropdown, .navbar__search { display: none; }
    .navbar__mobile-menu { display: block; }
    .element-ul__li--remove-reading .element-ul__li__reading--row { display: none; }
    .hint {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
    .patterns-of-use__button { font-size: 0.9rem; white-space: nowrap; }
    .main-grid { display: flex; flex-flow: column nowrap; }
        .main-grid__title { order: 1; }
        .main-grid__lessons { order: 2; }
        .main-grid__reviews { order: 3; }
        .main-grid__profile { order: 4; }
    .current-grade-level { white-space: nowrap; }
        .current-grade-level .square--big { width: 4rem; height: 4rem; }
            .current-grade-level .square--big__large-span { font-size: 1.5rem; }
            .current-grade-level .square--big__small-span { font-size: 0.6rem; }
        .current-grade-level br { display: block; }
    .lessons__header__triangle--left:hover { border-right-color: var(--font-color); }
    .lessons__header__triangle--right:hover { border-left-color: var(--font-color); }
    .reviews__question__submit:hover { color: var(--font-color); }
}

@media (max-width: 650px){
    section { max-width: 400px; }
    .grade-page-levels-container { flex-wrap: wrap; }
    .element-ul__li__name--row { font-size: 0.95rem; }
    /* .element-ul elements are changed to .element-ul--rows in script.js */
    .hint__p { font-size: 0.9rem; }
    .svg-radical--big { width: 2rem; height: 2rem; }
    .main-grid__profile h2 { font-size: 1.3rem; }
    .main-grid__profile__buttons { flex-wrap: wrap; }
        .main-grid__profile__button { font-size: 1rem; padding: 3px; flex: 1; margin: 5px;}
    .quiz__header { height: 100px; }
        .quiz__header__container h3 { margin: 0; }
            .quiz__header__title-number { font-size: 2rem; }
    .quiz__iframe { width: 90%; }
    .reviews__question { padding: 3px; }
        .reviews__question__text { font-size: 1.4rem; margin: 0 20px; }
        .reviews__question__text-input { width: 75%; }
        .reviews__question__canvas { width: 200px; height: 200px; } /* resizing vocabulary in reviews.js */
    .reviews__correct-answer--container h2 { margin: 0 20px; }
    .reviews__question__rating-button--container * { margin: 5px; }
    .custom__item, .custom__delete { height: 50px; }
        .custom__item { font-size: 1rem; }
        .custom__delete { width: 50px; }
            .custom__delete svg { width: 30px; }
    .custom__type-square-container { gap: 10px; }
        .custom__type-square-container span { font-size: 0.8rem; }
    .custom__readings-meanings-container h2 { font-size: 1.7rem; }
}