2 --palette0: rgb
(148,26,20);
3 --palette0-t: rgb
(148,26,20,0.8);
4 --palette0-d: rgb
(100,5,0);
5 --palette0-l: rgb
(172,78,73);
6 --palette1: rgb
(227,93,36);
7 --palette1-d: rgb
(170,51,0);
8 --palette1-h: rgb
(242,72,0);
9 --palette1-l: rgb
(243,157,121);
10 --palette1-u: rgb
(255,101,36);
11 --palette2: rgb
(236,222,222);
12 --palette2-d: rgb
(230,198,196);
13 --palette2-l: rgb
(255,250,250);
14 --palette3: rgb
(13,62,86);
15 --palette3-d: rgb
(2,38,56);
16 --palette3-l: rgb
(5,76,111);
18 --color-bg: var
(--palette2
);
19 --color-bg-light: var
(--palette2-l
);
20 --color-bg-dark: var
(--palette2-d
);
22 --color-text-link: var
(--palette3-l
);
23 --color-text-active: var
(--palette3-d
);
24 --color-header: var
(--palette0-t
);
25 --color-header: var
(--palette0-l
);
26 --color-header-dark: var
(--palette0
);
27 --color-header-contrast: var
(--palette3
);
29 background-color: var
(--color-bg
);
30 color: var
(--color-text
);
33 color: var
(--color-text-link
);
37 color: var
(--color-text-active
);
44 text-decoration: underline
;
53 justify-content: center
;
56 background-color: var
(--color-header
);
60 font-size: calc
(10pt + 0.25vw); /* at least 60 chars wide */
61 /* font-size: 1.8rem; */
66 background-color: var
(--color-header
);
69 flex-direction: column
;
71 justify-content: center
;
78 box-shadow: 2px 1px 2px black
;
79 border: 1px solid black
;
80 background-color: var
(--color-header-contrast
);
87 box-shadow: 2px 1px black
;
88 border: 1px solid black
;
91 background-color: var
(--color-header-contrast
);
92 color: var
(--color-bg
);
94 border: thin solid black
;
106 fill: var
(--color-text-link
);
108 body
> nav a
> summary
{
111 body
> nav a
> svg:hover
,
112 body
> nav a
> svg:active
,
113 body
> nav svg
.selected
{
114 fill: var
(--color-text-active
);
118 justify-content: center
;
120 background-color: var
(--color-bg
);
122 body
> nav
> footer
{
124 font-family: fantasy
;
125 background-color: var
(--color-header-dark
);
126 color: var
(--color-bg
);
127 border-radius: 0 0 1.3rem 1.3rem;
130 @media screen and
(orientation:landscape
) {
131 body
> main
> article
{
134 background-color: var
(--color-bg-light
);
135 border: 1px solid black
;
137 box-shadow: 2px 1px 2px black
;
140 body
> main
> article
> * {
143 @media screen and
(orientation:portrait
) {
145 position: -webkit-sticky
;
156 body
> nav
> footer
{
162 justify-content: space-around
;
166 div
.speedy-cards
> a
{
169 text-decoration: none
;
175 box-shadow: 2px 1px 2px black
;
176 border: 1px solid black
;
180 background-color: var
(--color-bg-dark
);
182 div
.speedy-cards
> a
> div
{
186 div
.speedy-cards
> a
> img
{
193 background-size: 100% 100%;
195 border: 1px solid black
;
197 div
.speedy-cards
> br
{
198 /* Linebreaks are inserted and made invisible to make text browsers and
199 ARIA-readers break between anchors */
214 ul
.pagination
> li
.disabled
{
217 text-decoration: none
;
218 pointer-events: none
;