/* Overlay for capturing clicks */
#ripple-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* Ensure it's above all content */
    pointer-events: none; /* Allow interactions to pass through */
  }
  
  /* Ripple effect styling */
  .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    background: rgba(255, 255, 255, 0.5); /* Semi-transparent white for ripple */
    pointer-events: none; /* Prevent interfering with other events */
  }
  
  @keyframes ripple-animation {
    to {
      transform: scale(3);
      opacity: 0;
    }
  }  
  

/* Wrapper for positioning of background image*/
.wrapper {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 100vh;
    height: auto;
    /* min-height: 1200px; /* You can adjust the height as needed */
    border-radius: 10px; /* Rounded corners */
    box-sizing: border-box;
    margin-bottom: 0px;
    border-style: double;
    border-color: aquamarine;
    padding: 10px;
    /*border: 2px solid red;*/
}

/* Background image behind the mask-div */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px; /* Rounded corners */
    object-fit: cover; /* This ensures the image covers the div */
    z-index: 1; /* Ensure the image is at the bottom layer */
}

/* Div with the mask */
.mask-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px; /* Rounded corners */
    background-color: rgba(244, 203, 225, 0.5); /* Optional: a color overlay to make the mask effect visible */
    mask-size: cover; /* Scale the mask image */
    mask-repeat: no-repeat; /* Ensure the mask doesn't repeat */
    z-index: 2; /* Ensure the div is on top of the background image */
}

/* Content inside wrapper */
.content {
    position: relative; /* Keep it inside the wrapper layout flow */
    z-index: 3; /* Ensure it's above both the background and mask */
    padding-bottom: 20px; /* Add padding so the content doesn’t overlap the edges */
    width: 100%;
}

html, body {
    height: auto;
    margin: 0px;
}

p {
    font-size: 16px;
}

.p-20 {
    font-size: 20px;
}

h1 {
    font-size: larger;
}

h2 {
    font-size: large;
}

h3 {
    font-size: medium;
}

.text-box {
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack the text vertically */
    /* border: 1px solid #ccc; /* Border around the box */
    border-radius: 8px; /* Rounded corners */
    font-size: 16px; /* Font size */
    margin-bottom: 10px;
    padding: 5px;
    line-height: 0; /* Adjust line height to decrease space between rows */
}

.text {
    display: block;
    border-radius: 8px; /* Optional rounded corners */
    font-size: 16px; /* Set font size */
    line-height: 1.5; /* Line height for spacing between lines */
    margin: 20px auto; /* Center the text box horizontally with some margin */
    max-width: 60%; /* Set the maximum width to 80% of the page width */
    padding: 20px; /* Padding around the text */
    list-style-type: none; /* Remove default list bullets */
}

.text li {
    display: block; /* Ensure each list item is displayed on its own line */
    margin-bottom: 10px; /* Optional: space between list items */
}


figure {
    padding-top: -1rem;
    padding-left: 1rem;  /* Space between border and content */
    padding-right: 1rem;  /* Space between border and content */
    padding-bottom: 1rem;  /* Space between border and content */
    border-radius: 4px;  /* Optional: rounded corners */
    background-color: #e3f6fd;
    margin: 1rem 0;  /* Vertical spacing between figures */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;  /* Container fits content width */
    margin-left: auto;  /* These two margin rules */
    margin-right: auto; /* center the figure horizontally */
}

figure.row {
    flex-direction: row;
    padding-top: 0rem;
    padding-left: 0rem;  /* Space between border and content */
    padding-right: 0rem;  /* Space between border and content */
    padding-bottom: 0rem;  /* Space between border and content */
}

/* If you want a subtle shadow, you can add: */
figure.shadowed {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #717a9f;;  /* blue border */
}

/* If you want a hover effect: */
figure.hover {
    transition: transform 0.2s, box-shadow 0.2s;
}

figure.hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}c

.caption {
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
    color: #666;
    line-height: 1.3;  /* Slightly tighter line height */
    margin-top: -1.2rem;  /* Minimal space between image and caption */
    font-style: italic;
    text-align: center;
    text-wrap: balance;
    max-width: min(55ch, 40%);
}

.caption b {
    color: #444;
    font-weight: 600;
}

@media screen and (max-width: 480px) {
    .caption {
        font-size: clamp(0.875rem, 3.5vw, 1rem);
        line-height: 1.4;
        margin-top: -1.2rem;  /* Even tighter on mobile */
    }
}


.avatar {
    height: 220px;
    width: auto;
    margin: 10px;
    padding: 10px;
    /*padding: 10px;*/
}

.hue-rotate {
    --hue-offset: 0deg;
    --brightness: 1.0;
    animation: hueShift 6s ease-in-out infinite;
    animation-play-state: paused;
}

.hue-rotate:hover {
    --brightness: 1.0;
    animation-play-state: running;
}

.bright:hover {
    filter: brightness(1.2);
}

.image {
    max-width: 80vw; /* Limits width to n% of the viewport width */
    max-height: 80vh; /* Limits height to n% of the viewport height */
    width: auto; /* Maintains aspect ratio by adjusting width automatically */
    height: auto; /* Maintains aspect ratio by adjusting height automatically */
    display: block; /* Ensures the image behaves as a block-level element */
    margin: 20px auto; /* Centers the image horizontally with 20px top/bottom margin */
    object-fit: contain; /* or cover */
}

.image.margin-bottom-adjust {
    margin-bottom: var(--custom-margin-bottom, 5px) auto;
  }
.image.margin-top-adjust {
    margin-top: var(--custom-margin-top, 5px) auto;
}

@keyframes hueShift {
    from {
        filter: brightness(var(--brightness)) hue-rotate(var(--hue-offset));
    }
    to {
        filter: brightness(var(--brightness)) hue-rotate(calc(var(--hue-offset) + 360deg));
    }
}


.banner-image {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    display: block;
    margin: 20px auto;
    transition: filter 1s ease-in-out;
    animation: hueShift 6s ease-in-out infinite;
    animation-play-state: paused;
    --brightness: 1.2;
    --hue-offset: 0deg;  /* Initial value that JS will update */
    filter: brightness(var(--brightness)) hue-rotate(var(--hue-offset));
}


.banner-image:hover {
    /* Simply start the animation from its current position */
    animation-play-state: running;
    /* transform: scale(1.00);
    /* filter: brightness(1.5) hue-rotate(30deg);
    /* background-color: rgba(0, 0, 0, 0.6); /* Dim effect on hover */
}

.banner-image:not(:hover) {
    filter: brightness(var(--brightness)) hue-rotate(0deg);
}

.pic {
    max-width: 80vw; /* Limits width to n% of the viewport width */
    max-height: 80vh; /* Limits height to n% of the viewport height */
    width: auto; /* Maintains aspect ratio by adjusting width automatically */
    height: auto; /* Maintains aspect ratio by adjusting height automatically */
    display: block; /* Ensures the image behaves as a block-level element */
    margin: 20px auto; /* Centers the image horizontally with 20px top/bottom margin */
}

.back {
    background-color: rgb(196, 238, 238);
    /*background-color: rgb(179, 237, 237);*/
    padding: 10px;
    padding-bottom: 10px;
    /*border-style: dotted;*/
    border-color: blue;
}

.section {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
    width: flex;
   /* background-color: rgb(179, 237, 237); */
}

.container {
    display: inline-block;
    background-color: #855aac; 
    padding: 20px;
    text-align: center;
    white-space: nowrap;
}

.flex-container {
    display: flex;
    flex-wrap: wrap; /* Ensures items wrap into new rows if needed */
    /* gap: 10px; /* Spacing between items */
    /*width: 70%; /* Adjust this for desired percentage of viewport width */
    max-width: 100%; /* Optional: Ensure it never exceeds full width */
    /*max-width: 1400px;*/
    /* min-width: 300px; */
    margin: auto; /* Center the container */
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 5px; /* Add internal spacing */
    padding-right: 5px; /* Add internal spacing */
    /*box-sizing: border-box; /* Include padding and border in width */
    border-radius: 8px; /* Rounded corners */
}

.flex-width-percent {
    width: var(--custom-width-percent, 70%); /* Default to 70% if not set */
    overflow: hidden; /* Ensure content doesn't overflow */
    box-sizing: border-box;
}

/* Base class with a custom property for max-height */
.flex-max-height {
    max-height: var(--custom-max-height, 200px); /* Default to 200px if not set */
    overflow: hidden; /* Ensure content doesn't overflow */
}

/* Base class with a custom property for min-height */
.flex-min-height {
    min-height: var(--custom-min-height, 100px); /* Default to 200px if not set */
    overflow: hidden; /* Ensure content doesn't overflow */
}

/* Base class with a custom property for max-width */
.flex-max-width {
    max-width: var(--custom-max-width, 200px); /* Default to 200px if not set */
    overflow: hidden; /* Ensure content doesn't overflow */
}

/* Base class with a custom property for min-width */
.flex-min-width {
    min-width: var(--custom-min-width, 100px); /* Default to 200px if not set */
    overflow: hidden; /* Ensure content doesn't overflow */
}

/* Base class with a custom property for border-radius */
.var-border-radius {
    border-radius: var(--custom-border-radius, 10px); /* Default to 10px if not set */
    overflow: hidden; /* Ensure content doesn't overflow */
}

/* Base class with a custom property for border-radius */
.var-margin {
    margin: var(--custom-margin, 10px); /* Default to 10px if not set */
    overflow: hidden; /* Ensure content doesn't overflow */
}

.var-top-margin {
    margin-top: var(--custom-top-margin, 10px); /* Default to 10px if not set */
    overflow: hidden; /* Ensure content doesn't overflow */
}

/* Base class with a custom property for border-radius */
.var-font-size {
    font-size: var(--custom-font-size, 10px); /* Default to 10px if not set */
    overflow: hidden; /* Ensure content doesn't overflow */
}

.black-border {
    border: 3px solid #000000;
}

.center {
    margin-left: auto;
    margin-right: auto;
    display: flex; /* Use flexbox layout */
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    text-align: center; /* Center text inside the container */
  }

.transparent-black {
    background-color: rgba(0, 0, 0, 0.6); /* Optional: Background styling */
}

.yellow-opacity-50 {
    background-color: rgba(244, 255, 190, 0.6);
}

.orange-opacity-50 {
    background-color: rgba(255, 201, 130, 0.6);
}

.lightblue-opacity-50 {
    background-color: rgba(111, 228, 234, 0.6);
}

.yellow {
    background-color: lightyellow;
}

.red {
    background-color: #f2311c;
}

.purple {
    background-color: purple;
}

.magenta {
    background-color: #d446b6;
}

.mediumpurple {
    background-color: rgb(147, 57, 211);
}

.lightblue {
    background-color: rgb(179, 237, 237);
}

.darkblue {
    background-color: rgb(1, 87, 246);
}

.green {
    background-color: rgb(85, 186, 122);
}

.black {
    background-color: rgb(0, 0, 0);
}

.white_text {
    color: white; /* Button text color */
}

button {
   display: inline-block;
   padding: 10px 20px;
   margin: 5px;
   font-size: 16px;
   color: #ffffff; /* White color */
   background-color: #29af7e; 
   border: none;
   border-radius: 4px;
   cursor: pointer;
   text-decoration: none;
   transition: background-color 0.3s ease; /* Smooth hover effect */
}

button:hover {
   background-color: #1773d5; /* Darker shade of blue */
}

.namebox {
    padding: 1px;
    border-radius: 8px;
    width: 200px; /* Adjust the width as needed */
    margin: 0 auto; /* Center the rectangle horizontally */
    margin-top: 0px;
    margin-bottom: 0px;
    border-color: #f2311c;
 } 

.buttonbox {
   padding: 1px;
   border-radius: 8px;
   width: auto; /* Adjust the width as needed */
   margin: 0 auto; /* Center the rectangle horizontally */
   margin-top: 0px;
   margin-bottom: 0px;
}  

.box {
    padding: 5px;
    /* border-radius: 8px; */
    width: auto; /* Adjust the width as needed */
    margin: 0 auto; /* Center the rectangle horizontally */
    margin-top: 10px;
    margin-bottom: 0px;
 }  

.button-link {
    padding: 15px;
    margin-bottom: 10px;
    margin-top: 5px;
    font-size: 16px;
    color: white;
    text-align: center;
    width: 50%; /* Start with full width of the container */
    max-width: 500px; /* Limit the maximum width */ 
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button-link:hover {
    transform: scale(1.05);
    background-color: #0056b3;
}

.home-button {
    position: fixed; /* Keeps it fixed in the viewport */
    top: 10px;       /* Distance from the top of the viewport */
    left: 1vw;      /* Distance from the left of the viewport */
    width: 5vw;
    padding: 1vw 1vw; /* Add some space inside the button */
    /* background-color: #007BFF; /* Button background color */
    color: white; /* Button text color */
    text-decoration: none; /* Removes underline from text */
    text-align: center;
    font-size: 20px; /* Adjust font size */
    border-radius: 5px; /* Rounded corners for a nicer look */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
    z-index: 1000; /* Ensures it stays above other elements */
}

.home-button:hover {
    background-color: #0056b3; /* Slightly darker background on hover */
    cursor: pointer; /* Changes cursor to pointer on hover */
}

.back-button {
    position: fixed;
    top: 10px;
    left: 9vw; /* Adjust to avoid overlap with the home button */
    padding: 1vw 1vw;
    font-size: 19px; /* Adjust font size */
    background-color: #f8f9fa; /* Light background color */
    color: #000; /* Text color */
    border: 1px solid #ddd; /* Subtle border for definition */
    border-radius: 5px;
    text-decoration: none; /* Remove underline */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    z-index: 1000;
    transition: background-color 0.3s, transform 0.3s; /* Hover effect */
}

.back-button:hover {
    background-color: #e2e6ea; /* Slightly darker background on hover */
    transform: scale(1.05); /* Slight enlarge on hover */
    cursor: pointer;
}

.button-link-mini {
    padding: 5px;
    margin: 5px;
    font-size: 16px;
    color: white;
    text-align: center;
    width: 100px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button-link-mini:hover {
    transform: scale(1.05);
    background-color: #e4883c;
}

.button-link-icon {
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 5 auto;
    font-size: 24px;
    color: white;
    text-align: center;
    width: 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button-link-icon:hover {
    transform: scale(1.05);
    background-color: #e4883c;
}


/* General button-link styling for buttons with background image */
.button-link-image {
    padding-top: 35px;
    padding-bottom: 35px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 16px;
    color: white;
    text-align: center;
    width: 50%; /* Start with full width of the container */
    max-width: 1000px; /* Limit the maximum width */
    min-width: 300px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, background-color 0.3s;
    background-size: cover; /* Ensures cropping to maintain aspect ratio */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

/* Add hover effect for interactivity */
.button-link-image:hover {
    transform: scale(1.05);
    background-color: rgba(0, 0, 0, 0.6); /* Dim effect on hover */
}

/* Ensure the button text is readable */
.button-link-image span {
    position: relative;
    z-index: 1;
}

/* Optional overlay for text contrast */
.button-link-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Dark overlay for contrast */
    z-index: 0;
    transition: opacity 0.3s ease-in-out;
}

.button-link-image:hover::before {
    opacity: 0.5;
}

.button-link-image.red-border {
    border: 2px solid red;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Optional: Add a glow effect */
}

.red-border {
    border: 2px solid red;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Optional: Add a glow effect */
}



/* Database Gallery Styles */
.artworks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

.artwork-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.artwork-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.artwork-card h3 {
    margin: 1rem;
    font-size: 1.2rem;
}

.artwork-card p {
    margin: 0.5rem 1rem;
    color: #666;
}

.artwork-card .medium {
    color: #888;
    font-style: italic;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
}

.tag {
    background: #f0f0f0;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.9rem;
    color: #666;
}

.filters {
    padding: 1rem 2rem;
    display: inline;
}

.filters select {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/**/
.artwork-card {
    position: relative;
}

.artwork-card img {
    transition: transform 0.3s ease;
}

.artwork-preview {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: white;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

.artwork-preview canvas {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    display: block;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}



/* Admin Form Styles */
.admin-form {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.form-group textarea {
    height: 100px;
}

button[type="submit"] {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background: #0056b3;
}