/* =========================
   FONTS
========================= */
@font-face {
    font-family: "Comica";
    src: url(/css/fonts/typo-comica.regular.otf) format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "BadComic";
    src: url(/css/fonts/BadComic-Regular.otf) format("opentype");
    font-display: swap;
}

/* =========================
   ROOT TYPO SCALE
========================= */
:root {
    /* Fluid font sizes */
    --fs-h1: clamp(2.4rem, 4vw, 3.5rem);
    --fs-h2: clamp(1.75rem, 3.2vw, 2.8rem);
    --fs-h3: clamp(1.5rem, 2.5vw, 2.2rem);
    --fs-h4: clamp(1.4rem, 2vw, 3rem);
    --fs-h5: clamp(0.9rem, 1.2vw, 1.1rem);
    --fs-p: clamp(0.95rem, 1.2vw, 1.2rem);

    /* Line heights */
    --lh-tight: 1.2;
    --lh-normal: 1.5;
}

/* =========================
   HEADINGS
========================= */

h1 {
    font-family: 'Comica';
    font-weight: bold;
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    color: var(--prim-color);
    z-index: 100;
}

h2 {
    font-family: 'Comica';
    font-weight: bold;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
}

h3 {
    font-family: 'Comica';
    font-weight: bold;
    font-size: var(--fs-h3);
    line-height: var(--lh-tight);
}

h4 {
    font-family: 'BadComic';
    font-weight: bolder;
    font-size: var(--fs-h4);
    line-height: var(--lh-tight);
    color: var(--prim-color);
}

h5 {
    font-family: 'BadComic';
    font-weight: bolder;
    font-size: var(--fs-h5);
    line-height: var(--lh-tight);
    color: var(--sec-color);
}

/* =========================
   BODY TEXT
========================= */

p {
    font-family: 'BadComic';
    font-size: var(--fs-p);
    line-height: var(--lh-normal);
    color: var(--prim-color);
}


#sub-text-field h2,
#sub-text-field h3,
#sub-text-field h4,
#faq h2 {
    color:var(--prim-color);
}


.sub-text h2,
.sub-text h3,
.sub-text h4,
.sub-text label,
.faq h2 {
    color:var(--prim-color);
}

.sub-text label,
.sub-text span.small{
    color:var(--prim-color);
    font-family: 'Comica';
}

.sub-text label a{
    color: var(--link-color)!important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(201,110,87,0.5)!important;
    transition: all 0.2s ease;
}

.sub-text-cc h2,
.sub-text-cc a,
.sub-text-cc p {
    
    font-family: 'Comica'!important;
    color:#72422f!important;
}

.egg-list i,
.egg-list strong{
    color: var(--prim-color);
}


#faq h3 {
     text-shadow:  1px  1px 1px var(--prim-color),
                  1px -1px 1px var(--prim-color),
                 -1px  1px 1px var(--prim-color),
                 -1px -1px 1px var(--prim-color);
}

p a:not(.neo-btn),
li a:not(.neo-btn) {
    color: var(--link-color)!important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(201,110,87,0.5)!important;
    transition: all 0.2s ease;
}

p a:not(.neo-btn):hover,
li a:not(.neo-btn):hover {
    color: var(--link-hover)!important;
    text-decoration-color: var(--link-color)!important;
}


.timeline p a:not(.neo-btn),
.timeline li a:not(.neo-btn) {
    color: var(--link-hover)!important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(201,110,87,0.5)!important;
    transition: all 0.2s ease;
}

.timeline p a:not(.neo-btn):hover,
.timeline li a:not(.neo-btn):hover {
    color: var(--link-color)!important;
    text-decoration-color: var(--link-color)!important;
}



/* =========================
   OPTIONAL: SMALL DEVICES TWEAK
========================= */

@media (max-width: 480px) {
    h1 {
        letter-spacing: -0.02em;
    }

    h2 {
        letter-spacing: -0.01em;
    }
}

/* =========================
   OPTIONAL: LARGE SCREENS
========================= */

@media (min-width: 1400px) {
    :root {
        --fs-h1: clamp(2.5rem, 3vw, 4rem);
        --fs-h2: clamp(2rem, 2.5vw, 3rem);
    }
}