/* The site's own css, after u2 and the classless base. */
.accordion > details {
	margin:3px 0 0 0;
	interpolate-size:allow-keywords;
}
.accordion > details > summary {
	display:block; /* no marker */
	cursor:pointer;
	background:var(--color);
	padding:.5rem 1rem;
	color:var(--color-bg);
	> h4 { margin:0; }
}
.accordion > details::details-content {
	height:0;
	overflow:hidden;
	transition:height .5s, content-visibility .5s allow-discrete;
}
.accordion > details[open]::details-content {
	height:auto;
}
.accordion .-content {
	padding:1rem 0;
}

.pop {
    display:none;
    position:fixed;
	top:3rem;
	max-height: calc(100vh - 5rem);
    margin:auto;
	max-width:70rem;
	overflow:auto;
    left:0;
    right:0;
    background:var(--color-bg);
    box-shadow:0 0 20px #0008, 0 0 0 9000px #0002;
    z-index:1;
    padding:2rem;
    text-align: left;
	transition:.4s;
}
.pop[hidden] {
	display:block;
	visibility:hidden;
	opacity:0;
}

/* u2 spaces by its own variables: here by the site's gap */
.u2-flex, .u2-grid, .u2-table {
	--u2-Gap:var(--gap);
}
/* flex tables: cells grow from 10em, without inner spacing */
.u2-table.-Flex > * > * > * {
	flex:1 0 10em;
	padding:0;
}
/* choices in field tables keep their own width */
.u2-table.-Fields select {
	width:auto;
}
/* icons by name, from material */
html {
	--u2-ico-dir:var(--u2-ico-dir-material);
}

html {
	font-size:calc(13px + .5vmin);
	xfont-size:20px;
	--width:57.6rem;
	--hsl-h:151.5;
	--hsl-s:98.4%;
	--hsl-l:24.7%;
	--color-bg:   #fff;
	--color-text: #333333;
	--color-area: #f0f0f0;
	--font: 'Karla';
	--radius:0;
	--gap:1.5rem;
	--line-height: calc(.7em + .65rem);
	/* custom */
	--color-area2: #e4e4e4;
	--color-input-hover: #e7e7e7;
	--color-invalid-bg: #fdd;
}
@media (prefers-color-scheme: dark) {
	html {
		--color: #65d99b;
		--color-light: #283b30;
		--color-dark: #a2e9bb;
		--color-bg: #17211b;
		--color-text: #f1f5f2;
		--color-area: #243229;
		--color-area2: #35443a;
		--color-line: #738b79;
		--color-input-hover: #435447;
		--color-invalid-bg: #582d32;
	}
}
h1 {
	font-size:3.63rem;
	text-align:center;
}
@media (max-width: 700px) {
	h1 {
		font-size:2.5rem;
	}
}

h2, .Download, .Link {
	font-size:1.4rem;
	color:var(--color);
	font-weight:normal;
	border-bottom:1px solid;
	padding-bottom:.9rem;
	margin-bottom:1rem;
}
.Download, .Link {
	display:block;
	padding-bottom:.3rem;
	padding-top:.3rem;
	padding-left:.8rem;
	margin-bottom:.3rem;
	text-decoration:none;
	background-position:right .8rem top 50%;
	background-size:auto 1.3rem;
	padding-right:2.5rem;
}
.Link {
	background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 9 18" width="9" stroke="rgb(1,125,66)"  stroke-width="1.8" fill="transparent" height="18"><path d="M1 1l7 8-7 8"></path></svg>');
}
.Download {
	background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 15 15" fill="none" stroke="rgb(1,125,66)" stroke-width="1.3" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 13.5l4-4m-4 4l-4-4m4 4V1"></path></svg>');
	background-position:right .6rem top 50%;
}
#container .Download,
#container .Link {
	color:var(--color);
}


h3 {
	font-size:1.5rem;
	margin-bottom:.6rem;
}
body {
	font-size:1.1rem;
	/* ie11 fix: #container display:flex and min-height */
	display:flex;
	flex-direction:column;
}
#container {
	position: relative;
	z-index: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: initial;
}
#container > * {
	width:100%;
}
[role=banner] {
	background-color:var(--color-area);
	z-index:1;
	xposition:sticky;
	top:0;
	font-size:1.2rem;
}
[role=banner] a {
	color: inherit;
	text-decoration: none;
}
[role=banner] > .u2-width {
	align-items: center;
	--width:61rem;
}
#m-head {
	padding-top:.7rem;
	padding-bottom:.7rem;
}
#mood .u2-grid {
	font-size:.9rem;
	--u2-Items-width:15rem;
	margin-bottom:calc(var(--gap) *-1);
}
#mood .u2-grid > * {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	background-color:var(--color);
	padding:1rem var(--gap);
	color:var(--color-bg);
	box-shadow:var(--shadow);
	border-radius:0 .6rem 0 0;
	transition:box-shadow .2s;
}
#mood .u2-grid h3 {
	margin-bottom:.35rem;
}
#mood .u2-grid p {
	margin-top:.35rem;
}
#mood .u2-grid svg {
	margin-top:var(--gap);
	fill:transparent;
	stroke-linecap: butt;
	stroke-width: .15em;
	stroke: currentColor;
	align-self:flex-end;
	width:.55rem;
	transition:transform .3s;
}
#mood .u2-grid > a:hover {
	box-shadow: var(--shadow-x) var(--shadow-y) 1.6rem -.25rem rgba(23, 23, 23, 0.7), var(--shadow-x) var(--shadow-y) 1rem -.35rem rgba(23, 23, 23, 0.4)
}
#mood .u2-grid > a:hover svg {
	transform:rotate(-20deg);
}
#logo > img {
	display:block;
	margin-top:1.15rem;
	margin-bottom:1.15rem;
	height:2.3rem;
}
#subnav {
	background-color:var(--color-area2);
}
#subnav ul {
	flex-wrap:wrap;
}
#intro {
	--width:43rem;
	padding-top:1.7rem;
	padding-bottom:1.7rem;
	font-size:1.8rem;
	--line-height:1.3em;
}
@media (max-width: 700px) {
	#intro {
		font-size: 1.5rem;
	}
}
@media (min-width: 700px) {
	#intro {
		-webkit-hyphens: manual;
		hyphens: manual;
	}
}


#main {
    flex:1 1 auto;
}
#content {
    flex:10 1 35em;
	min-width: 0; /* do not take content-size into account */
}
[role=contentinfo] {
	background-color:var(--color-area);
	font-size:.9rem;
	padding: .5em 0;
}
[role=contentinfo] .u2-width {
	--width:61rem;
}

[role=contentinfo] a {
	color: inherit;
	text-decoration: none;
}

.u2-width {
	max-width: var(--width);
    padding-left: var(--gap);
    padding-right: var(--gap);
    margin: auto;
	box-sizing:content-box;
}
.u2-width .u2-width {
	padding-left:0;
	padding-right:0;
}

.u2-table.-Flex > * > * {
    padding: calc(var(--gap)/4) 0;
}

/* classes for editor */
.Center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: block;
}