.flashcard {
    perspective     : 1000px;
    position        : relative;
    background-color: transparent;
    color           : #FFF;
    width           : 44rem;
    max-width       : 100%;
    min-height      : 100px;
    aspect-ratio    : 1.9;
    border          : 0;
    cursor          : pointer;
}

.flashcard.rotate-hint {
    animation: rotateHint 3s ease 0s 1 normal forwards;
}

.flashcard .front-card {
    transform: rotateX(0deg);
}

.flashcard.flip .front-card {
    transform: rotateX(180deg);
}

.flashcard .back-card {
    transform: rotateX(-180deg);
}

.flashcard.flip .back-card {
    transform: rotateX(0deg);
}

.flashcard .front-card,
.flashcard .back-card {
    backface-visibility: hidden;
    position           : absolute;
    top                : 0;
    left               : 0;
    width              : 100%;
    height             : 100%;
    transform-style    : preserve-3d;
    border-radius      : 18px;
    transition         : transform 0.6s ease;
    background-color   : #142a5e;
    overflow-x         : hidden;
}

.flashcard .card-body .card-body {
    overflow-y: auto;
    height    : 80%;
    text-align: left;
}

.flashcard .card-body.front-card,
.flashcard .card-body.back-card {
    overflow: hidden;
}

.card-title {
    background-color: #0000004d;
    border-radius   : 10px;
    padding         : 10px;
    display         : flex;
    justify-content : space-between;
}

.card-title :nth-child(1),
.card-title :nth-child(2),
.card-title :nth-child(3) {
    flex: 1;
}

.card-title :nth-child(1),
.card-title :nth-child(2) {
    padding-top: 5px;
}

.card-title :nth-child(1) {
    text-align: left;
}

.card-title :nth-child(2) {
    text-align: center;
}

.card-title :nth-child(3) {
    text-align: right;
}

.flashcard .btn-flashcard {
    color: #FFF;
}

.flashcard .btn-flashcard:hover {
    color: rgb(155, 160, 182);
}

.flashcard .card-clickpointer {
    position           : absolute;
    bottom             : 10px;
    backface-visibility: hidden;
    animation          : scaleHint 3s ease 0s infinite normal forwards;
}

.flashcard blockquote {
    margin: 0;
}

.flashcard blockquote p {
    padding         : 15px;
    background-color: #0000001a;
    border-radius   : 5px;
    border-left     : 1px solid #919FC2;
}

.flashcard blockquote p::before {
    content: '\201C';
}

.flashcard blockquote p::after {
    content: '\201D';
}

@keyframes rotateHint {
    50% {
        transform: rotateX(0deg);
    }

    75% {
        transform: rotateX(22.5deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

@keyframes scaleHint {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(.7);
    }

    20% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}