/* general */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img { border: 0 none; }
b, strong { font-weight: bold; }
i, em { font-style: italic; }
small, .small { font-size: 80%; }
sub, sup { font-size: 80%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25rem; }
sup { top: -0.5rem; }
abbr, acronym { border-bottom: 1px dotted #707070; cursor: help; }
.clearfix::before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}

/* light & dark mode styles -
borrowed fr. Alexander Sandberg's css-only method:
alexandersandberg.com/articles/creating-a-website-theme-switcher-with-css-only */
:root {
/* light mode */
--lt-switch-shadow: #373d4e /*rgba(55,61,78,1)*/;
--lt-switch-icon: url('../img/dark-mode-20px.png');
--lt-switch-text: "(w↔b)";
--lt-text: #222430 /*rgba(32,36,48,1)*/;
--lt-bg: #f5f5f5 /*rgba(230,230,230,1)*/;
--lt-links: #222 /*rgba(51,51,51,1)*/;
--lt-links-hov: /*#f2f2f2*/ rgba(240,240,240,1);
--lt-links-act: /*#f2f2f2*/ rgba(240,240,240,1);
--lt-links-bg: /*#ddd*/ rgba(220,220,220,.9);
--lt-links-bg-hov: /*#333*/ rgba(50,50,50,1);
--lt-links-bg-act: /*#333*/ rgba(50,50,50,1);
--lt-links-bs: /*#141414*/ rgba(200,200,200,.75);
--lt-links-bs-hov: /*#333*/ rgba(120,200,250,1);
--lt-links-bs-act: /*#333*/ rgba(120,200,250,1);

/* dark mode */
--dk-switch-shadow: #fcfcee /*rgba(252,252,238,1)*/;
--dk-switch-icon: url('../img/dark-mode-20px-neg.png');
--dk-switch-text: "(b↔w)";
--dk-text: #ececef /*rgba(238,238,238,1)*/;
--dk-bg: #18181c /*rgba(32,36,48,1)*/;
--dk-links: /*8fcfff*/ rgba(120,200,250,1);
--dk-links-hov: #e2e2e2 /*rgba(51,51,51,1)*/;
--dk-links-act: #0a0a0a /*rgba(51,51,51,1)*/;
--dk-links-bg: #282828 /*rgba(56,68,76)*/;
--dk-links-bg-hov: #0a0a0a /*rgba(56,68,76)*/;
--dk-links-bg-act: /*#333*/ rgba(120,200,250,.7);
--dk-links-bs: /*#141414*/ rgba(120,200,250,.3);
--dk-links-bs-hov: /*#333*/ rgba(120,200,250,.7);
--dk-links-bs-act: /*#333*/ rgba(120,200,250,.3);

/* default mode */
--switch-shadow-color: var(--dk-switch-shadow);
--switch-icon: var(--dk-switch-icon);
--switch-text: var(--dk-switch-text);
--text-color: var(--dk-text);
--text-color-inv: var(--dk-text-inv);
--bg-color: var(--dk-bg);
--links-color: var(--dk-links);
--links-color-hov: var(--dk-links-hov);
--links-color-act: var(--dk-links-act);
--links-bg-color: var(--dk-links-bg);
--links-bg-color-hov: var(--dk-links-bg-hov);
--links-bg-color-act: var(--dk-links-bg-act);
--links-bs-color: var(--dk-links-bs);
--links-bs-color-hov: var(--dk-links-bs-hov);
--links-bs-color-act: var(--dk-links-bs-act);
}

/* switched mode */
.theme-switch:checked ~ #page {
--switch-shadow-color: var(--lt-switch-shadow);
--switch-icon: var(--lt-switch-icon);
--switch-text: var(--lt-switch-text);
--text-color: var(--lt-text);
--bg-color: var(--lt-bg);
--links-color: var(--lt-links);
--links-color-hov: var(--lt-links-hov);
--links-color-act: var(--lt-links-act);
--links-bg-color: var(--lt-links-bg);
--links-bg-color-hov: var(--lt-links-bg-hov);
--links-bg-color-act: var(--lt-links-bg-act);
--links-bs-color: var(--lt-links-bs);
--links-bs-color-hov: var(--lt-links-bs-hov);
--links-bs-color-act: var(--lt-links-bs-act);
}

/* theme switcher */
.theme-switch { /* hides <input> checkbox */
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}

.switch-label {
display: block;
cursor: pointer;
/*height: 25px;*/
padding: 4px; border-radius: 5px;
background-color: transparent;
background-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
opacity: 1;
transition: opacity .2s ease-in-out 0s;
}
.switch-label:hover {
background-color: var(--links-bs-color-hov);
opacity: 1;
transition: opacity .2s ease-in-out 0s;
}

.switch-label::before {
display: inline-block;
vertical-align: middle;
content: var(--switch-icon);
transition: text-shadow .2s ease-in-out 0s;
}

.switch-label:hover::before,
.theme-switch:focus ~ #page .switch-label::before {
text-shadow: 0 0 1px var(--switch-shadow-color);
}

.switch-label::after {
display: inline-block;
vertical-align: middle;
content: var(--switch-text);
color: var(--switch-shadow-color);
font-size: 12px;
opacity: 0;
padding-left: 3px;
transition: opacity .2s ease-in-out 0s;
}

.switch-label:hover::after,
.theme-switch:focus ~ #page .switch-label::after {
opacity: 1;
}

html, body {
height: 100%; /* for proper theme switching */
margin: 0;
padding: 0;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: #90a4ae #cfd8dc;
}

/* fonts & root em sizing */
:root {
--f-size: 1rem;
--f-sans: lato,'trebuchet ms',verdana,tahoma,arial,helvetica,sans-serif;
--f-serif: georgia,'times new roman',times,serif;
}
html {
font-size: 16px; /* doing 1rem ≡ 16px */
}

body {
font-size: calc(13/16 * var(--f-size));
font-family: var(--f-sans);
font-weight: 400;
}

#page {
min-height: 100%; /* for proper theme switching */
background-color: var(--bg-color);
color: var(--text-color);
transition: color .1s linear 0s, background-color .1s linear 0s;
}

/* header & footer */
.header,
.footer {
width: 100%;
padding: .375rem .5rem;
border-top: .1875rem solid rgba(225,225,225,.25);
border-bottom: .1875rem solid rgba(200,200,200,.25);
background-color: var(--bg-color);
background-image: linear-gradient(90deg, rgba(225,225,225,.1) 0%, rgba(225,225,225,0) 50%);
}
.header {
min-height: 20px;
border-top: none;
padding-bottom: .25rem;
}
.footer {
border-bottom: none;
}

.switch-wrap {
display: inline-block;
width: 25%;
text-align: right;
}

.dims-wrap {
display: inline-block;
width: 74%;
text-align: right;
font-size: 12px;
vertical-align: middle;
}

.footer p {
text-align: right;
font-family: verdana,arial,helvetica,sans-serif;
font-size: .9em;
}

/* .block & .col */
.block {
position: relative;
width: 100%;
padding: .25rem 0;
word-wrap: break-word;
}

.col {
float: left;
}
.one {
width: 100%;
margin-left: 0;
}
.two {
width: 49%;
margin-left: .5%;
}
.three {
width: 33%;
margin-left: .333%;
}

h2, h3 {
font-weight: bold;
background-color: var(--bg-color);
background-image: linear-gradient(90deg, rgba(225,225,225,.1) 0%, rgba(225,225,225,0) 50%);
}

h2 {
padding: .25rem 0 .25rem .75rem;
font-size: .95em;
}

h3 {
margin: .25rem 0 .25rem -.5rem;
padding: .25rem 0 .25rem .625rem;
font-size: .9em;
font-style: italic;
}

.block > h3 {
margin-left: 0;
}
.col:last-of-type h3 {
margin-right: 1%;
}

.col ul,
.extra ul {
list-style: none;
margin-top: .25rem;
}

.extra ul {
float: left;
width: 16.66%;
padding: .3125rem .25rem .125rem .25rem;
}

.col li,
.extra li {
margin-bottom: .4375rem;
}

/* if viewport width <768px, force single-col */
@media (max-width: 768px) {
.col,
.extra ul {
float: none;
}
.one,
.two,
.three,
.extra ul {
width: 100%;
margin-left: 0;
padding-left: 2%;
margin-bottom: 15px;
}
}

/* plus de medias */
.hiddiv-wrap {
margin: .375rem 0 .5rem;
padding: .3125rem 0 0;
border-radius: .3125rem;
background-color: var(--bg-color);
background-image: linear-gradient(90deg, rgba(225,225,225,0) 110px, rgba(225,225,225,.1) 20%, rgba(225,225,225,0) 40%, rgba(225,225,225,.1) 60%, rgba(225,225,225,0) 80%, rgba(225,225,225,.1) 100%);
border-bottom: 10px solid transparent;
}
#hiddiv {
margin-top: .3125rem;
position: relative;
z-index: 1;
border-radius: .3125rem;
max-height: 350px;
overflow: auto;
border: 1px dashed var(--links-bs-color);
}

/* links */
a, a:visited,
.extra a, .extra a:visited,
a.toggle, a.toggle:visited
{
display: inline-block;
vertical-align: middle;
margin-left: .25rem;
padding: .28125rem .28125rem;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,.125);
color: var(--links-color);
background-color: var(--links-bg-color);
box-shadow: 0 0 0 .1875rem var(--links-bs-color);
border-radius: .25rem;
transform: scale(1);
transition: color .15s ease-in-out 0s, background-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s, transform .1s linear 0s;
}

a.toggle, a.toggle:visited
{
margin-left: .5rem;
position: relative;
z-index: 2;
box-shadow: 0 0 0 .5rem var(--links-bs-color);
font-weight: bold;
font-size: .95em;
}

a.toggle span,
a.saved span.primary
{
vertical-align: middle;
font-size: 130%;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

a:hover,
.extra a:hover,
a.toggle:hover
{
text-decoration: none;
text-shadow: none;
color: var(--links-color-hov);
background-color: var(--links-bg-color-hov);
box-shadow: 0 0 0 .1875rem var(--links-bs-color-hov);
transform: scale(1.05);
transition: color .15s ease-in-out 0s, background-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s, transform .1s linear 0s;
}

a.toggle:hover
{
box-shadow: 0 0 0 .375rem var(--links-bs-color-hov);
}

a:active, .extra a:active, a.toggle:active,
a:focus, .extra a:focus, a.toggle:focus
{
text-decoration: none;
color: var(--links-color-act);
background-color: var(--links-bg-color-act);
box-shadow: 0 0 0 .1875rem var(--links-bs-color-act);
}

a.toggle:active,
a.toggle:focus
{
box-shadow: 0 0 0 .375rem var(--links-bs-color-act);
}

a:focus:hover,
.extra a:focus:hover,
a.toggle:focus:hover
{
text-decoration: none;
color: var(--links-color);
background-color: var(--links-bg-color);
box-shadow: 0 0 0 .1875rem var(--links-bs-color-hov);
}

a.toggle:focus:hover
{
box-shadow: 0 0 0 .375rem var(--links-bs-color-hov);
}

a.sm
{
margin-left: -.25rem;
padding-left: 0;
padding-right: .125rem;
font-size: 90%;
}

a.sm::before
{
content: "→";
font-weight: bold;
}

a.sm + a.sm
{
margin-left: -.125rem;
}

a.sm + a.sm::before
{
content: " →";
font-weight: bold;
}

a.int
{
margin: 0 3px;
padding: 1px 2px 2px 2px;
}

a img
{
vertical-align: middle;
}

span.arch { font-size: 90%; font-style: italic; }
span.arch::before { content: "*arch"; }
span.arch::after { content: "."; }

.s-c {
font-variant: small-caps;
}

li.spacer {
padding: 0 .3125rem;
color: #888;
}

.spacer-break {
clear: both;
margin: 1px 0 0;
padding: 1px 0 0;
}

.s80 { font-size: 80%; }
.s85 { font-size: 85%; }
.s90 { font-size: 90%; }
.s95 { font-size: 95%; }
.s100 { font-size: 100%; }
.s110 { font-size: 110%; }
.s120 { font-size: 120%; }

.sbg { background-color: #f2f2f2; border-radius: 3px; }
.sbgb { background-color: #9ee; border-radius: 3px; }
.sbgy { background-color: #ee9; border-radius: 3px; }