body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #ffffff;
}

.flashcard-container {
    perspective: 1000px;
}

.flashcard {
    width: 200px;
    height: 300px;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.flipped {
    transform: rotateY(180deg);
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.front,
.back {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    backface-visibility: hidden;
    border: 2px solid #000;
    border-radius: 10px;
}

.front {
    background-color: #3498db;
    color: #fff;
}

.back {
    background-color: #e74c3c;
    color: #fff;
    transform: rotateY(180deg);
}