/************************************
Table of Contents 
************************************/

/*
- Fonts
- Font Weights
- Font Sizing
- Regular Headers
- Display Headers
- Paragraph and Other Text
*/


/****** Fonts ******/

@font-face{
    font-family: "Oxanium";
    src: url("/assets/fonts/Oxanium/Oxanium-VariableFont_wght.ttf") format("truetype");
    font-weight: 125 950;
    font-stretch: 75% 125%;
    font-style: normal;
}

@font-face{
    font-family: "Newsreader";
    src: url("/assets/fonts/Newsreader/Newsreader-VariableFont_opsz\,wght.ttf") format("truetype"),
    url("/assets/fonts/Newsreader/Newsreader16pt-Regular.woff2") format("woff2"), url("/assets/fonts/Newsreader/Newsreader16pt-Italic.woff2") format("woff2");
    font-weight: 125 950;
    font-stretch: 75% 125%;
    font-style: italic normal;
}

:root {
    --font-newsreader: 'Newsreader', serif;
    --font-oxanium: 'Oxanium', sans-serif;
    --font-fw-extralight: 100;
    --font-fw-light: 300;
    --font-fw-regular: 400;
    --font-fw-medium: 500;
    --font-fw-semibold: 600;
    --font-fw-bold: 700;
    --font-fw-extrabold: 800;
}

.newsreader {
    font-family: var(--font-newsreader);
    font-weight: var(--font-fw-light);
}
.oxanium {
    font-family: var(--font-oxanium);
    font-weight: var(--font-fw-regular);
}

/****** Font Weights ******/

/* fw is shorthand for font weight */

.fw-extralight {
    font-weight: var(--font-fw-extralight);
}

.fw-light {
    font-weight: var(--font-fw-light);
}
.fw-regular {
    font-weight: var(--font-fw-regular);
}
.fw-medium {
    font-weight: var(--font-fw-medium);
}
.fw-semibold {
    font-weight: var(--font-fw-semibold);
}
.fw-bold {
    font-weight: var(--font-fw-bold);
}
.fw-extrabold {
    font-weight: var(--font-fw-extrabold);
}


/****** Font Sizing ******/

/* This is adjust the sizing of any body text up or down a bit from the normal body font size.
Don't use for header tags (e.g. h1, h2, etc ...) */
/* fs is shorthand for font size */

.fs-3extralarge {
    font-size:  2rem;
}
.fs-2extralarge {
    font-size:  1.5rem;
}
.fs-extralarge {
    font-size:  1.25rem;
}
.fs-large {
    font-size:  1.125rem;
}
.fs-medium {
    font-size:  1rem;
}
.fs-small {
    font-size:  0.875rem;
}
.fs-extrasmall {
    font-size:  0.75rem;
}

@media screen and (max-width:648px){
    .fs-3extralarge {
        font-size:  1.75rem;
    }
    .fs-2extralarge {
        font-size:  1.25rem;
    }
    .fs-extralarge {
        font-size:  1.125rem;
    }
    .fs-large {
        font-size:  1rem;
    }
    .fs-medium {
        font-size:  0.875rem;
    }
    .fs-small {
        font-size:  0.75rem;
    }
    .fs-extrasmall {
        font-size:  0.5rem;
    }
}


/****** Regular Headers ******/


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-oxanium);
    font-weight: var(--font-fw-bold);
}
h1,
.h1 {
    font-size: 2rem;
    line-height: 1.75rem;
}
@media screen and (max-width: 767px) {
    h1,
    .h1 {
        font-size: 1.875rem;
    }
}
h2,
.h2 {
    font-size: 1.875rem;
    line-height: 1.625rem;
}
@media screen and (max-width: 767px) {
    h2,
    .h2 {
        font-size: 1.75rem;
        line-height: 1.85rem;
    }
}
h3,
.h3 {
    font-size: 1.75rem;
    line-height: 1.5rem;
}
@media screen and (max-width: 767px) {
    h3,
    .h3 {
        font-size: 1.5rem;
    }
}
h4,
.h4 {
    font-size: 1.5rem;
    line-height: 1.325rem;
}
@media screen and (max-width: 767px) {
    h4,
    .h4 {
        font-size: 1.25rem;
    }
}
h5,
.h5 {
    font-size: 1.25rem;
    line-height: 1.25rem;
}
@media screen and (max-width: 767px) {
    h5,
    .h5 {
        font-size: 1.125rem;
    }
}
h6,
.h6 {
    font-size: 1.125rem;
    line-height: 1.25rem;
}
@media screen and (max-width: 767px) {
    h6,
    .h6 {
        font-size: 1.0625rem;
    }
}


/****** Display Headers ******/

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-weight: var(--font-fw-medium);
}

.display-1 {
    font-size: 4.25rem;
    line-height: 4.625rem;
}
@media screen and (max-width: 767px) {
    .display-1 {
        font-size: 3.875rem;
    }
}
.display-2 {
    font-size: 3.625rem;
    line-height: 3.75rem;
}
@media screen and (max-width: 767px) {
    .display-2 {
        font-size: 3.25rem;
    }
}
.display-3 {
    font-size: 3.125rem;
    line-height: 2.75rem;
}
@media screen and (max-width: 767px) {
    .display-3 {
        font-size: 2.75rem;
    }
}
.display-4 {
    font-size: 2.75rem;
    line-height: 2.375rem;
}
@media screen and (max-width: 767px) {
    .display-4 {
        font-size: 2.125rem;
    }
}
.display-5 {
    font-size: 2.375rem;
    line-height: 2rem;
}
@media screen and (max-width: 767px) {
    .display-5 {
        font-size: 1.625rem;
    }
}
.display-6 {
    font-size: 2rem;
    line-height: 1.75rem;
}
@media screen and (max-width: 767px) {
    .display-6  {
        font-size: 1.25rem;
    }
}


/****** Paragraph and Other Text ******/

a {
    color: var(--base-color-npblue-900);
    text-decoration: none;
}

a:hover,
a:active,
.footer-links ul li a:hover{
    color: var(--base-color-npblue-700);
}

strong {
    font-weight: 700;
}

.fst-italic{
    font-style: italic;
}

.text-md-white{
    color:#FFF;
}

/* Reset color responsive */
@media screen and (max-width: 767px) {
    .text-md-white{
        color:inherit;
    }
}

.dest.display-1{
    font-size: clamp(20px, 9vw, 110px);
    line-height:clamp(20px, 9vw, 110px);
}

/* letter spacing */

.lp-1{
    letter-spacing:1.2px;
}
.lp-2{
    letter-spacing:1.32px;
}
.lp-3{
    letter-spacing:8.7px;
}
.lp-4{
    letter-spacing:1.5rem;
}
.lp-5{
    letter-spacing:2rem;
}

.leading-20{
    line-height:20px
}

.leading-32{
    line-height:32px
}