@font-face{font-family:NotoSans;src:url(/fonts/NotoSansSC-Regular.otf) format("opentype")}@font-face{font-family:MaShanZheng;src:url(/fonts/MaShanZheng-Regular.ttf) format("opentype")}:root{--font: NotoSans, sans-serif;--character-font: NotoSans;--light: rgb(248, 244, 241);--light-highlight: rgb(216, 196, 192);--mid: rgb(178, 169, 177);--dark-highlight: rgb(76, 92, 104);--dark: rgb(34, 34, 59);--font-color: var(--dark-highlight)}body{margin:0;background-color:var(--light)}*{box-sizing:border-box}p,h1,h2,h3,h4{color:var(--font-color);font-family:var(--font)}h2.character-text{font-family:var(--character-font)}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 48}#app{height:100vh;width:100vw;display:flex;justify-content:space-between}#side-bar{padding-top:50px;display:block;background-color:var(--light-highlight)}#side-bar span{display:block;padding:10px;font-size:32px;margin:5px;color:var(--light)}#side-bar span{cursor:pointer}#side-bar .selected{background-color:var(--light);color:var(--mid);border-radius:50px}#list{height:100vh;display:flex;flex-direction:column;overflow:scroll;-ms-overflow-style:none;scrollbar-width:none;width:-webkit-fill-available}#list::-webkit-scrollbar{display:none}.card{background-color:var(--light);padding:20px;margin:20px auto;border-radius:10px;width:600px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-top{display:flex;justify-content:space-between}.card h2{margin:0;padding:0;font-size:xxx-large}.card h3{margin:0;padding:0;font-size:x-large;text-align:center}.card p{font-size:large}.card hr{width:calc(100% + 40px);padding:0;margin:0 -20px;border:1px solid var(--mid)}.card .chip{border:2px solid var(--light-highlight);color:var(--light-highlight);padding:5px 15px;border-radius:20px;width:max-content;transition:background-color .25s,color .25s;cursor:pointer;font-family:sans-serif}.card .chip:hover,.card .chip.complete{background-color:var(--light-highlight);color:var(--light)}@media only screen and (max-width: 670px){#side-bar{padding:0;height:fit-content;width:100vw;display:flex;background-color:var(--light-highlight);flex-direction:row;justify-content:space-evenly;align-items:flex-start;position:absolute}#side-bar span{display:block;padding:5px;font-size:25px;margin:5px;color:var(--light)}.card-top{margin:0 -15px}.card-top div{width:50%}.card{width:95%}.card .word-container{display:flex;justify-content:center;flex-wrap:wrap}.card .character-text{text-align:center}}.drawover-canvas{margin-right:-100px}line{stroke:var(--mid);z-index:-1}svg.char-container{width:100px;height:100px;border:1px solid var(--mid);cursor:crosshair}svg.char-container:not(.first){border-left:0px}.sound_button{cursor:pointer}p{margin:10px 0}.class-head{display:flex;align-items:center}#word-id{font-size:10pt;display:inline}.option{border:1px solid var(--light-highlight);border-radius:10px;margin:10px 0;display:flex;justify-content:space-between;align-items:center;padding:0 10px;cursor:pointer;transition:.5s}.option:hover{background-color:var(--light-highlight)}.hidden{visibility:hidden}#quiz-start-button{height:fit-content;border:3px solid var(--light-highlight);border-radius:20px;padding:10px 30px;font-family:var(--font);cursor:pointer;transition:.5s;margin:50px auto;width:fit-content}#quiz-start-button:hover{background-color:var(--light-highlight)}.input-container{width:100%;display:flex;justify-content:space-around}#search-container{margin-top:100px}#search-input{margin-top:10px;margin-left:10px}label{margin-top:50px}.button-container{width:100%;display:flex;padding:20px}button{margin:auto}button.hidden{visibility:hidden}.db-access-button{padding:10px;background-color:var(--light-highlight);color:var(--light);width:fit-content;height:fit-content;border-radius:50px;cursor:pointer}@keyframes rotation{0%{transform:rotate(359deg)}to{transform:rotate(0)}}.uploading{animation:rotation 2s infinite linear}.font-pick-button{padding:10px;background-color:var(--light-highlight);color:var(--light);width:fit-content;border-radius:50px;display:flex;align-items:center;font-size:large;margin-left:10px;cursor:pointer}.font-pick-button.selected{background-color:var(--mid);color:var(--light)}#settings-container{width:95%;font-size:small;margin:auto auto 50px;padding:10px 0}.setting{display:flex;justify-content:space-between;align-items:center;height:62px;padding:.5em 0;border-bottom:1px solid var(--mid)}.setting p{margin:10px 0;margin-block-end:0px;margin-block-start:0px}.setting-group{margin-top:50px;border-left:4px solid var(--mid);padding-left:10px}.setting-group h4{margin-bottom:0}@media only screen and (min-width: 670px){.setting-group{width:500px}#settings-container{display:flex;flex-direction:column;align-items:center}}