:root {
    --outline-color: black;

}

html {
    font-size: min(2dvh, 3.2dvw);
}


@media (max-aspect-ratio: 4/3) {
    html {
        font-size: min(2dvh, 3.2dvw);
    }
}
body {
    /*background: #f4f0ea;
    margin: 0;
    padding: 40px 20px;
    color: #2b2521;*/
    font-family: 'Inter', sans-serif;


}

/*FONT SIZES*/
.huge-font {
    font-size: 12rem;
}
.large-font {
    font-size: 9rem;
}
.big-font {
    font-size: 7rem;
}
.bigger-then-medium-font {
    font-size: 5rem;
}
.medium-font {
    font-size: 3.5rem;
}
.small-font {
    font-size: 2rem;
}
.smaller-font {
    font-size: 1.5rem;
}

.italic {
    font-style: italic;
}

.outline-text {
  --outline-color: var(--fg);
  --outline-width: 0.05rem;

  text-shadow:
    calc(var(--outline-width) * -1) calc(var(--outline-width) * -1) 0 var(--outline-color),
    0 calc(var(--outline-width) * -1) 0 var(--outline-color),
    var(--outline-width) calc(var(--outline-width) * -1) 0 var(--outline-color),
    calc(var(--outline-width) * -1) 0 0 var(--outline-color),
    var(--outline-width) 0 0 var(--outline-color),
    calc(var(--outline-width) * -1) var(--outline-width) 0 var(--outline-color),
    0 var(--outline-width) 0 var(--outline-color),
    var(--outline-width) var(--outline-width) 0 var(--outline-color);
}
.centered-text {
    text-align: center;
}
.color-accent {
    color: var(--accent);
}


.f-fraunces { font-family: 'Fraunces', serif; font-optical-sizing: auto; }
.f-cormorant { font-family: 'Cormorant Garamond', serif; }
.f-sourceserif { font-family: 'Source Serif 4', serif; }
.f-inter { font-family: 'Inter', sans-serif; }