:root {

    /* Top Shadow */
    --top-shadow-blur: 12px;
    --top-shadow-spread: 3px;
    --top-shadow-color: rgba(0, 0, 0, 1.2);
    --top-shadow-horizontal: 0;
    --top-shadow-vertical: 0px;

    /* Bottom Shadow (blue glow) */
    --bottom-shadow-blur: 200px;
    --bottom-shadow-spread: 20px;
    --bottom-shadow-color: rgba(0, 166, 221, 1.0);
    --bottom-shadow-horizontal: 0;
    --bottom-shadow-vertical: 40px;

    /* Simple Bottom Shadow (subtle gray, like top shadow) */
    --simple-bottom-shadow-blur: 12px;
    --simple-bottom-shadow-spread: 3px;
    --simple-bottom-shadow-color: rgba(0, 0, 0, 0.12);
    --simple-bottom-shadow-horizontal: 0;
    --simple-bottom-shadow-vertical: 0px;

    --top-shadow-outer-blur: 12px;
    --top-shadow-outer-spread: 3px;
    --top-shadow-outer-color: rgba(0, 0, 0, 1.2);
    --top-shadow-outer-horizontal: 0;
    --top-shadow-outer-vertical: 0px;
}

/* ANIMATIONS */
.spotlight-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.spotlight {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 166, 221, 1.0) 4%, transparent 70%);
    mix-blend-mode: lighten;
    pointer-events: none;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}

.spotlight.large {
    width: 1000px;
    height: 1000px;
}


.spotlight.medium {
    width: 400px;
    height: 400px;
}

.spotlight.small {
    width: 200px;
    height: 200px;
}

.spotlight.right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.spotlight.center {
    left: 50%;
    top: -75%;
    transform: translate(-50%, -50%);
}

.spotlight.left {
    left: 0%;
    top: -7%;
    transform: translate(-50%, -50%);
}

.shadow-box {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.shadow-box::before,
.shadow-box::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

.shadow-box::before {
    top: 0;
    box-shadow: var(--top-shadow-horizontal) var(--top-shadow-vertical) var(--top-shadow-blur) var(--top-shadow-spread) var(--top-shadow-color);
}

/* Pseudo-element for bottom shadow (blue glow by default) */
.shadow-box::after {
    bottom: 0;
    box-shadow: var(--bottom-shadow-horizontal) var(--bottom-shadow-vertical) var(--bottom-shadow-blur) var(--bottom-shadow-spread) var(--bottom-shadow-color);
}

/* Simple bottom shadow - only bottom, no sides/top */
.simple-bottom-shadow {
    overflow: visible;
    box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.6);
}

.simple-bottom-shadow::after {
    display: none;
}

.shadow-box-outer::before {
    box-shadow: var(--top-shadow-outer-horizontal) var(--top-shadow-outer-vertical) var(--top-shadow-outer-blur) var(--top-shadow-outer-spread) var(--top-shadow-outer-color);

}

/* Modifier classes to control shadows */
.no-top-shadow::before {
    display: none;
}

.no-bottom-shadow::after {
    display: none;
}

.rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.rectangle-lightBlue {
    background: #00A6DD;
}

.rectangle-darkBlue {
    background: #005491;
}

.rectangle-darkestBlue {
    background: #004784;
}

.rectangle-gray {
    background: #626467;
}

.rectangle-bottomRight {
    transform-origin: top right;
    transform: skewY(-35deg);
}

.rectangle-bottomLeft {
    transform: rotate(35deg) translateX(50%);
}

.rectangle-topLeft {
    transform-origin: top left;
    transform: skewY(-35deg);
    height: calc(100vw * .26);
}