:root{--background: #FFFFFF;--foreground: #000000}@media (prefers-color-scheme: dark){:root{--background: #121212;--foreground: #FFFFFF}}body{color:var(--foreground);background:var(--background);font-family:Arial,Helvetica,sans-serif}#root{max-width:100%;margin:0;padding:0;text-align:center}body{color:var(--foreground);background:var(--background);font-family:Arial,Helvetica,sans-serif;margin:0;padding:0}.MuiCard-root{display:flex;flex-direction:column;justify-content:space-between;height:100%}.MuiCardActionArea-root{display:flex;flex-direction:column;height:100%;justify-content:space-between}.flip-card{position:relative;width:100%;min-width:20em;min-height:10em;margin:30px;cursor:pointer;transform-style:preserve-3d;transition:transform .6s}.flip-card .text{margin:1.5em;text-align:center}.flip-card.flipped{transform:rotateY(180deg)}.flip-card .front,.flip-card .back{position:absolute;backface-visibility:hidden;width:100%;height:100%;display:flex;overflow:hidden;justify-content:center;align-items:center;border-radius:10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.flip-card .back{transform:rotateY(180deg)}.flip-card.correct .back{background:#4caf50;color:#fff}.flip-card.incorrect .back{background:#f44336;color:#fff}