@import "poppins.css";
@import "talina.css";

html{
    font-size: calc(1rem / 16);

    @media all and (width >= 1940px){
        font-size: calc((100vw / 1920 + 1rem / 16) / 2);
    }
}
body{
    hyphens: auto;
    word-break: auto-phrase;

    -webkit-hyphenate-limit-before: 6;
    -webkit-hyphenate-limit-after: 3;
    hyphenate-limit-chars: 12 6 3;

    font-family: 'Poppins', sans-serif;
    font-size: 16rem;
    line-height: 24rem;
    --line-break: 24rem;

    @media all and (width >= 768px) {
        font-size: 18rem;
        line-height: 26rem;
        --line-break: 26rem;
    }

    @media all and (width >= 1280px) {
        font-size: 20rem;
        line-height: 29rem;
        --line-break: 29rem;
    }

    @media all and (width >= 1440px) {
        font-size: 22rem;
        line-height: 32rem;
        --line-break: 32rem;
    }
}
.hy_typo_h1, .hy_typo_text h1{
    font-family: 'Talina', sans-serif;
    font-size: 48rem;
    line-height: 58rem;
    text-transform: uppercase;
    overflow-wrap: anywhere;


    @media all and (width >= 768px) {
        font-size: 60rem;
        line-height: 70rem;
    }

    @media all and (width >= 1280px) {
        font-size: 75rem;
        line-height: 85rem;
    }

    @media all and (width >= 1440px) {
        font-size: 90rem;
        line-height: 100rem;
    }
}
.hy_typo_h2, .hy_typo_text h2{
    font-family: 'Talina', sans-serif;
    font-size: 30rem;
    line-height: 40rem;
    text-transform: uppercase;
    overflow-wrap: anywhere;


    @media all and (width >= 768px) {
        font-size: 40rem;
        line-height: 50rem;
    }

    @media all and (width >= 1280px) {
        font-size: 50rem;
        line-height: 62.5rem;
    }

    @media all and (width >= 1440px) {
        font-size: 60rem;
        line-height: 75rem;
    }
}
.hy_typo_h3, .hy_typo_text h3{
    font-family: 'Talina', sans-serif;
    font-size: 24rem;
    line-height: 34rem;
    text-transform: uppercase;
    overflow-wrap: anywhere;


    @media all and (width >= 768px) {
        font-size: 40rem;
        line-height: 54rem;
    }

    @media all and (width >= 1280px) {
        font-size: 40rem;
        line-height: 54rem;
        letter-spacing: 1rem;
    }

    @media all and (width >= 1440px) {
        font-size: 40rem;
        line-height: 54rem;
        letter-spacing: 2rem;
    }
}
.hy_typo_h4, .hy_typo_text h4{
    font-family: 'Talina', sans-serif;
    font-size: 20rem;
    line-height: 30rem;
    text-transform: uppercase;
    overflow-wrap: anywhere;


    @media all and (width >= 768px) {
        font-size: 24rem;
        line-height: 34rem;
    }

    @media all and (width >= 1280px) {
        font-size: 27rem;
        line-height: 37rem;
        letter-spacing: 1rem;
    }

    @media all and (width >= 1440px) {
        font-size: 30rem;
        line-height: 40rem;
        letter-spacing: 2rem;
    }
}
.hy_typo_h5, .hy_typo_text h5{
    font-family: 'Talina', sans-serif;
    font-size: 16rem;
    line-height: 24rem;
    text-transform: uppercase;
    overflow-wrap: anywhere;


    @media all and (width >= 768px) {
        font-size: 20rem;
        line-height: 26rem;
    }

    @media all and (width >= 1280px) {
        font-size: 23rem;
        line-height: 30.5rem;
        letter-spacing: 1rem;
    }

    @media all and (width >= 1440px) {
        font-size: 26rem;
        line-height: 35rem;
        letter-spacing: 2rem;
    }
}
.hy_typo_h6, .hy_typo_text h6{
    font-family: 'Poppins', sans-serif;
    font-size: 16rem;
    line-height: 24rem;
    font-weight: bold;
    text-transform: uppercase;
    overflow-wrap: anywhere;


    @media all and (width >= 768px) {
        font-size: 18rem;
        line-height: 26rem;
    }

    @media all and (width >= 1280px) {
        font-size: 22rem;
        line-height: 31rem;
    }

    @media all and (width >= 1440px) {
        font-size: 26rem;
        line-height: 36rem;
    }
}

.hy_typo_text h1,
.hy_typo_text h2,
.hy_typo_text h3,
.hy_typo_text h4,
.hy_typo_text h5,
.hy_typo_text h6{
    margin-bottom: clamp(20rem, 0.5em, calc(var(--line-break) * 2));
}
.hy_typo_text p{
    word-break: keep-all;
}
.hy_typo_text p:not(:last-child){
    margin-bottom: 1lh;
}
.hy_typo_text ul{
    padding-left: 30rem;
    box-sizing: border-box;
    margin-bottom: 1lh;
    line-height: inherit;
}
.hy_typo_text ul li{
    position: relative;
    line-height: inherit;
    padding-left: 10rem;
    margin-bottom: var(--spacing-gap-y);
}
.hy_typo_text ul li::before {
    content: "";
    background-repeat: no-repeat;
    position: absolute;
    left: -30rem;
    top: 16rem;
    height: 11rem;
    width: 11rem;
    background-color: var(--accent);
    border-radius: 50%;
}
.hy_typo_text ol{
    padding-left: 30rem;
    box-sizing: border-box;
    list-style-position: outside;
    counter-reset: ol;
    line-height: inherit;
    margin-bottom: 1lh;
}
.hy_typo_text ol li{
    position: relative;
    line-height: inherit;
    margin-bottom: var(--spacing-gap-y);
    counter-increment: ol;
}
.hy_typo_text ol li::before{
    content: counter(ol);
    background-repeat: no-repeat;
    position: absolute;
    left: -30rem;
    top: 0;
    border-radius: 50%;
    font: inherit;
}
.hy_typo_text a:not([class]){
    display: inline-block;
    color: var(--color-accent-2);
}
.hy_typo_text a:not([class]):hover{
    color: var(--color-accent-3);
}