@import url("https://use.typekit.net/lny1vki.css");
* {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-interstate);
}

.header2-xl {
    font-family: var(--font-interstate);
    font-size: 80px;
    font-weight: var(--font-weight-semibold);
}
.header1-xl {
    font-family: var(--font-interstate);
    font-size: var(--font-size-peta);
    font-weight: var(--font-weight-extralight);
    line-height: var(--line-height-tiny);
    letter-spacing: var(--letter-spacing-peta);
}

.header1 {
    font-family: var(--font-interstate);
    font-size: var(--font-size-tera);
    font-weight: var(--font-weight-extralight);
    line-height: var(--line-height-tiny);
    letter-spacing: var(--letter-spacing-tera);
}

.header2 {
    font-family: var(--font-interstate);
    font-size: var(--font-size-giga);
    font-weight: var(--font-weight-extralight);
    line-height: var(--line-height-tiny);
    letter-spacing: var(--letter-spacing-giga);
}

.header3 {
    font-family: var(--font-interstate);
    font-size: var(--font-size-mega);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-giga);
}

.header4 {
    font-family: var(--font-interstate);
    font-size: var(--font-size-kilo);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-small);
    letter-spacing: var(--letter-spacing-mega);
}

.paragraph-l {
    font-family: var(--font-interstate);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-medium);
    letter-spacing: var(--letter-spacing-mega);
}

.paragraph {
    font-family: var(--font-interstate);
    font-size: var(--font-size-milli);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-tall);
    letter-spacing: var(--letter-spacing-kilo);
}

.paragraph-s {
    font-family: var(--font-interstate);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-tall);
    letter-spacing: var(--letter-spacing-none);
}
.extralight {
    font-weight: 300;
}     
/* .superscript {} */

@media (max-width: 768px) {
    .header1-xl {
        font-family: var(--font-interstate);
        font-size: var(--font-size-giga);
        font-weight: var(--font-weight-extralight);
        line-height: var(--line-height-tiny);
        letter-spacing: var(--letter-spacing-tera);
    }
    
    .header1 {
        font-family: var(--font-interstate);
        font-size: var(--font-size-giga);
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-tiny);
        letter-spacing: var(--letter-spacing-tera);
    }
    
    .header2 {
        font-family: var(--font-interstate);
        font-size: var(--font-size-mega);
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-small);
        letter-spacing: var(--letter-spacing-giga);
    }
    
    .header3 {
        font-family: var(--font-interstate);
        font-size: var(--font-size-kilo);
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-small);
        letter-spacing: var(--letter-spacing-mega);
    }
    
    .header4 {
        font-family: var(--font-interstate);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-medium);
        letter-spacing: var(--letter-spacing-mega);
    }
}

/* || Text Themes */
.classic-text {
    color: var(--text-color-primary);
}
.classic-text .header1-xl,
.classic-text .header1,
.classic-text .header2,
.classic-text .header3,
.classic-text .header4,
.classic-text ul {
    color: var(--text-color-secondary);
}

.classic-text .header2:not(:first-child),
.classic-text .header3:not(:first-child),
.classic-text .header4:not(:first-child) {
    color: var(--text-color-primary);
}

.white-text {
    color: var(--text-color-primary-inverse);
}
.white-text .header1-xl,
.white-text .header1,
.white-text .header2,
.white-text .header3,
.white-text .header4 {
    color: var(--text-color-secondary-inverse);
}

.blue-text {
    color: var(--text-color-secondary);
}
.dark-blue-text {
    color: var(--brand-secondary);
}
.gray-text {
    color: var(--text-color-tertiary);
}
.black-text {
    color: var(--text-color-primary);
}


.alert-text {
    color: red;
}

.link {
    color: var(--text-color-links-primary);
    text-decoration: none;
}
.link:hover {
    color: var(--text-color-links-primary-hover);
}
.link-white {
    color: var(--text-color-links-white);
    text-decoration: none;
}
.link-white:hover {
    /* color: var(--text-color-links-white-hover); */
    color: #00a8e2;
}
.link-white:hover svg path {
    stroke: #00a8e2;
}

.link-black {
    color: var(--text-color-links-black);
    text-decoration: none;
}
.link-black:hover {
    color: var(--text-color-links-black-hover);
}



.bold {
    font-weight: 700;
}

/* || Lists */

ul {
    padding-left: 1.5em;
}

.underline {
    text-decoration: underline;
}


/* || <a> tags */