.content-container {
    width: 100vw;
    height: fit-content;
    padding-bottom: 5vw;
    overflow: hidden;
    margin-left: 0vw;
    margin-top: 2.5vw;
}

.flashcards-unit-1 h1,
.flashcards-unit-2 h1,
.flashcards-unit-3 h1,
.flashcards-unit-4 h1,
.flashcards-unit-5 h1 {
    font-size: 2.5vw;
    color: var(--c2);
    margin-left: 7.5vw;
}
/* Consolidated styles for all unit lists */
.content-container [class^="flashcard-unit-"] {
    overflow-x: auto; /* Keep auto to allow scrolling but hide the scrollbar */
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    padding-left: 7.5vw;
    position: relative;
    padding-bottom: 5px; /* Reduced since we don't need space for scrollbar */
    user-select: none; /* Prevent text selection during drag */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Hide scrollbar for Webkit browsers */
.content-container [class^="flashcard-unit-"]::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

/* Common styles for all units */
.content-container [class^="flashcards-unit-"] {
    width: 100%;
    margin-top: 2.5vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    padding: 1vw;
    position: relative;
}

/* Common styles for all unit options */
.content-container [class^="flashcards-unit-"] [class^="option-"] {
    width: 20vw;
    height: 14vw;
    border-radius: 1vw;
    background-color: var(--c2);
    padding-top: 1.5vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    padding-bottom: 1.5vw;
    display: inline-block;
    margin-right: 2vw;
    overflow: hidden;
    position: relative;
}

/* Common styles for all unit option titles */
.content-container [class^="flashcards-unit-"] [class^="option-"] h1 {
    font-size: 1.7vw;
    font-weight: 300;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: white;
    margin-left: 0;
}

/* Common styles for all unit option buttons */
.content-container [class^="flashcards-unit-"] [class^="option-"] .buttons {
    width: 17vw;
    height: 2vw;
    display: flex;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    bottom: 1.5vw;
    left: 1.5vw;
}

.content-container [class^="flashcards-unit-"] [class^="option-"] .buttons .button-1 {
    width: 90%;
    height: fit-content;
    background-color: white;
    border-radius: 1vw;
    border: 2px solid var(--c1);
    color: var(--c2);
    text-align: center;
    padding: 0.5vw 0.5vw 0.4vw;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
    font-size: 0.9vw;
}

.content-container [class^="flashcards-unit-"] [class^="option-"] .buttons .button-1:hover {
    background-color: var(--c2);
    color: white;
    border: 2px solid var(--c1);
}

/* Media Query for Smartphones (max-width: 500px) */
@media screen and (max-width: 500px) {
    .content-container {
        width: 100%;
        margin-top: 5vw;
        padding-bottom: 15vw;
    }
    
    .flashcards-unit-1 h1,
    .flashcards-unit-2 h1,
    .flashcards-unit-3 h1,
    .flashcards-unit-4 h1,
    .flashcards-unit-5 h1 {
        font-size: 6vw;  /* Increased from 5vw */
        margin-left: 5vw;
    }
    
    .content-container [class^="flashcard-unit-"] {
        padding-left: 5vw;
    }
    
    .content-container [class^="flashcards-unit-"] {
        margin-top: 5vw;
        gap: 4vw;
        padding: 2vw;
    }
    
    /* Make cards wider and shorter for mobile */
    .content-container [class^="flashcards-unit-"] [class^="option-"] {
        width: 70vw;
        height: 35vw;  /* Reduced from 40vw */
        border-radius: 3vw;
        padding: 3vw;
        margin-right: 4vw;
    }
    
    /* Increase title font size for readability */
    .content-container [class^="flashcards-unit-"] [class^="option-"] h1 {
        font-size: 6vw;  /* Increased from 5vw */
    }
    
    /* Adjust buttons for mobile */
    .content-container [class^="flashcards-unit-"] [class^="option-"] .buttons {
        width: 64vw;
        height: 8vw;
        bottom: 4vw;
        left: 3vw;
        justify-content: center;
    }
    
    .content-container [class^="flashcards-unit-"] [class^="option-"] .buttons .button-1 {
        width: 90%;
        height: 8vw;
        border-radius: 2vw;
        padding: 2vw 0;
        font-size: 3vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
}