.perspective-1000{perspective:1000px}.backface-hidden{backface-visibility:hidden}.rotate-y-180{transform:rotateY(180deg)}.transform{transform-style:preserve-3d}.flashcard{width:100%;max-width:510px;height:200px;cursor:pointer;background-color:#fff;position:relative}.flashcard>.back,.flashcard>.front{width:100%;height:100%;position:absolute;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2rem;border:2px solid #fdfdfd;border-radius:10px;transition:transform .6s;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#000}.flashcard>.back,.flashcard>.front{background-color:#fff}.flashcard.flipped>.front,.flashcard>.back{transform:rotateY(180deg)}.flashcard.flipped>.back{transform:rotateY(0)}.flashcard .example{font-size:1rem;margin-top:10px}.flashcard .answer{font-size:1.2rem;margin-top:10px}.flashcard{perspective:1000px}.back,.front{width:100%;height:100%;backface-visibility:hidden;position:absolute;top:0;left:0;border:2px solid #ccc;border-radius:8px;transition:transform .6s ease-in-out}.back,.front{background-color:#fff}.back,.flashcard .rotate-y-180{transform:rotateY(180deg)}