-:root {
- --palette0: rgb(148,26,20);
- --palette0-t: rgb(148,26,20,0.8);
- --palette0-d: rgb(100,5,0);
- --palette0-l: rgb(172,78,73);
- --palette1: rgb(227,93,36);
- --palette1-d: rgb(170,51,0);
- --palette1-h: rgb(242,72,0);
- --palette1-l: rgb(243,157,121);
- --palette1-u: rgb(255,101,36);
- --palette2: rgb(236,222,222);
- --palette2-d: rgb(230,198,196);
- --palette2-l: rgb(255,250,250);
- --palette3: rgb(13,62,86);
- --palette3-d: rgb(2,38,56);
- --palette3-l: rgb(5,76,111);
-
- --color-bg: var(--palette2);
- --color-bg-light: var(--palette2-l);
- --color-bg-dark: var(--palette2-d);
- --color-text: black;
- --color-text-link: var(--palette3-l);
- --color-text-active: var(--palette3-d);
- --color-header: var(--palette0-t);
- --color-header: var(--palette0-l);
- --color-header-dark: var(--palette0);
- --color-header-contrast: var(--palette3);
-
- background-color: var(--color-bg);
- color: var(--color-text);
-}
-a {
- color: var(--color-text-link);
-}
-a:hover,
-a:active {
- color: var(--color-text-active);
-}
-h1 {
- text-align: center;
- font-size: 1.66em;
-}
-h2 {
- text-decoration: underline;
- font-size: 1.33em;
-}
-body {
- margin: 0;
-}
-body > header {
- padding: 0 0 1px 0;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-flow: row wrap;
- background-color: var(--color-header);
-}
-body > main {
- margin: 0 1vw;
- font-size: calc(10pt + 0.25vw); /* at least 60 chars wide */
- /* font-size: 1.8rem; */
- font-family: sans;
-}
-body > footer {
- font-size: 0.8rem;
- background-color: var(--color-header);
- height: 4rem;
- display: flex;
- flex-direction: column;
- text-align: center;
- justify-content: center;
-}
-body > header > img {
- margin: 0 3px 0 0;
- min-width: 128px;
- min-height: 128px;
- border-radius: 50%;
- box-shadow: 2px 1px 2px black;
- border: 1px solid black;
- background-color: var(--color-header-contrast);
-}
-body > header > div {
- min-width: 256px;
- max-width: 50vw;
- font-size: 1.1rem;
- font-family: fantasy;
- box-shadow: 2px 1px black;
- border: 1px solid black;
- border-radius: 3px;
- padding: 3px;
- background-color: var(--color-header-contrast);
- color: var(--color-bg);
- text-align: center;
- border: thin solid black;
-}
-body > nav {
- opacity: 0.8;
-}
-body > nav svg {
- margin: 0 0;
- padding: 0 0;
- width: 3rem;
- max-width: 12.5vw;
- height: 3rem;
- max-height: 12.5vw;
- fill: var(--color-text-link);
-}
-body > nav a > summary {
- display: none;
-}
-body > nav a > svg:hover,
-body > nav a > svg:active,
-body > nav svg.selected {
- fill: var(--color-text-active);
-}
-body > nav > div {
- display: flex;
- justify-content: center;
- flex-flow: row wrap;
- background-color: var(--color-bg);
-}
-body > nav > footer {
- font-size: 1.3rem;
- font-family: fantasy;
- background-color: var(--color-header-dark);
- color: var(--color-bg);
- border-radius: 0 0 1.3rem 1.3rem;
- text-align: center;
-}
-@media screen and (orientation:landscape) {
- body > main > article {
- margin: 0 1vw;
- padding: 0 1vw;
- background-color: var(--color-bg-light);
- border: 1px solid black;
- border-radius: 3px;
- box-shadow: 2px 1px 2px black;
- }
-}
-body > main {
- overflow-y: auto;
-}
-body > main > article > * {
- overflow-y: auto;
-}
-@media screen and (orientation:portrait) {
- body > nav {
- position: -webkit-sticky;
- position: sticky;
- z-index: 100;
- top: 0;
- }
- body > nav svg {
- width: 6vh;
- max-width: 3rem;
- height: 6vh;
- max-height: 3rem;
- }
- body > nav > footer {
- font-size: 2vh;
- }
-}
-div.speedy-cards {
- display: flex;
- justify-content: space-around;
- flex-flow: row wrap;
- font-size: 0.8em;
-}
-div.speedy-cards > a {
- position: relative;
- display: block;
- text-decoration: none;
- font-size: 5vmin;
- font-weight: bold;
- margin: 3vw;
- width: 33vmin;
- height: 33vmin;
- box-shadow: 2px 1px 2px black;
- border: 1px solid black;
- border-radius: 3px;
- padding: 3px;
- overflow: hidden;
- background-color: var(--color-bg-dark);
-}
-div.speedy-cards > a > div {
- font-size: 3vmin;
- font-weight: normal;
-}
-div.speedy-cards > a > img {
- opacity: 0.2;
- position: absolute;
- top: 3vmin;
- right: 1vmin;
- width: 40%;
- height: 40%;
- background-size: 100% 100%;
- border-radius: 50%;
- border: 1px solid black;
-}
-div.speedy-cards > br {
- /* Linebreaks are inserted and made invisible to make text browsers and
- ARIA-readers break between anchors */
- display: none;
-}
-div.page-nav {
- font-size: 0.8em;
-}
-ul.pagination {
- padding: 0;
- list-style: none;
- text-align: center;
-}
-ul.pagination > li {
- margin: 0 0.2em;
- display: inline;
-}
-ul.pagination > li.disabled {
- cursor: not-allowed;
- opacity: 0.5;
- text-decoration: none;
- pointer-events: none;
-}