.flashcard {
    min-height: 300px;
    perspective: 1000px;
    cursor: pointer;
}

.flashcard {
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

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

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

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

.vocabulary-item .card-body {
   display: grid !important;
   grid-template-columns: 1fr 1fr auto;
   gap: 20px;
}

.vocabulary-item .question,
.vocabulary-item .answer {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 6px;
}

.vocabulary-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.vocabulary-item:hover {
    background-color: rgba(84, 191, 160, 0.05);
}

.alert-success {
    background-color: rgba(84, 191, 160, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.alert-danger {
    background-color: rgba(241, 137, 122, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-switch .form-check-input {
    height: 1.5em;
    cursor: pointer;
}

#alertModal {
    z-index: 1060;
}