.flashcard{display:flex;justify-content:center;align-items:center;position:relative;transform-style:preserve-3d;transition:.15s;height:350px;width:350px;box-shadow:0 2px 4px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.1),0 8px 16px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.1);border-radius:12px;cursor:pointer;transform:perspective(1000px) rotateY(var(--rotate-y,0))}.dark .flashcard{box-shadow:0 2px 4px hsla(0,0%,100%,.1),0 4px 8px hsla(0,0%,100%,.1),0 8px 16px hsla(0,0%,100%,.1),0 16px 32px hsla(0,0%,100%,.1)}.flashcard.is-flipped,.is-flipped{--rotate-y:180deg}.flashcard .card-back,.flashcard .card-front{position:absolute;padding:1rem;backface-visibility:hidden}.flashcard .card-back{transform:rotateY(180deg)}