@import url("./fonts/fontello.css");
@import url("./fonts/animation.css");

/* For browsers that support clamp  */
@supports (font-size: clamp(1rem, 1vi, 1rem)) {
    :root {
        --fs-sm: clamp(0.8rem, 0.23vi + 0.74rem, 0.94rem);
        --fs-base: clamp(1rem, 0.42vi + 0.89rem, 1.25rem);
        --fs-md: clamp(1.25rem, 0.7vi + 1.07rem, 1.67rem);
        --fs-lg: clamp(1.56rem, 1.1vi + 1.28rem, 2.22rem);
        --fs-xl: clamp(1.95rem, 1.69vi + 1.52rem, 2.96rem);
        --fs-xxl: clamp(2.44rem, 2.52vi + 1.79rem, 3.95rem);
        --fs-xxxl: clamp(3.05rem, 3.71vi + 2.1rem, 5.26rem);
    }
}

/* For browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
    :root {
        --fs-sm: 0.8rem;
        --fs-base: 1rem;
        --fs-md: 1.25rem;
        --fs-lg: 1.56rem;
        --fs-xl: 1.95rem;
        --fs-xxl: 2.44rem;
        --fs-xxxl: 3.05rem;
    }
    @media screen and (min-width: 1366px) {
        :root {
            --fs-sm: 0.94rem;
            --fs-base: 1.25rem;
            --fs-md: 1.67rem;
            --fs-lg: 2.22rem;
            --fs-xl: 2.96rem;
            --fs-xxl: 3.95rem;
            --fs-xxxl: 5.26rem;
        }
    }
}

.icon {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-inline: 0.2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &.icon-md {
        font-size: 120%;
    }
}