:root,
[data-bs-theme=light] {
    --bs-tertiary-bg: #eff1f4;
    --bs-tertiary-bg-rgb: 239, 241, 244;
    --bs-secondary-bg: #dbdee1;
    --bs-secondary-bg-rgb: 219, 222, 225;
}

.list-group {
    --bs-list-group-action-hover-bg: #f8f9fa;
}

.btn-light {
    --bs-btn-bg: #eff1f4;
    --bs-btn-border-color: #eff1f4;
}

@supports (corner-shape: squircle) {
    .rounded-4.squircle {
        border-radius: 2em !important;
        corner-shape: squircle;
    }
}

html {
    scroll-behavior: smooth;
}

.material-icons-round::after,
.material-icons-outlined::after {
    content: attr(data-icon);
}

body {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-style: normal;
}

h1,
h2,
h3,
h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
}

.mobile-margin {
    height: 100px;
    width: 100%;
}

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-1 {
    background-image: url("../images/bg-1.webp");
}

.glassmorphism {
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    background-color: rgba(var(--bs-body-bg-rgb), 0.65);
}

#mobile-nav {
    width: 94%;
    justify-content: center;
    margin: 0 auto;
    bottom: 0.7em;
    box-shadow: 0 0.5rem 1.5rem 0px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease-in-out;
}

.x-scrollable {
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.x-scrollable-snap-parent {
    scroll-snap-type: x mandatory;
}

.y-scrollable-snap-parent {
    scroll-snap-type: y mandatory;
}

.x-scrollable-item {
    white-space: normal;
    display: inline-block;
    vertical-align: top;
}

.x-scrollable-item-start {
    scroll-snap-align: start;
}

.x-scrollable-item-center {
    scroll-snap-align: center;
}

.x-scrollable-item-end {
    scroll-snap-align: end;
}

.x-scrollable-margin-top {
    scroll-margin-top: 1.5em;
}

.w-300 {
    width: 300px;
}

.rainbow-header {
    background-color: #793FDF;
    background-image: linear-gradient(20deg, #5FBDFF, #793FDF);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    width: fit-content;
}

.scroll-snap {
    scroll-snap-type: x mandatory;
}

.scroll-snap-start {
    scroll-snap-align: start;
}

.sentiment-1 {
    --bs-btn-active-bg: #b02a37;
}

.sentiment-2 {
    --bs-btn-active-bg: #d87c38;
}

.sentiment-3 {
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-color: #000;
}

.sentiment-4 {
    --bs-btn-active-bg: #8a9d3e;
}

.sentiment-5 {
    --bs-btn-active-bg: #146c43;
}

.flags-toggle {
    --bs-btn-active-bg: #4b7ec9;
    --bs-btn-active-border-color: #3f6bad;
}

.flags-badge {
    background-color: #4b7ec9;
    color: white;
}

@property --a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 180deg;
}

.shadow-ai::before {
    --a: 180deg;
    content: "";
    position: absolute;
    inset: 0;
    transform: translate3d(0, 0, -1px);
    z-index: -1;
    border-radius: inherit;
    filter: blur(7px);
    inset: 3px;
    background: conic-gradient(from var(--a) at 50% 50%, #A984FFFF 4%, #7BBFEAFF 21%, #8ACDF8FF 40%, #7BBFEAFF 58%, #E9A0E7FF 73%, #A984FFFF 99%);
    animation: rotate 15s linear infinite;
}

.placeholder {
    background: linear-gradient(135deg, var(--bs-secondary-bg-subtle) 10%, rgba(193, 187, 250, 1) 30%, var(--bs-secondary-bg-subtle) 50%);
    animation: leftToRight 1.5s ease infinite;
    background-size: 200%;
}

@keyframes rotate {
    from {
        --a: 180deg;
    }

    to {
        --a: 540deg;
    }
}

@keyframes leftToRight {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.sidebanner {
    width: 70px;
}

[data-bs-theme="dark"] .btn-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: #e2e6ea;
    --bs-btn-hover-border-color: #dae0e5;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: #d3d9df;
    --bs-btn-active-border-color: #c6ccb1;
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-disabled-bg: var(--bs-light);
    --bs-btn-disabled-border-color: var(--bs-light);
}

[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-light);
    --bs-btn-hover-border-color: var(--bs-light);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-light);
    --bs-btn-active-border-color: var(--bs-light);
    --bs-btn-disabled-color: var(--bs-light);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-light);
}

[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: #494f54;
    --bs-btn-hover-border-color: #464c51;
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: #3f4448;
    --bs-btn-active-border-color: #383c40;
    --bs-btn-disabled-color: var(--bs-light);
    --bs-btn-disabled-bg: var(--bs-dark);
    --bs-btn-disabled-border-color: var(--bs-dark);
}

[data-bs-theme="dark"] .btn-outline-light {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-dark);
}

[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .side-banner>.btn-light {
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-tertiary-dark);
}

.nav-label {
    font-size: 0.75rem;
}

/*
NEW TERTIARY LIGHT BACKGROUND COLOR: #EFF1F4
NEW SECONDARY LIGHT BACKGROUND COLOR: rgb(219 222 225) !important
*/