body {
    background-color: var(--color-light);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}

p {
    text-align: initial;
}

a {
    text-decoration: none;
    color: var(--color-primary);
}

a:hover {
    @if $color-link-hover == lighten { color: color-mix(in srgb, var(--color-primary), var(--color-white) 15%); } 
    @if $color-link-hover == darken { color: color-mix(in srgb, var(--color-primary), var(--color-black) 15%); }
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top:1px solid var(--color-border);
}

h1 {
    font-size: $h1-font-size;
}
h2 {
    font-size: $h2-font-size;
}
h3 {
    font-size: $h3-font-size;
}
h4 {
    font-size: $h4-font-size;
}
h5 {
    font-size: $h5-font-size;
}
h6 {
    font-size: $h6-font-size;
}
h1, h2, h3, h4 {
    font-weight: 300;
}
h4, h5 {
    font-weight: 400;
}

.h1 {
    font-size: $h1-font-size !important;
}
.h2 {
    font-size: $h2-font-size !important;
}
.h3 {
    font-size: $h3-font-size !important;
}
.h4 {
    font-size: $h4-font-size !important;
}
.h5 {
    font-size: $h5-font-size !important;
}
.h6 {
    font-size: $h6-font-size !important;
}
.h1, .h2, .h3, .h4 {
    font-weight: 300 !important;
}
.h4, .h5 {
    font-weight: 400 !important;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.1 !important;
}

small {
    font-size: 80%;
    font-weight: 400;
}
.small {
    font-size: 80% !important;
    font-weight: 400 !important;
}
.strong {
    font-weight: bold !important;
}

.container {
    width: 100%;
    max-width: $container-width;
    padding-right: $container-padding;
    padding-left: $container-padding;
    margin-right: auto;
    margin-left: auto;
}

.flex-row {
    flex-direction: row !important;
}
.flex-column {
    flex-direction: column !important;
}
.flex-wrap {
    flex-wrap: wrap !important;
}

.items-start {
    align-items: flex-start !important;
}
.items-end {
    align-items: flex-end !important;
}
.items-center {
    align-items: center !important;
}
.items-baseline {
    align-items: baseline !important;
}
.items-stretch {
    align-items: stretch !important;
}

.justify-start {
    justify-content: flex-start !important;
}
.justify-end {
    justify-content: flex-end !important;
}
.justify-center {
    justify-content: center !important;
}
.justify-between {
    justify-content: space-between !important;
}
.justify-around {
    justify-content: space-around !important;
}

.footer {
    margin-top: 1rem;
    opacity: 50%;
}
.footer p {
    text-align: center;
}