@import "https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";body{margin:0;font-family:Roboto Mono;font-size:1.2em}#root{place-items:center;min-height:100dvh;display:grid}.loading{width:2rem;height:auto}.game{grid-template-columns:min-content auto min-content;gap:1em;display:grid}.game button{align-self:center}.game .score{grid-area:2/2/3/3;justify-self:center}.selector{grid-area:3/2/4/3}.selector>*{outline:3px solid purple}.flashcards{perspective:600px;grid-template-areas:"overlapping";display:grid;scale:1}.flashcards.flipped{transition:scale .4s cubic-bezier(.33,-.4,.7,-.58);scale:.9}.flashcards .card{grid-area:overlapping}.card{aspect-ratio:3/2;backface-visibility:hidden;-webkit-user-select:none;user-select:none;cursor:default;border:1px solid #d2d2d2;border-radius:1rem;place-items:center;width:20rem;padding:1em;display:grid;overflow:hidden}.flashcards:not(.flipped) .card{cursor:pointer}.flashcards:not(.flipped) .card:hover{cursor:pointer;border-color:#9292ff}.card.front{transform:rotateY(0)}.card.back{transform:rotateY(-180deg)}.flipped .card{transition:transform .45s cubic-bezier(0,.55,.45,1)}.flipped .card.front{transform:rotateY(180deg)}.flipped .card.back{transform:rotateY(0)}.card img{width:70%;height:auto;display:block}.card p{overflow-wrap:anywhere;text-align:center;width:100%}.card.correct{background-color:#c9e5c9}.card.incorrect{background-color:#e5c9d1}