@font-face {
    font-family: 'DMMono-light';
    src: url('../../assets/fonts/DMMono-light.woff2') format('woff2'),
         url('../../assets/fonts/DMMono-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DMMono-regular';
    src: url('../../assets/fonts/DMMono-regular.woff2') format('woff2'),
         url('../../assets/fonts/DMMono-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kumlien-pro';
    src: url('../../assets/fonts/Kumlien-pro.woff2') format('woff2'),
         url('../../assets/fonts/Kumlien-pro.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* FONT FAMILY */
.mono {
    font-family: 'DMMono-light', Arial, Helvetica, sans-serif;
}

.mono-regular,
.mono b,
.mono strong {
    font-family: 'DMMono-regular', Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.mono-regular {
    font-family: 'DMMono-regular', Arial, Helvetica, sans-serif;
}

.kumlien {
    font-family: 'Kumlien-pro', Arial, Helvetica, sans-serif;
}


/* COLORS */
.brown,
.brown a {
    color: var(--brown-deep);
}

.beige,
.beige a {
    color: var(--beige-white);
}

.caramel,
.caramel a {
    color: var(--caramel);
}


/* LAYOUT */
.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


/* SIZE */
.size-1 {
    font-size: 1em; /*12px*/
    line-height: 1.31;
    letter-spacing: 0.04em;
}

.size-2 {
    font-size: 1.16em; /*14px*/
    line-height: 1.28;
}

.size-3 {
    font-size: 3.34em; /*40px*/
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.size-4 {
    font-size: 5.34em; /*64px*/
    line-height: 1.09;
    letter-spacing: -0.03em;
}

.size-5 {
    font-size: 8.67em; /*104px*/
    line-height: 1;
    letter-spacing: -0.03em;
}

.size-6 {
    font-size: 13.34em; /*160px*/
    line-height: 1;
    letter-spacing: -0.03em;
}


@media screen and (max-width: 1728px) {
    .mono-regular .size-1,
    .size-1 .mono-regular,
    .size-1.mono-regular, 
    .mono .size-1,
    .size-1 .mono,
    .size-1.mono {
        font-size: 12px;
        line-height: 1.31;
        letter-spacing: 0.04em;
    }

}

@media screen and (max-width: 1440px) {
    .size-3 {
        font-size: 2.9em;
    }

	.size-4 {
        font-size: 4.5em;
    }

    .size-5 {
        font-size: 7.3em;
    }

    .size-6 {
        font-size: 11.34em;
    }
}


@media screen and (max-width: 1280px) {
    .size-3 {
        font-size: 2.85em;
    }

	.size-4 {
        font-size: 3.94em;
    }

    .size-5 {
        font-size: 6.5em;
    }

    .size-6 {
        font-size: 10.1em;
    }
}


@media only screen and (max-width: 1024px) {
    .size-3 {
        font-size: 3.3em;
    }
}

@media only screen and (max-width: 740px) {
    .size-3 {
        font-size: 2.34em; /*28px*/
        line-height: 1.14;
        letter-spacing: -0.03em;
    }

    .size-4 {
        font-size: 2.67em; /*32px*/
        line-height: 1.125;
        letter-spacing: -0.03em;
    }

    .size-5 {
        font-size: 4em; /*48px*/
        line-height: 1;
        letter-spacing: -0.03em;
    }

    .size-6 {
        font-size: 5.34em; /*64px*/
        line-height: 1;
        letter-spacing: -0.03em;
    }
}

@media only screen and (max-width: 550px) {

}