@import "../var";

html {
    font-family: $font-family;
    font-weight: 400;
    font-size: $font-size;
    color: $font-color;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-kerning: none;
    //-webkit-text-rendering: optimizeSpeed;
    //text-rendering: optimizeSpeed;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    word-break: keep-all;
    letter-spacing: -0.02em;
    @media screen and (max-width: $breakpoint-tablet) {
        font-size: $font-size - 1px;
    }
    @media screen and (max-width: $breakpoint-mobile) {
        font-size: $font-size - 2px;
    }
}

.font-akzidenz {
    font-family: $font-family-akzidenz !important;
    letter-spacing: 0em;
}

em {
    font-style: normal;
}

.__accent-color {
    color: $accent-color;
}


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

.font-w300 {
    font-weight: 300 !important;
}
.font-w400 {
    font-weight: 400 !important;
}
.font-w500 {
    font-weight: 500 !important;
}
.font-w600 {
    font-weight: 600 !important;
}
.font-w700 {
    font-weight: 700 !important;
}

.font-w800 {
    font-weight: 800 !important;
}

.font-w900 {
    font-weight: 900 !important;
}


.__uppercase {
    text-transform: uppercase !important;
}

.opacity-80 {
    opacity: .8;
}
.opacity-70 {
    opacity: .7;
}
.opacity-60 {
    opacity: .6;
}
.opacity-50 {
    opacity: .5;
}

.opacity-40 {
    opacity: .4;
}
.opacity-30 {
    opacity: .3;
}
.opacity-20 {
    opacity: .2;
}
.txt-center {
    text-align: center;
}

.headline1 {
    @include calc-clamp(84px, 100px);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.headline2 {
    @include calc-clamp(58px, 82px);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

.headline3 {
    @include calc-clamp(42px, 56px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.022em;
}


.headline4 {
    @include calc-clamp(28px, 38px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.022em;
}
.txt-xl {
    @include calc-clamp(18px, 24px);
    font-weight: 500;
    line-height: 1.525;
    //letter-spacing: 0.0625em;
    //text-transform: uppercase;
}



.txt-lg {
    @include calc-clamp(16px, 20px);
    font-weight: 500;
    line-height: 1.4;
}

.txt-md {
    @include calc-clamp(14px, 18px);
    line-height: 1.5;
}

.txt-sm {
    @include calc-clamp(12px, 14px);
    line-height: 1.6;
}

.txt-xs {
    @include calc-clamp(10px, 12px);
    line-height: 1.6;
}

@media screen and (max-width: $breakpoint-min) {

    .headline1 {
        font-size: 28px;
        font-weight: 400;
    }

    .headline2 {
        font-size: 28px;

    }

    .headline3 {
        font-size: 26px;
    }


    .headline4 {
        font-size: 24px;
    }

    .txt-xl {
        font-size: 18px;
    }



    .txt-lg {
        font-size: 16px;
    }

    .txt-md {
        font-size: 14px;
    }

    .txt-sm {
        font-size: 12px;
    }

    .txt-xs {
        font-size: 9px;
    }
}