:root {
    --font-default: 'Yu Gothic', sans-serif;
    --font-programmer: 'Consolas', 'Courier New', monospace;
    --font-business: 'Yu Gothic', sans-serif;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    font-family: var(--font-default);
}

@media (min-width: 768px) {
    html {
        font-size: 24px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Palette-themed button — uses colours from ColorPalette.cs via CSS variables */
.btn-palette {
    background-color: var(--color-text-accent);
    border-color: var(--color-text-accent);
    color: #fff;
}
.btn-palette:hover,
.btn-palette:focus {
    background-color: color-mix(in srgb, var(--color-text-accent) 80%, #000);
    border-color: color-mix(in srgb, var(--color-text-accent) 80%, #000);
    color: #fff;
}
.btn-palette:active {
    background-color: color-mix(in srgb, var(--color-text-accent) 65%, #000);
    border-color: color-mix(in srgb, var(--color-text-accent) 65%, #000);
    color: #fff;
}

body {
    position: relative;
    margin: 0;
    padding: 50px;
    padding-bottom: var(--footer-height);
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-default);
    background: transparent;
}

/* Full-viewport backdrop (must be z-index 0+, not negative — or it hides behind body bg) */
.diagonal-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.diagonal-bg__split {
    position: absolute;
    inset: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 100%);
}

.diagonal-bg__line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.diagonal-bg__line line {
    stroke-width: var(--diagonal-line-width);
    vector-effect: non-scaling-stroke;
    fill: none;
}

.site-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: var(--site-padding-inline);
    padding-right: var(--site-padding-inline);
    box-sizing: border-box;
    background: transparent;
}

h1,h2{
    padding-top:50px;
}

footer.footer {
    z-index: 2;
}

/* Unclassed images in page content only — footer & profile classes use imagesizes.css */
main img {
    width: var(--content-img-width);
    max-width: var(--content-img-max-width);
    height: auto;
    padding-bottom:20px;
}

main video {
    width: var(--content-video-width);
    max-width: var(--content-video-max-width);
    height: auto;
    padding:5px;
}

footer.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--footer-height);
    min-height: var(--footer-height);
    padding: var(--footer-padding-block) var(--footer-padding-inline) !important;
    margin: 0 !important;
    line-height: normal !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--footer-gap);
    box-sizing: border-box;
}

pre code{
    font-size: 16px;
    padding:20px;
}

footer.footer a {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.reveal {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.from-left {
    transform: translateX(-60px);
}

.reveal.from-right {
    transform: translateX(60px);
}

.reveal.from-bottom {
    transform: translateY(40px);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

.person-programmer {
    font-family: var(--font-programmer);
}

.person-business {
    font-family: var(--font-business);
}