:root {
    --glass-bg: rgba(255,255,255,0.05);
    --glass-border: 1px solid rgba(255,255,255,0.2);
    --warning-glass-bg: rgba(255, 243, 205, 0.125);
    --warning-glass-border: 1px solid rgba(255, 236, 181, 0.2);
}

body {
    background: black !important;
}

#backgroundCanvas {
    position: fixed;
    z-index: -1;
    top: 0;
}

#siteNavBar {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(10px);
    border-top: var(--glass-border);
    border-bottom: var(--glass-border);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

@media (max-width: 768px){
    #header-logo {
        margin-left: 1rem !important;
        margin-top: 0 !important;
        max-width: 36px;
        max-height: 36px;
    }
}

@media (min-width: 768px){
    #siteNavBar {
        background-color: var(--glass-bg) !important;
        backdrop-filter: blur(5px);
        border-top: var(--glass-border);
        border-bottom: var(--glass-border);
        border-radius: 0 0 4px 4px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        max-height: 56px;
    }
}

.site-footer {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(10px);
    border-top: var(--glass-border);
    border-bottom: var(--glass-border);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    color: white;
}

.newJumbo {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(5px);
    border: var(--glass-border);
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#header-logo {
    margin-top: 12px;
    margin-left: 2rem;
}

/* Aurora Background */

.Aurorabackground {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0.25;
    background: linear-gradient(120deg, #112c71, #0a2353);

    &::before {
        content: '';
        position: absolute;
        width: 80%;
        height: 80%;
        background: radial-gradient(circle at top left, #5B58EB 30%, #56E1E9 110%);
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
        left: -20%;
        top: -20%;
        filter: blur(150px);
        /* animation: blobify 7s ease-in-out 0s infinite; */
    }

    &::after {
        content: '';
        position: absolute;
        width: 80%;
        height: 80%;
        background: radial-gradient(circle at bottom right, purple, #5B58EB 90%);
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
        right: -15%;
        bottom: -30%;
        filter: blur(150px);
        /* animation: blobify 10s ease-in-out 0s infinite; */
    }
}

.Aurorabackground.purplesky {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0.25;
    background: linear-gradient(120deg, #112c71, #0a2353);

    &::before {
        content: '';
        position: absolute;
        width: 80%;
        height: 80%;
        background: radial-gradient(circle at top left, #5B58EB 30%, #56E1E9 110%);
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
        left: -20%;
        top: -20%;
        filter: blur(150px);
        /* animation: blobify 7s ease-in-out 0s infinite; */
    }

    &::after {
        content: '';
        position: absolute;
        width: 80%;
        height: 80%;
        background: radial-gradient(circle at bottom right, #4ecaff, #5B58EB 90%);
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
        right: -15%;
        bottom: -30%;
        filter: blur(150px);
        /* animation: blobify 10s ease-in-out 0s infinite; */
    }
}

.Aurorabackground.greensky {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0.25;
    background: linear-gradient(120deg, #117134, #0a5333);

    &::before {
        content: '';
        position: absolute;
        width: 80%;
        height: 80%;
        /* background: radial-gradient(circle at top left, #5B58EB 30%, #56E1E9 110%); */
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
        left: -20%;
        top: -20%;
        filter: blur(150px);
        /* animation: blobify 7s ease-in-out 0s infinite; */
    }

    &::after {
        content: '';
        position: absolute;
        width: 80%;
        height: 80%;
        /* background: radial-gradient(circle at bottom right, #4ecaff, #5B58EB 90%); */
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
        right: -15%;
        bottom: -30%;
        filter: blur(150px);
        /* animation: blobify 10s ease-in-out 0s infinite; */
    }
}

@keyframes blobify {
    0% {
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
        transform: translateX(0) translateY(0) scale(1);
    }

    50% {
        border-radius: 30% 70% 70% 30% / 40% 60% 40% 60%;
        transform: translateX(100px) translateY(100px) scale(1.2);
    }

    100% {
        border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
        transform: translateX(0) translateY(0) scale(1);
    }

}

.card {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(5px);
    border: var(--glass-border);
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    color: white;
}

.alert-warning {
    color: #cb9900;
    background-color: var(--warning-glass-bg) !important;
    /* border-color: #ffecb5; */
    backdrop-filter: blur(5px);
    border: var(--warning-glass-border);
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}