@use "mixins" as *;

body {
    @include fluid-text(20, 18);

    font-family: var(--font-family-base);
    font-weight: 400;
    line-height: 1.28;
    color: var(--color-dark);
    background-color: var(--color-light);

    &.burger-menu-opened {
        overflow-y: hidden;
    }
}

body,
body div,
body *::after {
    transition: background-color var(--transition-duration-03), color var(--transition-duration-03);
}

::selection {
    background-color: var(--color-accent-80-no-alpha);
    color: var(--color-stable-dark);
}

a,
button,
input,
textarea,
svg * {
    transition-duration: var(--transition-duration-02);
}

a {
    text-decoration: none;
    color: inherit;
}

h1,
h2,
h3,
h4,
h6 {
    font-weight: 700;
}

h5 {
    font-weight: 600;
}

h1 {
    @include fluid-text(80, 48);
}

h2 {
    @include fluid-text(50, 38, 1380);
}

h3 {
    @include fluid-text(30, 25);
}

h4 {
    @include fluid-text(25, 22);
}

h5 {
    font-size: 22px;
}

h6 {
    font-size: 20px;
}