:root{--color-main: #efd6ff;--color-dark: #402d4e;--color-comp: #007663;--color-acct: #fffade;--color-incorrect: #a63b3b;--color-correct: #387028;--color-blue: #2a52be;--fcolor-main: #efd6ff55;--fcolor-dark: #402d4e55;--fcolor-comp: #00766355;--fcolor-acct: #fffade55}*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}@font-face{font-family:radical;src:url(/assets/JapaneseRadicals-Regular-C1q4I8Lw.otf) format("opentype")}*:lang(jp){font-family:Noto Sans JP,radical,sans-serif;font-size:2rem;font-weight:580}html{background-color:#fff;color:#000}@media (prefers-color-scheme: dark){html{background-color:#000;color:#fff}}body{height:90vh;width:100vw}body main{height:100%;width:100%;display:flex;justify-content:center;flex-direction:column}dialog{justify-self:center;align-self:center;border:none;border-radius:1rem}dialog::backdrop{background-color:var(--fcolor-main)}button{height:2rem;width:25%;align-self:center;border:unset;color:#fff;font-size:1.5rem;box-shadow:0 0 1rem .2rem #a9a9a9;margin-bottom:2rem}.buttonArray{display:flex;justify-content:space-between}.mainButtonArray{align-self:center;width:75%}.mainButtonArray .chooseSetButton{background-color:var(--color-blue)}.mainButtonArray .shuffleButton{background-color:var(--color-incorrect)}.mainButtonArray .searchButton{background-color:var(--color-correct)}.setSelectionModal{width:30%}.setSelectionModal .setList{width:100%;text-align:center;overflow:auto;border:none;background-color:var(--color-dark);color:#fff;padding:1rem}.setSelectionModal .setList option{text-align:center;font-size:1.5rem;padding:.5rem;border-radius:1rem}.setSelectionModal .setList option:hover{background-color:var(--fcolor-main)}.setSelectionModal .setList option:checked{background-color:var(--fcolor-main)}.setSelectionModal .setList optgroup{font-size:1.7rem;text-align:left;padding:1rem}.searchModal{position:absolute;top:-80%;height:20%;width:75%;background-color:transparent}.searchModal .searchBar{position:absolute;width:90%;height:2rem;top:calc(50% - 1rem);left:5%;justify-self:center;border:none}.searchModal .searchBar .searchInput{position:absolute;left:0;width:90%;height:100%;font-size:1.5rem;border:2px #000 solid;outline:none}.searchModal .searchBar .searchButton{position:absolute;right:0%;width:10%;height:100%;background-color:var(--color-main);border:2px #000 solid;border-left:none;color:#000;font-size:1.3rem;box-shadow:none}.cardStack{position:relative;height:80%;width:75%;align-self:center;border-radius:10px;font-size:1.5rem;margin-top:2rem}.cardStack .buttonArray{position:absolute;bottom:0;left:0;width:100%}.cardStack .buttonArray .flipButton{background-color:var(--color-blue)}.cardStack .buttonArray .nextButton{background-color:var(--color-correct)}.cardStack .buttonArray .prevButton{background-color:var(--color-incorrect)}.cardStack .cardContainer{position:absolute;top:0;left:0;height:85%;width:100%;transition:transform 1.5s;transform-style:preserve-3d;box-shadow:0 0 1rem .2rem var(--color-dark)}.cardStack .cardContainer .cardFront,.cardStack .cardContainer .cardBack{height:100%;width:100%;backface-visibility:hidden}.cardStack .cardContainer .cardFront{position:absolute;display:flex;align-items:center}.cardStack .cardContainer .cardFront h2{width:100%;text-align:center;font-size:30vh}.cardStack .cardContainer .cardBack{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;transform:rotateY(180deg)}.cardStack .cardContainer .cardBack h2{position:absolute;top:0;height:10%;width:100%;font-size:2.5rem;text-align:center}.cardStack .cardContainer .cardBack .dataContainer{position:absolute;top:10%;left:0;height:90%;width:40%;padding:0 1rem 1rem}.cardStack .cardContainer .cardBack .dataContainer .dataGrid{height:100%;width:100%;display:grid;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(2,1fr)}.cardStack .cardContainer .cardBack .dataContainer .dataGrid ul{display:flex;flex-direction:column;padding-top:.5rem;list-style:none;border-width:0 1px 1px 1px;border-color:var(--color-comp);border-style:solid;overflow:auto}.cardStack .cardContainer .cardBack .dataContainer .dataGrid ul li{flex:0;padding-left:1rem;padding-bottom:.5rem}.cardStack .cardContainer .cardBack .dataContainer .dataGrid ul:first-of-type{border-width:1px 1px 1px 1px}.cardStack .cardContainer .cardBack .dataContainer .dataGrid .rowHeader{display:flex;border-width:0 0 1px 1px;border-color:var(--color-comp);border-style:solid}.cardStack .cardContainer .cardBack .dataContainer .dataGrid .rowHeader h3{flex:1;text-align:center;align-self:center}.cardStack .cardContainer .cardBack .dataContainer .dataGrid .rowHeader:first-of-type{border-width:1px 0 1px 1px}.cardStack .cardContainer .cardBack .dataContainer .dataGrid .rowHeader:nth-of-type(odd){background-color:var(--color-main)}.cardStack .cardContainer .cardBack .dataContainer .dataGrid .rowHeader:nth-of-type(2n){background-color:var(--color-acct)}.cardStack .cardContainer .cardBack .videoContainer{position:absolute;height:248px;width:248px;top:10%;left:calc(50% + (50% - 248px)/2)}.cardStack .cardContainer .cardBack .examplesContainer{position:absolute;top:calc(10% + 300px);left:40%;width:60%;height:calc(90% - (10% + 250px));overflow:auto;text-align:center;padding-right:.5rem}.cardStack .cardContainer .cardBack .examplesContainer summary{font-style:italic;padding-bottom:1rem}.cardStack .cardContainer .cardBack .examplesContainer table{width:100%}.cardStack .cardContainer .cardBack .examplesContainer table th{background-color:var(--color-acct)}.cardStack .cardContainer .cardBack .examplesContainer table tr:nth-of-type(2n){background-color:var(--color-acct)}@media (prefers-color-scheme: dark){dialog{background-color:#000;color:#fff}dialog::backdrop{background-color:var(--fcolor-dark)}button{box-shadow:0 0 1rem .2rem var(--color-main)}.setSelectionModal .setList{background-color:var(--color-comp);color:#fff}.setSelectionModal option:hover{background-color:var(--fcolor-comp)}.searchModal .searchBar .searchInput{border:2px #fff solid}.searchModal .searchBar .searchButton{background-color:var(--color-comp);border:2px #fff solid;border-left:none}.searchModal .searchBar .searchButton i{color:#fff}.cardStack .cardContainer{border:1px solid var(--color-main);box-shadow:.5rem .5rem 2rem .05rem var(--color-main)}.cardStack .cardContainer .cardBack .dataContainer .dataGrid ul,.cardStack .cardContainer .cardBack .dataContainer .dataGrid .rowHeader{border-color:var(--color-acct)}.cardStack .cardContainer .cardBack .dataContainer .dataGrid .rowHeader:nth-of-type(odd){background-color:var(--color-dark)}.cardStack .cardContainer .cardBack .dataContainer .dataGrid .rowHeader:nth-of-type(2n){background-color:var(--color-comp)}.cardStack .cardContainer .cardBack .videoContainer video{filter:invert(100%)}.cardStack .cardContainer .cardBack .examplesContainer table th{background-color:var(--fcolor-acct)}.cardStack .cardContainer .cardBack .examplesContainer table tr:nth-of-type(2n){background-color:var(--fcolor-acct)}}@media (max-width: 1000px){button{font-size:1rem;font-weight:700}.cardStack .cardContainer .cardBack{justify-content:unset;overflow:auto}.cardStack .cardContainer .cardBack h2{position:unset}.cardStack .cardContainer .cardBack .dataContainer{position:unset;width:100%}.cardStack .cardContainer .cardBack .videoContainer{position:unset}.cardStack .cardContainer .cardBack .examplesContainer{position:unset;top:unset;left:unset;height:unset;width:100%;overflow:unset;padding-right:unset}.cardStack .cardContainer .cardBack .examplesContainer summary{padding-top:1rem}}