/* rainbow */
@property --c1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #11598b;
}
@property --c2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #49a85d;
}
@property --c3 {
    syntax: '<color>';
    inherits: false;
    initial-value: #fabd05;
}

@keyframes bgrotate {
    from {
        --c1: #11598b;
        --c2: #49a85d;
        --c3: #fabd05;
    }
    to {
        --c1: #49a85d;
        --c2: #11598b;
        --c3: #fabd05;
    }
}

.bg-rainbow {
    background: radial-gradient(ellipse at top left, var(--c1), transparent), radial-gradient(ellipse at top right, var(--c2), transparent),
    radial-gradient(ellipse at bottom right, var(--c3), transparent), radial-gradient(ellipse at bottom left, var(--c2), transparent);
    animation-name: bgrotate;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 30s;
}
/* /rainbow */

.bg-rainbow .nav-link.active {
    background-color: rgba(255, 255, 255, 0.25);
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}