:root {
    --kld-color-primary: #155eef;
    --kld-color-secondary: #0f172a;
    --kld-color-accent: #14b8a6;
    --kld-color-background: #ffffff;
    --kld-color-text: #172033;
    --kld-content-width: 720px;
    --kld-wide-width: 1200px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--kld-color-background);
    color: var(--kld-color-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: var(--kld-line-height, 1.6);
}

:focus-visible { outline: 3px solid var(--kld-color-primary); outline-offset: 3px; }

.kld-skip-link {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10000;
    padding: .75rem 1rem;
    transform: translateY(-200%);
    border-radius: .5rem;
    background: var(--kld-color-secondary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.kld-skip-link:focus {
    transform: translateY(0);
    outline: 3px solid var(--kld-color-primary);
    outline-offset: 3px;
}

.admin-bar .kld-skip-link:focus {
    top: calc(1rem + 32px);
}

@media (max-width: 782px) {
    .admin-bar .kld-skip-link:focus {
        top: calc(1rem + 46px);
    }
}

img,
video { max-width: 100%; height: auto; }


#form_contact {
    scroll-margin-top: 7rem;
}

@media (max-width: 600px) {
    #form_contact {
        scroll-margin-top: 8rem;
    }
}

.admin-bar #form_contact {
    scroll-margin-top: 9rem;
}