/* fonts */
@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/Segoe UI.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/Segoe UI Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/Segoe UI Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Text';
    src: url('../fonts/SFProText-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

html {
    font-family: 'Segoe UI';
    font-style: normal;
    color: #B8A0A0;
}

/* H1-6 */
.h1 {
    text-align: center;
    font-weight: 700;
    font-size: 56px;
    line-height: 90px;
    color: rgba(173, 21, 58, 1);

}
.h2 {
    font-weight: 700;
    font-size: 28px;
    line-height: 90px;
    color: #FFFFFF;
    text-shadow: 0px 0px 40px rgba(139, 21, 56, 0.3);
    border-bottom: 2px solid;
    border-image: linear-gradient(91.15deg, #8B1538 0%, #DC143C 100%) 1;
    width: fit-content;
}
.h3 {
    font-weight: 700;
    font-size: 28.8px;
    line-height: 46px;
    background: linear-gradient(93.49deg, rgba(220, 20, 60, 0.5) 51.42%, #DC143C 86.96%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* regular */
.regular-s {
    font-weight: 400;
    font-size: 14.4px;
    line-height: 23px;
    color: #B8A0A0;
}
.regular-italic {
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #FFFFFF;
}
.regular-m {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #B8A0A0;
}
.regular-l {
    font-weight: 400;
    font-size: 20.8px;
    line-height: 33px;
    color: #B8A0A0;
}
.regular-color {
    font-weight: 400;
    font-size: 20px;
    line-height: 46px;
    background: radial-gradient(63.44% 57.42% at 36.56% 93.48%, rgba(0, 0, 0, 0) 0%, rgba(7, 1, 2, 0.0326166) 0%, #DC143C 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* bold */
.bold-xs {
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    color: #FFFFFF;
}
.bold-s {
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: #FFFFFF;
}
.bold-m {
    font-weight: 700;
    font-size: 18.7px;
    line-height: 30px;
    color: #FFFFFF;
}
.bold-l {
    font-weight: 700;
    font-size: 24px;
    line-height: 38px;
    color: #FFFFFF;
}
.bold-xl {
    font-weight: 700;
    font-size: 46.5px;
    line-height: 77px;
    background: linear-gradient(108.46deg, #8B1538 0%, #DC143C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ol li */
ol {
    list-style-position: inside;
    text-indent: -2.2em;
    margin-left: 3.4em;
}

/* sf-pro */
.sf-pro-s {
    font-family: 'SF Pro Text';
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 13px;
    text-align: right;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.25);
}
.sf-pro-text {
    font-family: 'SF Pro Text';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -0.3px;
    color: #000000;
}

/* other */
.btn {
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: #FFFFFF;
}
.nav-menu a {
    font-weight: 400;
    font-size: 20px;
    line-height: 27px;
    color: #B8A0A0;
}

@media screen and (max-width: 640px) {
    /* H1-6 */
    .h1 {
        font-size: 45px;
        line-height: 100%;
    }
    .h2 {
        font-size: 24px;
        line-height: 40px;
    }
    .h3 {
        font-size: 20px;
        line-height: 30px;
    }

    /* regular */
    .regular-s {
        font-size: 14px;
        line-height: 16px;
    }
    .regular-italic {
        font-size: 16px;
        line-height: 18px;
    }
    .regular-m {
        font-size: 16px;
        line-height: 18px;
    }
    .regular-l {
        font-size: 18px;
        line-height: 20px;
    }
    .regular-color {
        font-size: 18px;
        line-height: 20px;
    }

    /* bold */
    .bold-xs {
        font-size: 12px;
        line-height: 18px;
    }
    .bold-s {
        font-size: 14px;
        line-height: 16px;
    }
    .bold-m {
        font-size: 16px;
        line-height: 18px;
    }
    .bold-l {
        font-size: 20px;
        line-height: 24px;
    }
    .bold-xl {
        font-size: 24px;
        line-height: 28px;
    }

    /* sf-pro */
    .sf-pro-text {
        font-size: 16px;
        line-height: 18px;
    }

    /* other */
    .btn {
        font-size: 14px;
        line-height: 16px;
    }
    .nav-menu a {
        font-size: 18px;
        line-height: 20px;
    }  
}