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

body {font-family:system-ui; 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(72ch, 97%); line-height: 1.5;}

li {margin-left:auto; margin-right:auto; text-align: left; max-width: min(72ch, 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;}

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

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

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

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

.image {width:min(97vw, 1440px); margin-top:0.7rem; margin-bottom:0.7rem;}

tr.header {background-color:#F5DEB3}

tr.odd {background-color:#E0FFFF}

tr.even {background-color:#98FB98}

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

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

td.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.3rem; align-items: center; justify-content: center; margin-bottom:0.3rem; max-width:80ch}

.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%,72ch);}

	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}