.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 5px;
    border-radius: 15px;
    justify-content: start;
}

@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
    }
}

.grid-item {
    position: relative;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}


.grid-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
}

.audio-overlay {
    display: none; /* We can remove the overlay as we now click the whole image */
}

/* Navbar styling */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff; /* Change to your preferred color */
    z-index: 1000; /* Ensures navbar is on top of other elements */
    padding: 10px;
    display: flex;
    align-items: center; /* Vertically align buttons */
    height: 60px;
    overflow: visible;
    justify-content: space-between;
}

/* Left-aligned buttons */
.navbar .navbar-left {
    display: flex; /* Align the buttons horizontally */
    gap: 10px; /* Adds space between the buttons */
    justify-content: flex-start;
}

/* Right-aligned buttons */
.navbar .navbar-right {
    display: flex;
    gap: 10px; /* Adds space between the buttons */
    justify-content: flex-end;
}

/* Center-aligned buttons */
.navbar .navbar-center {
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Vertically align items */
    gap: 10px;
}

@media (max-width: 600px) {
    h2 {
        font-size: 20px;
        max-width: 100px; /* Adjust for small screens */
    }

    #searchInput {
        width: 100px;
    }
}

/* Common button (link) styling */
.navbar a {
    color: white;
    background-color: #ffffff;
    padding: 5px 5px;
    text-decoration: none;
    border-radius: 10%;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

/* Hover effect on buttons */
.navbar a:hover {
    background-color: #e6d5d5;
}

/* Optional: active state for buttons */
.navbar a.active {
    background-color: #04AA6D;
}

.navbar-img {
    width: 40px; /* Set the width of the image */
    height: 40px; /* Set the height of the image */
    border-radius: 20%; /* Optional: to make the image round */
    object-fit: cover; /* Ensures the image fills the dimensions without distortion */
}

.navbar-cabronada-icon {
    width: 50px; /* Set the width of the image */
    height: 50px; /* Set the height of the image */
    border-radius: 20%; /* Optional: to make the image round */
    object-fit: cover; /* Ensures the image fills the dimensions without distortion */
}


/* Style for the sticky tabs */
.sticky-tabs {
    position: sticky;
    top: 60px; /* Adjust this if your navbar height is different */
    background-color: white;
    z-index: 900; /* Sits below the navbar */
    border-bottom: 1px solid #ddd;
}

/* Ensuring content doesn't go under the fixed navbar */
body {
    padding-top: 80px;
}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black background with transparency */
}

.modal-content {
    background-color: #fefefe;
    margin: 30px auto; /* 15% from the top and centered horizontally */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Default modal width */
    max-width: 500px; /* Limit max width */
    border-radius: 8px; /* Rounded corners */
}

.modal-content img{
    border-radius: 15px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 600px) {
    .modal-content {
        width: 90%; /* Takes more space on smaller screens */
        max-width: 300px; /* Smaller max width for small screens */
    }
}

/* Button styling */
.back-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%; /* Ensures button matches navbar height */
}

/* Image styling */
.back-arrow {
    height: 70%; /* Makes the image 70% of the navbar height */
    width: auto; /* Keeps the aspect ratio */
    max-height: 100%; /* Ensures the image does not exceed the navbar height */
}

.user-menu-container {
    position: relative;
    display: inline-block;
    z-index: 999;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    min-width: 160px;
    z-index: 999;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.user-menu-container .show {
    display: block;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 900; /* Make sure it's above other elements */
}
.overlay.show {
    display: block;
}


button img {
    width: 100%; /* Scale the image to fit the button's width */
    height: 100%; /* Scale the image to fit the button's height */
    object-fit: contain; /* Ensure the image maintains its aspect ratio and fits within the button */
}

button {
    border-style: none;
    background-color: #fefefe;
}

.flex-container {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: center; /* Align items to the center */
    flex-wrap: nowrap; /* Prevent wrapping to the next line */
    gap: 10px; /* Optional: Space between image and text */
    overflow: hidden; /* Hide overflowing content */
    text-align: left;
}

.flex-container-user {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: center; /* Align items to the center */
    flex-wrap: nowrap; /* Prevent wrapping to the next line */
    gap: 10px; /* Optional: Space between image and text */
    overflow: hidden; /* Hide overflowing content */
    height: 100%; /* Ensure the flex container has a defined height */
    font-size: 50px; 
}

.flex-container-user img {
    max-height: 80px; /* Limit image height to the container's height */
    max-width: 70px;  /* Optional: Prevent image from exceeding its natural size */
    object-fit: contain; /* Maintain image aspect ratio */
}

.submit-container {
    display: flex;
    justify-content: center; /* Center the submit button horizontally */
    margin-top: 20px; /* Add space above the button */
}

.flex-container-columns {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    justify-content: flex-start; /* Align items to the top */
    min-height: 100vh; /* Ensure the container takes the full height of the viewport */
    text-align: center; /* Align text */
    gap: 1rem; /* Add spacing between child elements */
    margin-top: 10vh; /* Add top margin */
    width: 100%; /* Make all child elements take the same width */
    max-width: fit-content; /* Ensure that the width matches the content of the widest child */
    margin: 0 auto; /* Center the children horizontally */
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; /* Add spacing between form elements */
}