:root {
    --glowColor: transparent; /*Not visible in "light" mode*/
    --opacity1: 0.0; /*Glow invisible in light mode*/
    --opacity2: 0.0; /*Glow invisible in light mode*/
}

/*Button Glow*/
#buttonGlow {
    position: relative;
    display: inline-flex;
    margin-top: 5px;
    /* Ensures glow wraps tightly around content */
    border-radius: 10px;
    background-color: black;
    z-index: 1;
}

#buttonGlow::before,
#buttonGlow::after {
    content: '';
    position: absolute;
    inset: -4px; /* Expands the glow outward evenly */
    border-radius: inherit;
    background-image: conic-gradient(from var(--angle), transparent 50%, gold 50%);
    z-index: -1;
    animation: spin 4s linear infinite;
}

#buttonGlow::before {
    filter: blur(1.5rem);
    opacity: var(--opacity1);
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}

/*Button Glow End*/

/* Image Glow */
#imgGlow {
    position: relative;
    display: inline-block; /* Ensures the glow wraps tightly around the image */
    border-radius: 10px;
    width: auto; /* Allow the container to adapt to the image size */
    height: auto; /* Maintain aspect ratio */
    z-index: 1;
}

#imgGlow img {
    display: block; /* Prevents bottom gap */
    max-width: 100%; /* Ensure the image scales down */
    height: auto; /* Maintain aspect ratio */
    border-radius: inherit; /* Match the container's border radius */
}

/* Glow effect */
#imgGlow::before,
#imgGlow::after {
    content: '';
    position: absolute;
    inset: -4px; /* Expands glow outward around the image */
    border-radius: inherit;
    background-image: conic-gradient(from var(--angle), transparent 50%, gold 50%);
    z-index: -1;
    animation: spin 4s linear infinite;
}

#imgGlow::before {
    filter: blur(1.5rem);
    opacity: var(--opacity2)
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}
/*Image Glow End*/

/* Topnav Glow*/
.topnav::after {
    content: '';
    position: absolute;
    bottom: -15px; /* How far below the nav the glow sits */
    width: 110%;
    height: 14px;
    background: var(--glowColor);
    opacity: var(--opacity1);
    filter: blur(0.625rem); /*Equivalent to 15 px*/
    z-index: -1;
}
/* Topnav Glow End*/

/*Overwrites and Additions*/
body {
    overflow-x: hidden; /* Prevents horizontal scroll */
}