:root {
    --main-bg-color: #252324;
    --accent-color: #00AEEF;
    --accent-color-hover: #00A2DE;
    --accent-color-press: #0096CE;
    --text-color-light: #ffffff;
    --text-color-dark: #2C2F34;
}

html {
    height: 100%;
    /* The navbar is sticky, so in-page anchors (#certificates and friends) would otherwise land
       underneath it. Roughly navbar height + a little breathing room. */
    scroll-padding-top: 7rem;
}

/* min-height, not height: a sticky child only sticks within its parent's box, so a viewport-tall
   body would let the navbar scroll away again one screen down. */
body {
    min-height: 100%;
}

body {
    font-family: 'Microsoft YaHei UI';
    background-color: var(--main-bg-color);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
    background-size: 100px 100px;
    display: flex;
    flex-direction: column;
}

/* Single source of truth for how far page content (the cards) sits below the navbar.
   Layouts must NOT put Bootstrap pt-* utilities on <main> — those carry !important
   and would silently override this value. */
main {
    flex: 1;
    padding-top: 3rem; /* == Administration's original pt-5; the single knob for card-to-navbar gap */
}