body {
    font-family: "Roboto Mono", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;font-style: normal;
    margin: 0;
    padding: 0;
    background-color: #cce6d3;
    animation: gentleColors 20s infinite alternate ease-in-out;
    color: black;
}

a.link {
    text-decoration: none; /* Remove underline */
    color: black; /* Default text color */
    background-color: white; /* Default background color */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
    cursor: pointer;
}

a.link:hover {
    color: white; /* Change text color to white */
    background-color: black; /* Change background color to black */
}

@keyframes gentleColors {
    0% {
        background-color: #cce6d3;
    }
    33% {
        background-color: #fff585;
    }
    66% {
        background-color: #ffd19f;
    }
    100% {
        background-color: #f8abae;
    }
}

#content {
    padding: 10px;
}
.text-justify {
    text-align: justify;
}
.justified-gallery > a > .jg-caption, .justified-gallery > div > .jg-caption, .justified-gallery > figure > .jg-caption {
    font-family: "Roboto Mono", serif;
}
.next-event {
    display: inline-block;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;

/* Start as solid text */
color: #111;

/* Rainbow gradient that will be revealed */
background-image: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    lime,
    cyan,
    blue,
    magenta,
    red
);
background-size: 200% auto;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;

/* Animate: quick fade into rainbow + subtle shimmer */
animation:
fadeToRainbow 0.5s ease-out forwards,
rainbowShift 0.8s linear infinite alternate 0.5s;
}

@keyframes fadeToRainbow {
    0% {
        color: #111;          /* solid text */
    }
    100% {
        color: transparent;   /* reveal gradient via background-clip */
    }
}

@keyframes rainbowShift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.hover-link {
    cursor: pointer;
}

.hover-image {
    position: fixed;
    top: 0;
    left: 0;
    height: 40vh; 
    width: auto;
    aspect-ratio: 4 / 3; /* keeps proportions before load */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
}

.hover-image.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}