/*---------------------------------- base ----------------------------------*/

body {
	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		Arial,
		sans-serif;
	color: #000;
	background: #fff;
	margin: 0 auto;
	font-size: 1em;
	border-bottom: 15px silver solid;
}

a {
	color: #316896;
	text-decoration: none;
}

a img {
	border: none;
}

a:hover {
	color: indianred;
	text-decoration: underline;
}

abbr {
	border-bottom: 1px dashed #333;
	letter-spacing: 0.07em;
	cursor: help;
}

ul {
	list-style-position: outside;
	padding-left: 0;
}

li {
	position: relative;
	left: 1em;
	margin-right: 1em;
}

/*---------------------------------- hero ----------------------------------*/

#titlebox {
	width: 100%;
	border-top: 40px black solid;
	border-bottom: 40px black solid;
	background-color: #faf8eb;
	background-image: url("background.jpg");
	background-size: cover;
	background-position: 50% 75%;
}

h1 {
	box-sizing: border-box;
	width: 8em;
	max-width: calc(100% - 1em);
	margin: 1em auto;
	padding-right: 1em;
	padding-left: 0.1em;
	font-size: 6em;
	font-weight: normal;
	line-height: 1.3em;
	text-align: left;
	text-shadow: 0 2px 0 rgba(255, 255, 255, 0.75);
}

.h1-blur {
	padding: 0 0.25em 0.25em 0;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(2px);
}

#titlebox p {
	width: 22em;
	max-width: 90%;
	margin: auto;
	margin-bottom: 10px;
	padding: 0.3em;
	border-radius: 4px;
	background: rgba(192, 192, 192, 0.7);
	font-size: 2em;
	line-height: 2em;
	text-align: center;
	backdrop-filter: blur(6px);
}

#titlebox p span {
	display: inline;
	padding-bottom: 0.3em;
	border-bottom: 1px white solid;
	border-radius: 4px;
}

/*---------------------------------- trial notice ----------------------------------*/

.trialblurb {
	max-width: 25em;
	margin: 2em auto 1em auto;
	padding: 1.4em 1.6em;
	color: #14351f;
	background: #e8f4df;
	border: 1px solid #78a96b;
	border-left: 0.6em solid #2f7f44;
	border-radius: 0.45em;
	box-shadow: 0 0.3em 1em rgba(32, 92, 48, 0.16);
	font-size: 1.2em;
	line-height: 1.45;
}

.trialblurb p:first-child {
	margin-top: 0;
}

.trialblurb p:last-child {
	margin-bottom: 0;
}

/*---------------------------------- main text ----------------------------------*/

.main {
	width: 50em;
	max-width: 90%;
	margin-top: 5em;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 1em;
}

.main img {
	float: left;
	max-width: min(50%, 300px);
	height: auto;
	margin-right: 1.4em;
	border-radius: 3px;
}

.main p,
.main ul {
	margin-top: 0;
	font-size: 1.2em;
	text-align: left;
}

/*---------------------------------- contact and footer ----------------------------------*/

/*-------------------------------------*/

.niousletter{
	padding: 2em;
	border: none;
}

	.niouslettersignup{
		text-align: left;
	}

	.niouslettersignup input{
		display: inline-block;
		height: 3.1em;
		margin: 0;
		padding: 0 0.5em;
		font-size: 1em;
		line-height: 1.5em;
	}

	input.emailsub{
		width: 55%;
		min-width: 20em;
	}

	input.pouf{
		float: right;
		width: 25%;
		min-width: 8em;
		margin-bottom: 1em;
	}

	.pouf:hover{
		cursor: pointer;
	}




.contact_box, .bottomblurb {
	width: 50em;
	max-width: 90%;
	margin: 4em auto;
	padding-top: 2em;
	border-top: 1px solid silver;
}

.contact_box p {
	font-size: 1.2em;
	text-align: center;
}

.bottomblurb p, .bottomblurb ul {
  font-size: 1.2em
}

.contact-form {
	display: grid;
	gap: 0.7em;
	font-size: 1.2em;
}

.contact-form label {
	font-weight: 700;
}

.contact-form input,
.contact-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.65em;
	border: 1px solid #999;
	border-radius: 3px;
	font: inherit;
}

.contact-form textarea {
	resize: vertical;
}

.contact-form button {
	justify-self: start;
	margin-top: 0.4em;
	padding: 0.65em 1em;
	color: #fff;
	background: #111;
	border: 1px solid #111;
	border-radius: 3px;
	font: inherit;
	cursor: pointer;
}

.contact-form button:hover,
.contact-form button:focus {
	background: #316896;
	border-color: #316896;
}

.contact-response {
	width: 42em;
	max-width: 90%;
	margin: 6em auto;
	font-size: 1.2em;
	line-height: 1.5;
}

.footer_box {
	padding: 1em;
	border-top: 15px silver solid;
	background: white;
	background-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(230, 225, 230) 50%, rgb(255, 255, 255) 100%);
	line-height: 1em;
	text-align: center;
}

.footer_box p {
	width: 40em;
	max-width: 95%;
	margin: 0 auto;
	font-size: 1em;
	opacity: 60%;
	line-height: 1.1em;
	margin-bottom: 0.8em;
}

/*---------------------------------- course list ----------------------------------*/

.un_cours_container {
	margin: 4em 20px;
	padding-bottom: 4em;
	border-bottom: 2px black solid;
}

.un_cours {
	width: 100%;
	margin: 0 auto;
}

h2 {
	padding-top: 0.6em;
	font-size: 2em;
	text-align: center;
}

h3 {
	padding-top: 0.6em;
	font-size: 1.5em;
}

.coursnumber {
	padding-right: 0.5em;
}

.blurb_cours {
	max-width: 25em;
	margin: 0 auto 1em auto;
	padding: 15px 20px 15px 75px;
	background: url("hand.svg") left 20px center no-repeat;
	border-top: 1px grey solid;
	border-bottom: 1px grey solid;
	font-size: 1.2em;
	text-align: justify;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1rem;
	align-items: stretch;
	max-width: 95%;
	margin: 0 auto;
}

.subsection {
	margin: 0;
	padding: 0.9em;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 0.75em;
	box-shadow: 0 0.25em 1.2em rgba(0, 0, 0, 0.08);
	font-size: 1.05em;
	font-weight: normal;
	text-align: left;
}

.subsection img{
	max-width: 100%;
	height: auto;
}

.subsectiontitle {
	display: flex;
	align-items: center;
	min-height: 3em;
	margin: -0.5em 0 0.5em 0;
}

.videonumber {
	margin-right: 0.5em;
	font-weight: bold;
	opacity: 0.6;
}

.planneddate {
	width: 30em;
	max-width: 80%;
	margin: 3em auto 1em auto;
	padding: 1em;
	border: 2px gray solid;
	border-radius: 10px;
	text-align: center;
}

.planneddate span {
	min-height: 42px;
	padding: 10px 0 10px 42px;
	background: url("clock-countdown.svg") center left no-repeat;
}

/*---------------------------------- video embeds ----------------------------------*/

.lite-youtube-fallback {
	display: flex;
	aspect-ratio: 16 / 9;
	flex-direction: column;
	gap: 1em;
	align-items: center;
	justify-content: center;
	padding: 1em;
	color: #fff;
	background-color: #000;
	text-decoration: none;
}

.lite-youtube-fallback::before {
	display: block;
	content: "";
	border: solid transparent;
	border-width: 2em 0 2em 3em;
	border-left-color: red;
}

.lite-youtube-fallback:hover::before {
	border-left-color: #fff;
}

.lite-youtube-fallback:focus {
	outline: 2px solid red;
}

lite-youtube::part(playButton) {
	opacity: 0.3;
}

lite-vimeo {
	--lite-vimeo-play-opacity: 0.3;
}

lite-vimeo:not(:defined) {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
}

lite-vimeo:not(:defined) .lite-vimeo-fallback {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding-bottom: 2.5em;
}

lite-vimeo:not(:defined) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

lite-vimeo:not(:defined) .playbutton {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 3rem;
	transform: translate(-50%, -50%);
}

lite-vimeo:defined .lite-vimeo-fallback {
	display: none;
}

/*---------------------------------- responsive layout ----------------------------------*/

@media all and (max-height: 580px), all and (max-width: 550px) {
	html {
		font-size: 0.9em;
	}
}

@media all and (max-width: 41em) {
	h1 {
		max-width: 99%;
		padding: 0 0.15em;
		font-size: 5em;
	}
}

@media all and (max-width: 400px) {
	h1 {
		font-size: 4em;
	}

	.video-grid {
		grid-template-columns: 1fr;
	}
}

/*---------------------------------- dark mode ----------------------------------*/

@media (prefers-color-scheme: dark) {
	body {
		color: #ddd;
		background: #333333;
		background-image: none;
	}

	img {
		filter: brightness(0.8);
	}

	h1,
	#titlebox {
		color: black;
	}

	a {
		color: #79b8ff;
	}

	a:hover {
		color: #ff6b6b;
	}

	h2 {
		color: #fff;
	}

	input,
	textarea {
		color: #ddd;
		background: #222;
		border: 1px solid #555;
	}

	input::placeholder,
	textarea::placeholder {
		color: #888;
	}

	.trialblurb {
		color: #d7ead6;
		background: #203426;
		border-color: #53785a;
		border-left-color: #6fa873;
		box-shadow: 0 0.35em 1.2em rgba(0, 0, 0, 0.28);
	}

	.subsection {
		background: rgba(35, 35, 35, 0.9);
		border-color: rgba(255, 255, 255, 0.18);
		box-shadow: 0 0.25em 1.2em rgba(0, 0, 0, 0.35);
	}

	.footer_box {
		background: black;
		background-image: linear-gradient(to right, rgb(40, 40, 40) 0%, rgb(60, 60, 60) 50%, rgb(40, 40, 40) 100%);
	}

	.planneddate span {
		background: url("clock-countdown-darkmode.svg") center left no-repeat;
	}
}