:root {--background-colour:rgb(232,240,255);--text_colour:black;--head-colour:#F5DEB3;--odd-colour: #98FB98;--even-colour:#E0FFFF;
	--high-colour:#FFCCCC;--highlight-colour:#FFD700;--accent-colour:#CCCCFF;
	--taxon-colour:#E0FFFF;--subfamily-colour:#98FB98;--family-colour:#F5DEB3;}

:root {--python-blue:#1f77b4;--python-orange:#ff7f0e;--python-green:#2ca02c;--python-fill:#fff1e6;}

@media (prefers-color-scheme: dark) {html {data-theme:'dark'}}

@media (prefers-color-scheme: light) {html {data-theme:'light'}}

body {font-family:system-ui, sans-serif; font-size: 1rem; text-align:center; vertical-align:middle; box-sizing: border-box;
      margin:auto; background:var(--background-colour);color:var(--text_colour);
      background: linear-gradient(90deg, rgba(220,255,230,1) 0%, rgba(255,255,255,1) 50%, rgba(200,200,255,1) 100%);}

button {color:black; background-color: lightgray; font-weight: 600; cursor: pointer;font-family:system-ui, sans-serif;border-radius: 8px;}

h1, h2, h3 {color:#1434A4}

:where(h1) {margin-block: 0.67em;font-size: 2em;}

.bold {color:black;font-weight: 600}

html[data-theme='dark']{
	--background-colour:#242424;--text_colour:white;--head-colour:#808000;--odd-colour: #00a700;--even-colour:#02bbbb;
	--high-colour:#dd5252;--highlight-colour:#DAA520;--accent-colour:#4646FA;
   	body {background:var(--background-colour);color:var(--text_colour);}
  	a {color : cyan}
	h1, h2, h3 {color:yellow}
	b {color:yellow}
	.bold {color:yellow}
}

iframe {border-width: 0; width: 100%;}
 
p {margin-left:auto; margin-right:auto; text-align: left; max-width: min(80ch, 97%); line-height: 1.5; text-wrap: pretty;}

a {text-decoration-thickness: 2px; text-underline-offset: 2px;}

li {margin-left:auto; margin-right:auto; text-align: left; max-width: min(80ch, 97%);}

ol {padding-inline-start: 6ch}

ol > li::marker {font-weight: 600}

nav {margin-left:auto; margin-right:auto; border:1rem;}

table {margin-left:auto; margin-right:auto; margin-top:2rem; margin-bottom:2rem; border:1rem;}

table.collapse {border-collapse: collapse;}

button.em {color:maroon;}

.press {text-decoration: underline;}

.press:focus, 
.press:hover {background-color:gray;cursor: pointer;transition: background-color 3s ease;}

.unbutton {border: 0; font-weight:400;color:black;background-color:var(--taxon-colour);border-radius: 4px;}

h1 > button.unbutton {background-color: rgba(0,0,0,0); border:0; padding:1px; font-size:1.5em; font-weight:600;}

.taxon {font-weight:400; font-style: italic; margin-top:-1rem}

.unbutton:focus, 
.unbutton:hover {background-color: lightgray; cursor: pointer; transition: background-color 3s ease;}

.image {width:min(97vw, 1440px); margin-top:0.7rem; margin-bottom:0.7rem;vertical-align: middle;font-style: italic;}

.small-image {width:min(97vw, 600px); margin-top:0.7rem; margin-bottom:0.7rem;vertical-align: middle;font-style: italic;}

tr:nth-child(odd){background-color:var(--odd-colour)}

tr:nth-child(even){background-color:var(--even-colour)}

tr.header {background-color:var(--head-colour);}

tr.family {background-color:var(--family-colour); font-weight:800;color:black}

tr.subfamily {background-color:var(--subfamily-colour); font-weight:600;color:black}

tr.taxon {background-color:var(--taxon-colour); font-size:0.9rem;margin-top: 0px;}

.big {font-weight:600; font-size:2rem}

.down {display: inline-block;line-height:1rem;transform: translateY(0.5rem);}

.accent {background-color:var(--accent-colour); font-weight:600;}

.high {background-color:var(--high-colour); font-weight:600;}

.highlight {background-color:var(--highlight-colour); font-weight:600;}

.small {font-size:0.9rem}

.border {border-right:3px solid gray}

.no-border {border-right:3px solid var(--background-colour)}

.over {border-top:3px solid gray}

.under {border-bottom:3px solid var(--background-colour)}

html[data-theme='dark'] {
	.border {border-right:3px solid white};
	.over {border-top:3px solid white};
}

hr {margin-top:10px;}

.selector {position:absolute; top:0px; right:0px;}

select {font: inherit; background-color: var(--background-colour);color:var(--text_colour);border-width:2px;border-color: var(--high-colour);border-radius:8px;}

option {padding:0}

article>label>select>option:nth-child(even) {background-color: var(--even-colour);}

option:nth-child(even) {background-color:var(--background-colour);}

.left {text-align: left}

.centre {text-align: center; margin-top:0; margin-bottom:0.5rem; font-size:1.5rem}

.right {text-align: right}

.close {margin-bottom:0}

.thin {padding:0px}

.container {display: flex; flex-wrap: wrap; gap:0.2rem; align-items: center; justify-content: center; margin-bottom:0.3rem; max-width:90ch}

.contained {transition:scale 300ms}

.contained:hover {scale:1.35; z-index:2}

@supports selector(:has(+ *)) {
	.contained:hover + .contained,
	.contained:has( + .contained:hover) {scale:1.15;}
}

.shade {box-shadow: 0 0 10px 10px rgba(0,0,0,30%);}

.space {margin-bottom: 1rem}

.extra {margin-left: 7px; margin-right: 7px; margin-top:10px; margin-bottom:10px}

.outer {margin-top:0px; margin-bottom:0px; display:grid; grid-template-columns: minmax(auto, max-content) auto;}

.aside {vertical-align: top}

@media (max-width: 50ch) {

	p {margin-left:1ch; margin-right:2ch; max-width:min(100%,80ch);}

	body {font-size: 0.9rem; background: var(--background-colour);}

	.image {box-shadow: 0 0 2px 2px rgba(0,0,0,30%);}

	.shade {box-shadow: 0 0 2px 2px rgba(0,0,0,30%);}

	.extra {margin-left: 0.1rem; margin-right: 0.1rem}

}

.narrow {width:min(97%, 1200px)}

.en {background-color:#FF6600}
.nt {background-color:#FFFF66}
.vu {background-color:#FFCC00}

html[data-theme='dark'] {
	.en {background-color:#AA3300}
	.nt {background-color:#AAAA33}
	.vu {background-color:#BB9900}
}

.python-blue {color:var(--python-blue)}
.python-orange {color:var(--python-orange)}
.python-green {color:var(--python-green)}
.python-fill {color:var(--python-fill)}