:root .frutiger-aero {
    --accent: #60b6f0;
}
.frutiger-aero .content-box {
    background: linear-gradient(#bcf5ff65, #cbf7ff5b);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 15px;
    outline: 1px #c8f7ff8c solid;
    box-shadow: 0 0 20px #bcf5ff9c;
}
body.frutiger-aero {
    background: linear-gradient(0deg, rgb(44, 129, 199), rgb(108, 213, 255));
}
.frutiger-aero .tab {
    background: #bcf5ff73;
    border-radius: 15px;
    outline: 1px #c8f7ff8c solid;
    box-shadow: 0 0 15px #bcf5ff9c;
    color: #216868;
}
.frutiger-aero .tab:hover {
    background: #60e7ff59;
}
.frutiger-aero .tab.selected {
    background: #6ee9ff59;
    box-shadow: 0 0 20px #6ee9ff8c;
}
.frutiger-pill {
    display: none;
}
.frutiger-aero .frutiger-pill {
    position: absolute;
    display: grid;
    background: linear-gradient(rgba(210, 255, 255, 0.404), transparent);
    width: calc(100% - 15px);
    height: 50px;
    border-radius: 15px;
    overflow: hidden;
    align-self: center;
    justify-self: stretch;
    z-index: -10;
}
.frutiger-aero .noscript {
    background: linear-gradient(rgba(255, 55, 55, 0.575), rgba(255, 80, 80, 0.527));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 20px rgba(255, 82, 82, 0.507);
    padding: 15px;
    border-radius: 10px;
    color: #d5ffff;
}
.frutiger-aero .noscript span {
    color: #d5ffff;
}

.frutiger-aero {
    position: relative;
    overflow-x: hidden;
}

.frutiger-aero .bubble-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.frutiger-aero .bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(216, 244, 255, 0.356), rgba(255, 255, 255, 0.075)),
        radial-gradient(circle at 70% 70%, rgba(190, 245, 255, 0.123), rgba(96, 142, 240, 0.1));
    box-shadow:
        0 0 25px rgba(188, 245, 255, 0.8),
        0 0 60px rgba(110, 233, 255, 0.6);
    opacity: 0.75;
    filter: blur(0.2px);
    animation: floatBubble 22s linear infinite;
    outline: rgba(128, 255, 249, 0.425) 1px solid;
}

.frutiger-aero .bubble.b1 {
    width: 220px;
    height: 220px;
    left: -40px;
    bottom: -80px;
    animation-duration: 32s;
}

.frutiger-aero .bubble.b2 {
    width: 160px;
    height: 160px;
    left: 15%;
    top: 60%;
    animation-duration: 26s;
    animation-delay: -5s;
}

.frutiger-aero .bubble.b3 {
    width: 260px;
    height: 260px;
    left: 55%;
    top: 55%;
    animation-duration: 38s;
    animation-delay: -10s;
}

.frutiger-aero .bubble.b4 {
    width: 140px;
    height: 140px;
    right: 10%;
    top: 15%;
    animation-duration: 24s;
    animation-delay: -3s;
}

.frutiger-aero .bubble.b5 {
    width: 280px;
    height: 280px;
    right: -60px;
    bottom: -60px;
    animation-duration: 40s;
    animation-delay: -15s;
}

@keyframes floatBubble {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translate3d(20px, -20px, 0) scale(1.03);
        opacity: 0.8;
    }
    50% {
        transform: translate3d(-15px, -40px, 0) scale(1.06);
        opacity: 0.9;
    }
    75% {
        transform: translate3d(10px, -25px, 0) scale(1.02);
        opacity: 0.7;
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.4;
    }
}

/* got some help for the bubbles since i didn't feel like it */