:root{


    --Starlight: #fac372;
    --Penumbra: #4e176bdf;
    --Dawn: #f09c83;
    --Moonlight: #dfebff;
    --LinkLight: #e9f0ff;
    --PurpLight: #c885ff43;
    --FlashLight: #cab6ff41;
    --Eclipse: #13001beb;
    --Midnight: #1a001f;
    --Umbra: #0a0008;
    --BabyPur: #dbc9ff;

}




body {
    background-image: url("../Images/background/seam.gif");
    background-size: 200px 215px;

    /* --- TINT CONTROLS --- */
    background-color: rgba(122, 0, 122, 0.6); /* tint color + opacity */
    background-blend-mode: multiply;      /* or: overlay, darken, lighten */
}


html {
    scrollbar-color: var(--Midnight) var(--umbra);
    scrollbar-width: thin;
    cursor: url(https://www.rw-designer.com/cursor-view/144663.png), url(https://www.rw-designer.com/cursor-view/144663.png), auto;
}

a {
    cursor: url(https://www.rw-designer.com/cursor-view/144662.png), url(https://www.rw-designer.com/cursor-view/144662.png), auto;
}

#ToDream {
    color: var(--PurpLight);
    font-family: 'Kulture';
    letter-spacing: 10px;
    font-size: 35px;
    margin-top: 35px;
    margin-left: 50px;
}

#AndI{
    color: var(--PurpLight);
    font-family: 'Kulture';
    letter-spacing: 10px;
    font-size: 20px;
    margin-top: -30px;
    margin-left: 90px;
}

/* position these two lines in the bottom-right corner but keep their text left-aligned */
#ButTime,
#AndSo {
    color: var(--FlashLight);
    font-family: 'Kulture';
    letter-spacing: 10px;
    font-size: 15px;
    position: fixed;
    right: 24px;

    /* stacked: ButTime above AndSo */

    text-align: justify;
    max-width: 40ch;
    white-space: normal;
    margin: 0;
    padding: 6px 10px;
    background: transparent;
}

#ButTime { bottom: 80px; }
#AndSo  { bottom: 22px; }

/* On small screens place them back in-flow so they don't overlap content */
@media (max-width: 700px) {
    #ButTime,
    #AndSo {
        position: static;
        margin-left: 110px;
        padding: 0;
        max-width: none;
    }
}

/* Ancient.gif: center and tint slightly purple */
/* Center image and add a purple overlay using mix-blend-mode so the image tints naturally */
.ancient-wrap {
    display: block;
    margin: 24px auto;
    margin-left: 345px;
    /* make the image smaller on wide viewports */
    max-width: 1000px;
    width: 1000px;
    position: relative;
    isolation: isolate; /* contain blending to this element */
    border-radius: 4px;
}

.ancient {
    display: block;
    width: 100%;
    height: 580px;
    border-radius: 4px;

    mix-blend-mode: multiply;
    opacity: 0.92;
    filter: grayscale(16%) contrast(0.98) brightness(0.96);
    border: #0c000f 8px ridge;
    border-color: #4114552a;
}

.ancient-wrap::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 7px;
    right: -7px;
    bottom: 8px;
    pointer-events: none;
    /* subtle purple overlay — adjust rgba alpha for strength */
    background: rgba(54, 28, 83, 0.18);
    mix-blend-mode: overlay;
    transition: background-color 180ms ease, opacity 180ms ease;
    border-radius: 4px;
}

/* Slightly stronger tint on hover for a gentle effect */
.ancient-wrap:hover::after {
    background: rgba(40, 7, 87, 0.754);
}

@media (max-width: 700px) {
    .ancient-wrap {
        /* on small screens let the image grow to most of the viewport width */
        max-width: 92%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Make the image clickable link look natural */
a[href="Home.html"] {
    display: block;
    text-decoration: none;
}