html {
    max-width: 70ch;
    margin: auto;
    line-height: 1.5;
    accent-color: #E20E7B;
    font-size: 16pt;
    font-family: sans-serif;
}
html {
  color-scheme:light dark;
  background-color:canvas;
  color:canvastext;
}
a { color: #E20E7B}
a:visited { color: #6562F2}
img {
    max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
:is(tbody, table) > tr:nth-child(odd) {
    background: #0001;
}
td, th {
    padding: 0.5em;
}
fieldset {
    margin: 1em 0;
}
hr {
    margin: 2em 0;
}
@media (prefers-reduced-motion) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
main form {
    display: none;
}
label {
    display:block;
    color: #6562F2;
}
/* 
*   Hide and show via css based on location.hash
*   Not sure where the original
*   concept came from, I used it in a project back in
*   2016 from another project even earlier than that ...
*   So if anyone's google-fu could find it, that would be 
*   awesome.
*/
#story > * {
    display: none;
}
#story > *:last-child {
    display: block;
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.0125);
    }
    100% {
        transform: scale(1);
    }
}
#story > *:target {
    display: block;
    animation: pulse 0.5s linear 1;
}
#story > *:target ~ * {
    display: none;
}