@font-face {
    font-family: Brasley;
    src: url("../fonts/Brasley-Medium.woff") format("woff");
}
@font-face {
    font-family: Brasley;
    font-weight: bold;
    src: url("../fonts/Brasley-Bold.woff") format("woff");
}
@font-face {
    font-family: Brasley;
    font-weight: 600;
    src: url("../fonts/Brasley-SemiBold.woff") format("woff");
}
@font-face {
    font-family: Brasley;
    font-weight: 400;
    src: url("../fonts/Brasley-Regular.woff") format("woff");
}
@font-face {
    font-family: BrasleyRegular;
    font-weight: 400;
    src: url("../fonts/Brasley-Regular.woff") format("woff");
}
@font-face {
    font-family: BrasleyLightItalic;
    src: url("../fonts/Brasley-LightItalic.woff") format("woff");
}
@font-face {
    font-family: BrasleyBoldItalic;
    src: url("../fonts/Brasley-BoldItalic.woff") format("woff");
}

.lightitalic {
    font-family: BrasleyLightItalic;
}
.bold {
    font-weight: bold;
}
.semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
html em, html i {
    font-family: BrasleyLightItalic;
}
html strong, html b {
    font-weight: bold;
}
.bold_italic {
    font-family: BrasleyBoldItalic;
}
.underlined {
    text-decoration: underline;
}


/*
  ██╗ █████╗ ██████╗  ██████╗ 
 ███║██╔══██╗╚════██╗██╔═████╗
 ╚██║╚██████║ █████╔╝██║██╔██║
  ██║ ╚═══██║██╔═══╝ ████╔╝██║
  ██║ █████╔╝███████╗╚██████╔╝
  ╚═╝ ╚════╝ ╚══════╝ ╚═════╝ 
*/

html {
    font-family: Brasley;
    font-size: 1.01vw; /* 20px */
}
.supertitle {
    font-size: 13.5rem; /* 270px */
    margin-bottom: calc(-13.5rem / 4.5);
}
.title-1 {
    font-size: 5.95rem; /* 119px */
}
.title-1.size-medium {
    font-size: 4.95rem;
}
.menu-1 {
    font-size: 4.45rem; /* 89px */
}
.title-2 {
    font-size: 3.5rem; /* 70px */
}
.title-3 {
    font-size: 3rem; /* 60px */
}
.title-4 {
    font-size: 2.5rem; /* 50px */
}
.subtitle-1 {
    font-size: 1.9rem; /* 38px */
}
.subtitle-2 {
    font-size: 1.25rem; /* 25px */
}
.text-1 {
    font-size: 1rem; /* 20px */
}
.button-1 {
    font-size: 0.9rem; /* 18px */
    letter-spacing: 0.04rem;
}
.button-2 {
    font-size: 0.8rem; /* 16px */
}

/* Line heights */
html {
    line-height: 1.5;
}
.supertitle, .title-2, .title-3, .subtitle-1, .subtitle-2 {
    line-height: 1.2;
}
.title-1, .title-4 {
    line-height: 1.24;
}
.menu-1 {
    line-height: 1.19;
}


/*
  ██╗██╗  ██╗██╗  ██╗ ██████╗ 
 ███║██║  ██║██║  ██║██╔═████╗
 ╚██║███████║███████║██║██╔██║
  ██║╚════██║╚════██║████╔╝██║
  ██║     ██║     ██║╚██████╔╝
  ╚═╝     ╚═╝     ╚═╝ ╚═════╝ 
*/

@media screen and (max-width: 1440px) {
    html {
        font-size: 1.111vw; /* 16px */
    }
    .supertitle {
        font-size: 11.813rem; /* 189px */
        margin-bottom: calc(-11.813rem / 4.5);
    }
    .title-1 {
        font-size: 5.25rem; /* 84px */
    }
    .title-1.size-medium {
        font-size: 4.25rem;
    }
    .menu-1 {
        font-size: 3.813rem; /* 61px */
    }
    .title-2 {
        font-size: 3.063rem; /* 49px */
    }
    .title-3 {
        font-size: 2.625rem; /* 42px */
    }
    .title-4 {
        font-size: 2.188rem; /* 35px */
    }
    .subtitle-1 {
        font-size: 26px; /* 26px */
    }
    .subtitle-2 {
        font-size: 16px; /* 16px */
    }
    .text-1 {
        font-size: 16px; /* 16px */
    }
    .button-1 {
        font-size: 14px; /* 14px */
    }
    .button-2 {
        font-size: 14px; /* 14px */
    }
}


/*
  ██╗ ██████╗ ██████╗ ██╗  ██╗
 ███║██╔═████╗╚════██╗██║  ██║
 ╚██║██║██╔██║ █████╔╝███████║
  ██║████╔╝██║██╔═══╝ ╚════██║
  ██║╚██████╔╝███████╗     ██║
  ╚═╝ ╚═════╝ ╚══════╝     ╚═╝
*/

@media screen and (max-width: 1024px) {
    html {
        font-size: 1.563vw; /* 16px */
    }
    .supertitle {
        font-size: 8.813rem; /* 141px */
        margin-bottom: calc(-8.813rem / 4.5);
    }
    .title-1 {
        font-size: 3.875rem; /* 62px */
    }
    .title-1.size-medium {
        font-size: 3.2rem;
    }
    .menu-1 {
    }
    .title-2 {
    }
    .title-3 {
        font-size: 31px; /* 31px */
    }
    .title-4 {
        font-size: 26px; /* 26px */
    }
    .subtitle-1 {
    }
    .text-1 {
    }
    .button-1 {
    }
    .button-2 {
    }
}


/*
 ███████╗ ██████╗  █████╗ 
 ╚════██║██╔════╝ ██╔══██╗
     ██╔╝███████╗ ╚█████╔╝
    ██╔╝ ██╔═══██╗██╔══██╗
    ██║  ╚██████╔╝╚█████╔╝
    ╚═╝   ╚═════╝  ╚════╝ 
*/

@media screen and (max-width: 768px) {
    html {
        font-size: 2.083vw; /* 16px */
    }
    .supertitle {
        font-size: 8.813rem; /* 141px */
    }
    .title-1 {
        font-size: 46px; /* 46px */
    }
    .menu-1 {
    }
    .title-2 {
    }
    .title-3 {
    }
    .title-4 {
    }
    .subtitle-1 {
    }
    .text-1 {
    }
    .button-1 {
    }
    .button-2 {
    }
}


/*
  ██████╗  ██████╗  ██████╗ 
 ██╔════╝ ██╔═████╗██╔═████╗
 ███████╗ ██║██╔██║██║██╔██║
 ██╔═══██╗████╔╝██║████╔╝██║
 ╚██████╔╝╚██████╔╝╚██████╔╝
  ╚═════╝  ╚═════╝  ╚═════╝ 
*/

@media screen and (max-width: 600px) {
    html {
        font-size: 2.667vw; /* 16px */
    }
    .supertitle {
        font-size: 88px; /* 88px */
    }
    .title-1 {
    }
    .menu-1 {
    }
    .title-2 {
        font-size: 26px;
    }
    .title-3 {
    }
    .title-4 {
    }
    .subtitle-1 {
    }
    .text-1 {
    }
    .button-1 {
    }
    .button-2 {
    }
}