/* === Global === */
:root {
    font-family: "Inter", sans-serif;
    font-size: 16px;
}

@media (min-width: 1200px) {
    .container {
        width: 800px;
    }
}

/* --- Font --- */
.inter-20 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "slnt" 0;
    font-size: 1.25rem;
}

.inter-14 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "slnt" 0;
    font-size: 0.875rem;
}

.inter-16 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "slnt" 0;
    font-size: 1rem;
}

.inter-12 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "slnt" 0;
    font-size: 0.75rem;
}

/* --- Icons --- */

.material-symbols-rounded {
    margin: 0px 8px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.material-symbols-rounded-400 {
    margin: 0px 12px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20
}

/* --- Button --- */

.btn-success {
    background-color: #C8E176;
    border-color: #C8E176;
    color: black;
    border-radius: 100px;
    width: 100%;
}

.btn-success:hover {
    background-color: #95ad46 !important;
    border-color: #95ad46 !important;
}

/* --- badges --- */
.bacterial {
    background-color: #FFCBCB;
    color: #8A0000;
}

.fungal {
    background-color: #F3FFCB;
    color: #6A8A00;
}

.viral {
    background-color: #FFCBF7;
    color: #8A006B;
}

.insect {
    background-color: #f1de9a;
    color: #8a5e00;
}

section {
    margin-bottom: 100px;
}

/* --- Animated Display Text --- */
.boujee-text {
    /* font-size: 50px; */
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    --bg-size: 200%;
    --color-one: #b1e20e;
    --color-two: #43753e;
    font-size: clamp(1.5rem, 12.5vmin, 4rem);
    /* Modified font size */
    background: linear-gradient(90deg,
            var(--color-one),
            var(--color-two),
            var(--color-one)) 0 0 / var(--bg-size) 100%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: move-bg 1.5s linear reverse;
}

@media (prefers-reduced-motion: no-preference) {
    .boujee-text {
        animation: move-bg 1.5s linear reverse;
    }

    @keyframes move-bg {
        to {
            background-position: var(--bg-size) 0;
        }
    }
}