/********** 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('http://./../../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;
}



/********** Herarchy styles **********/
body {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 500;
}
.super, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0;
}
.super, .h1, .h3 {
    font-family: var(--font-title);
    font-weight: 950;
    color: var(--title-color);
    line-height: 0.89;
    text-transform: uppercase;
}
.h2, .h4, .h5 {
    font-weight: 900;
    line-height: 1.07;
}
.super {
    font-size: 124rem;
}
.h1 {
    font-size: 80rem;
}
.h2 {
    font-size: 56rem;
    font-weight: 500;
}
.h3 {
    font-size: 48rem;
}
.h4 {
    font-size: 40rem;
}
.h5 {
    font-size: 28rem;
}
@media (max-width: 1024px) {
    body {
        font-size: 18px;
    }
    .super {
        font-size: 56px;
    }
    .h1 {
        font-size: 32px;
    }
}
@media (max-width: 740px) {
    .h2 {
        font-size: 28px;
    }
    .h3 {
        font-size: 32px;
    }
    .h4 {
        font-size: 24px;
    }
}