button {color:black; font-family: system-ui, sans-serif; font-size: 1rem; font-weight: 600; vertical-align: middle;cursor: pointer;}

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

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%);}

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:red;}

.press {text-decoration: underline;}

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

.unbutton {background-color:#E0FFFF; border:0; padding:0; font-size:0.9rem; font-weight:400;}

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

.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:#98FB98}

tr:nth-child(even){background-color:#E0FFFF}

tr.header {background-color:#F5DEB3}

tr.family {background-color:#F5DEB3; font-weight:800;}

tr.subfamily {background-color:#98FB98; font-weight:600;}

tr.taxon {background-color:#E0FFFF; font-size:0.9rem}

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

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

.accent {background-color:#CCCCFF; font-weight:700;}

.high {background-color:#FFCCCC; font-weight:700;}

.highlight {background-color:#FFD700; font-weight:700;}

.small {font-size:0.9rem}

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

.no-border {border-right:3px solid white}

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

.under {border-bottom:3px solid white}

hr {margin-top:10px;}

.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: rgb(255,255,255);}

	.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}