/* THIS IS FOR SMALLER VIEWPORTS */
@media only screen and (max-width:600px){
    
/* ------------------------- WRAPPER / CONTENT CONTAINER ------------------------- */
    /* Flex container to hold header, content, and footer */
    .wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    /* Make the content take available space */
    .content-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem; /* Add some space between sections */
        padding: 2rem; /* Add padding around the entire container */
    }
    
    /* Flexbox container for the sections */
    .content-container section {
        width:max-content;
        max-width: 600px;
        min-height:fit-content; /* Ensures the section has a minimum height */
        border: 1px solid #ccc;
        padding: 1rem;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Align items at the top (start) */
        justify-content: flex-start; /* Align items at the top (start) */
    }

/* ------------------------- WRAPPER / CONTENT CONTAINER ------------------------- */




/* ------------------------- CONTROL FEATURES ------------------------- */

    #studySetsList {
        width: 90%;
        align-items: center;
    }
    #studySetsList h2 {
        font-size: 26px;
        text-decoration: underline;
    }
    /* Style for the study sets list */
    #studySetsList ul {
        list-style-type: none;
        padding: 0;
        width: 100%;
    }
    /* Style for individual study set items */
    #studySetsList ul li {
        padding: 0.5rem;
        border-bottom: 3px solid #ccc;
        transition: 0.3s;
    }
    #studySetsList ul li:hover {
        border-bottom: 3px solid rgb(218, 41, 28);
    }


    
    /* Style for form elements */
    #createStudySetForm label {
        display: block;
        margin-bottom: 0.5rem;
    }
    #createStudySetForm input {
        width:auto;
        padding: 0.5rem;
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    #createStudySetForm button {
        padding: 0.5rem 1rem;
        background-color: rgb(218, 41, 28);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
    }
    #createStudySetForm button:hover {
        background-color: rgb(173, 36, 36);
    }




    /* CSS to style the delete buttons */
    .deleteBtn {
        align-self: right;
        justify-self: right;
        background-color: rgb(218, 41, 28);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        border-radius: 5px;
        transition: 0.3s;
    }
    .deleteBtn:hover {
        background-color: rgb(173, 36, 36);
    }


    /* CSS to style the delete buttons */
    .edit-button {
        align-self: right;
        justify-self: right;
        border-color: #c2c2c2;
        color: rgb(40, 40, 40);
        
        padding: 10px;
        cursor: pointer;
        border-radius: 5px;
        transition: 0.3s;
        align-self: right;
    }
    .edit-button:hover {
        background-color: #003d77;
        border-color: #003d77;
        color: white;
    }

/* ------------------------- CONTROL FEATURES ------------------------- */
}