:root {
    --白色: oklch(0.97 0 0);
    --浅灰色: oklch(0.7 0 0);
    --灰色: oklch(0.4 0 0);
    --黑色: oklch(0.31 0 0);
    --红色: oklch(0.5 0.18 21);
    --蓝色: oklch(0.47 0.13 250);
    --浅蓝色: oklch(0.9 0.05 250);
    --导航栏宽度: 5rem;
    --主体左右单边距: 10vw;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    text-decoration: none;
}

a:hover {
    cursor: pointer;
}

html {
    font-size: 16px;
    font-family: "MiSans Normal", sans-serif;
}

@media (min-width: 1200px) {
    html {
        font-size: 20px;
    }
}

.hidden {
    display: none !important;
}

body {
    background-color: var(--白色);
    min-height: 100vh;
}

footer {
    margin-top: 7rem;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--浅灰色);
}

footer p {
    margin-bottom: 1em;
}

footer a {
    display: inline-block;
    margin-right: 1em;
    color: var(--浅灰色);
}
footer a:hover {
    color: var(--蓝色);
}

.dev-warn {
    animation: blink 1s steps(2, start) infinite;
    color: var(--红色);  
}

@keyframes blink {
  to { visibility: hidden; }
}

@media print {
    body {
        background-color: #fff;
    }
    body > header {
        display: none;
    }
    footer {
        display: none;
    }
}