@font-face{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/poppins-regular.woff2) format("woff2");
}

@font-face{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/poppins-medium.woff2) format("woff2");
}

@font-face{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fonts/poppins-semibold.woff2) format("woff2");
}

@font-face{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fonts/poppins-bold.woff2) format("woff2");
}

@font-face{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(fonts/poppins-extrabold.woff2) format("woff2");
}

:root {
    --link: oklch(0.36 0.10 230);
    --link-hover: oklch(0.26 0.08 230);
    --link-focus-light: oklch(0.46 0.13 230);
    --link-on-dark: oklch(0.72 0.12 230);
    --link-on-dark-hover: oklch(0.82 0.08 230);
    --link-focus-dark: oklch(0.82 0.08 230);
}

.link-text,
.link-text-on-dark {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    border-radius: .125rem;
    transition: all .15s ease-out;
}

.link-text {
    color: var(--link);
    text-decoration-color: var(--link);
}

.link-text-on-dark {
    color: var(--link-on-dark);
    text-decoration-color: var(--link-on-dark);
}

.link-text:hover,
.link-text-on-dark:hover {
    text-decoration-color: transparent;
    text-shadow: .4px 0 0 currentColor,-.4px 0 0 currentColor;
}

.link-text:hover {
    color: var(--link-hover);
}

.link-text-on-dark:hover {
    color: var(--link-on-dark-hover);
}

.link-text:focus-visible {
    outline: 2px solid var(--link-focus-light);
    outline-offset: 2px;
}

.link-text-on-dark:focus-visible {
    outline: 2px solid var(--link-focus-dark);
    outline-offset: 2px;
}

@media (prefers-reduced-motion:reduce){
    .link-text,
    .link-text-on-dark {
        transition: none;
    }
}