:root {
    --sl-color-ink: #080e2c;
    --sl-color-primary: #2c82c9;
    --sl-color-accent: #38eefc;
    --sl-color-warm: #f2784b;
    --sl-color-surface: #fff;
    --sl-focus-ring: 0 0 0 0.25rem rgb(56 238 252 / 55%);
}

body {
    color: var(--sl-color-ink);
    background: linear-gradient(145deg, rgb(44 130 201 / 10%), var(--sl-color-surface) 45%);
}

a {
    color: var(--sl-color-primary);
}

a:hover {
    color: var(--sl-color-ink);
}

:focus-visible {
    outline: 0;
    box-shadow: var(--sl-focus-ring);
}

.sl-masthead {
    min-height: 100vh;
}

.sl-logo {
    width: min(100%, 20rem);
    height: auto;
}

.sl-accent {
    border-inline-start: 0.35rem solid var(--sl-color-warm);
}