/* Custom CSS Style */
.custom-border {
    border-bottom: 1px solid #e63956 !important;
}

#new-capsule-btn,
#import-json-btn {
    transition: all 0.1s ease;
}

#new-capsule-btn:hover,
#import-json-btn:hover {
    transform: scale(1.05);
    background-color: #e63956;
    color: #000;
}

#new-capsule-btn:hover {
    background-color: #ffffff22;
    color: #fff;
}

body {
    background-color: #0d1117;
    color: #e6edf3;
}

#library-view .card {
    background-color: #161b22;
    border-radius: 12px;
    transition: all 0.2s ease;
}

#library-view .card:hover {
    background-color: #1b222c;
    transform: translateY(-3px);
}

#library-view .btn {
    border-radius: 10px;
    font-size: 0.85rem;
}

#library-view .badge {
    font-size: 0.75rem;
    border-radius: 8px;
}

#library-view .progress {
    background-color: #2d333b;
    border-radius: 5px;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    min-height: 150px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border: 2px solid #ffffff;
    border-radius: 12px;
    background-color: #c77a7aff;
}

.flashcard-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    display:flex;
    align-items:center;
    justify-content:center;
}