@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
/********** Loads Druk font ***********/

@font-face {
    font-family: 'Druk';
    src: url('./../../fonts/Druk/Druk-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Druk';
    src: url('./../../fonts/Druk/Druk-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Druk';
    src: url('./../../fonts/Druk/Druk-Heavy.otf') format('opentype');
    font-weight: 950; /* Heavy font weight */
    font-style: normal;
}

@font-face {
    font-family: 'Druk';
    src: url('./../../fonts/Druk/Druk-HeavyItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Druk';
    src: url('./../../fonts/Druk/Druk-Medium.otf') format('opentype');
    font-weight: 500; /* Medium font weight */
    font-style: normal;
}

@font-face {
    font-family: 'Druk';
    src: url('./../../fonts/Druk/Druk-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Druk';
    src: url('./../../fonts/Druk/Druk-Super.otf') format('opentype');
    font-weight: 800; /* Super font weight */
    font-style: normal;
}

@font-face {
    font-family: 'Druk';
    src: url('./../../fonts/Druk/Druk-SuperItalic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
}

/********** Load Plexes Font  **********/
@font-face {
    font-family: 'Plexes';
    src: url('./../../fonts/plexes-cufonfonts/Plexes-Black.otf') format('opentype');
    font-weight: 900; /* Black weight */
    font-style: normal;
}

@font-face {
    font-family: 'Plexes';
    src: url('./../../fonts/plexes-cufonfonts/Plexes-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Plexes';
    src: url('./../../fonts/plexes-cufonfonts/Plexes-Book.otf') format('opentype');
    font-weight: 400; /* Regular weight */
    font-style: normal;
}

@font-face {
    font-family: 'Plexes';
    src: url('./../../fonts/plexes-cufonfonts/Plexes-BookItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Plexes';
    src: url('./../../fonts/plexes-cufonfonts/Plexes-Light.otf') format('opentype');
    font-weight: 300; /* Light weight */
    font-style: normal;
}

@font-face {
    font-family: 'Plexes';
    src: url('./../../fonts/plexes-cufonfonts/Plexes-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Plexes';
    src: url('./../../fonts/plexes-cufonfonts/Plexes-Medium.otf') format('opentype');
    font-weight: 500; /* Medium weight */
    font-style: normal;
}

@font-face {
    font-family: 'Plexes';
    src: url('./../../fonts/plexes-cufonfonts/Plexes-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}


@font-face {
    font-family: 'Proxima Nova';
    src: url('./../../fonts/proxima-nova/ProximaNova-500.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('./../../fonts/proxima-nova/ProximaNova-900.woff2') format('woff2');
    font-weight: bold;
}



/********** Herarchy styles **********/
body {
    font-size: 20rem;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -0.02em;
}
.super, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0;
}
.super, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-title);
    font-weight: 400;
    line-height: 0.89;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    strong {
        font-weight: inherit;
        color: var(--orange);
    }
}
form label {
    font-family: 'Plexes';
    text-transform: uppercase;
}
.h2, .h3, .h4, .h5, .h6 {
    line-height: 1.07;
}
.super {
    font-size: 120rem;
}
.h1 {
    font-size: 80rem;
}
.h2 {
    font-size: 64rem;
}
.h3 {
    font-size: 56rem;
}
.h4 {
    font-size: 48rem;
}
.h5 {
    font-size: 40rem;
}
.h6 {
    font-size: 32rem;
}
form label {
    font-size: 14px;
    font-weight: 900;
}


@media (max-width: 1024px) {
    body {
        font-size: 18px;
    }
    .super {
        font-size: 98px;
    }
    .h1 {
        font-size: 48px;
    }
    .h2, .h3, .h4 {
        font-size: 32px;
    }
}