/* Reset styles for consistent rendering */
html, body {
    margin: 0;
    font-family: 'Roboto', Arial, sans-serif;
    padding: 0;
    height: 100%; /* Full viewport height */
    display: flex; /* Use Flexbox for layout */
    flex-direction: column; /* Stack header, main, and footer */
    box-sizing: border-box; /* Include padding and borders in dimensions */
}

/* Header styling */
header {
    display: flex; /* Enable Flexbox */
    /* flex-direction: column; */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    background-color: #333; /* Background color for the header */
    color: #fff; /* Text color */
    padding: 1rem; /* Padding inside the header */
    position: sticky; /* Stick to the top */
    top: 0; /* Stick to the top of the viewport */
    width: 100%; /* Full width */
    z-index: 10; /* Ensure it stays above other elements */
    box-sizing: border-box; /* Include padding in width */
    text-align: center; /* Ensure text aligns properly */
}

/* Main content area */
main, #main-container, #image-article {
    flex: 1; /* Allow the main area to grow and shrink as needed */
    padding: 20px; /* Spacing inside the main content */
    overflow-y: auto;
    overflow-x: hidden;
   
   
    box-sizing: border-box; /* Include padding in width calculations */

    /* Center items */
    }


/* Specific #image-article styling */
#image-article {
    margin: 0 auto; /* Center horizontally */
    font-size: 15px;
    max-height: calc(100% - 100px); /* Adjust height minus header/footer */
    background-color: #f9f9f9; /* Optional: Add a subtle background color */
    border-radius: 8px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow */
    scrollbar-width: none; /* Firefox: Hide scrollbar */
    padding-bottom: 20px; /* Add padding at the bottom */
    box-sizing: border-box;
}

/* Hide scrollbar in Webkit browsers */
#image-article::-webkit-scrollbar {
    display: none;
}

/* Footer styling */
/* Footer styling */
footer {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    position: fixed; /* Stay at the bottom of the viewport */
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    height: 70px; /* Define footer height */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive adjustments for smaller screens */


@media (max-width: 600px) {
    body {
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    /* Footer adjustments for smaller screens */
    footer {
        font-size: 14px;
        padding: 5px;
    }

    footer img {
        width: 20px; /* Adjust icon size for small screens */
        height: 20px;
    }

    /* Responsive main content adjustments */
    #image-article {
        margin: 0px auto; /* Adjust margin */
        /* padding: 0px; */
    }

    /* Responsive text overlay */
    .text-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        text-align: center;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        box-sizing: border-box;
    }

    /* Responsive navigation links */
    nav a {
        font-size: 13px; /* Smaller font size */
        padding: 0;
        margin: 0;
        color: #fff;
        text-decoration: none;
        display: inline-block;
    }

    nav a:hover {
        font-size: 16px; /* Slight size increase on hover */
        text-decoration: none;
    }
    main, #main-container, #image-article {
        width: 100% !important; /* Ensure full width */}
    div p {
        font-size: 15px !important;
        padding: 0px 20px;
    }
    div[draggable="true"] {
        width: auto !important; /* Allow draggable elements to size to their content */
        padding: 5px 10px !important; /* Ensure consistent padding */
        font-size: 14px; /* Adjust font size for better readability */
        display: inline-block; /* Ensure proper inline behavior */
        text-align: center; /* Center-align the text */
    }
    .gap {
        width: 65px !important; /* Reduce gap width for smaller screens */
        border-bottom: 1px dashed #aaa; /* Adjust border thickness for consistency */
        margin: 0 3px; /* Reduce margins around gaps */
    }
}

/* Buttons inside #image-article */
#image-article button {
    margin: 5px; /* Add some margin */
    padding: 10px; /* Internal padding for buttons */
    font-size: 1rem; /* Font size */
    cursor: pointer; /* Show pointer on hover */
    border: 1px solid rgb(204, 204, 204); /* Subtle border */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

#image-article button:hover {
    background-color: #0056b3; /* Change background color on hover */
    color: #fff; /* Change text color on hover */
}

#image-article button:disabled {
    background-color: #cccccc; /* Disabled state background */
    cursor: not-allowed; /* Show not-allowed cursor */
}

/* Navigation button styling */
#image-article .nav-buttons {
    display: flex;
    justify-content: center; /* Center navigation buttons */
    gap: 20px; /* Add space between buttons */
    margin-top: 20px; /* Add margin above */
    position: absolute;
    bottom: 20px; /* Position at the bottom */
    width: 100%; /* Full width */
    text-align: center; /* Center text */
}
#image-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

#image-container img {
    width: 100%; /* Ensure image fills the container */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Limit image size */
    margin: 0 auto; /* Center image horizontally */
    display: block; /* Ensure proper block behavior */
}


@media (max-width: 410px){
    h1{
        font-size: 24px;
        font-weight: lighter;
       
    }

    nav {
        width: 100%; /* Make the width full screen */
      }
 
    }
    
@media (max-width: 400px) {
    div p {
        font-size: 15px !important; /* Adjust paragraph font size for smaller screens */
        padding: 0px 20px; /* Add padding for better spacing */
    }
    div[draggable="true"] {
        width: auto !important; /* Allow draggable elements to size to their content */
        padding: 5px 10px !important; /* Ensure consistent padding */
        font-size: 14px; /* Adjust font size for better readability */
        display: inline-block; /* Ensure proper inline behavior */
        text-align: center; /* Center-align the text */
    }
    .gap {
        width: 65px !important; /* Reduce gap width for smaller screens */
        border-bottom: 1px dashed #aaa; /* Adjust border thickness for consistency */
        margin: 0 3px; /* Reduce margins around gaps */
    }
    h3{
        font-size: 15px;
        margin-bottom: 5px;
        margin-top: 0px;
    }
}

        
     
   
         
   
    #content-wrapper {
        padding-bottom: 70px; 
       
    }