* {
	padding: 0;
	margin: 0;
	font-family: "Sen", sans-serif;
}

:root {
	--colour-bg: #fff;
	--colour-text: #111;
	--colour-link: #22428b;
/*	--colour-select-bg: #22428b;
	--colour-select-fg: #ffffff;*/
	--colour-select-bg: #3addef60;
/* 	--colour-select-fg: #; */
}

@media (prefers-color-scheme: dark) {
	:root {
		--colour-bg: #000;
		--colour-text: #eee;
		--colour-link: #aaf4ff;
	}
}

body {
	background: var(--colour-bg);
	color: var(--colour-text);
}

p, li, h1, h2, h3, h4, h5, h6 {
	padding-top: calc(6px + 0.1em);
	padding-bottom: calc(10px + 0.2em);
}

h1 {
	font-size: 32pt;
}

p, li {
	font-size: 14pt;
	line-height: 1.5;
}

::selection {
	background: var(--colour-select-bg);
/* 	color: var(--colour-select-fg); */
}

.lite {
	opacity: 0.6;
}

.nopad {
	padding: 0;
}

.page-outer {
	max-width: 800px;
	margin: auto;
}

.video-card {
	display: grid;
	grid-template-columns: 250px auto;
	height: 150px;
}

.video-card:hover {
	border-radius: 10px;
	background: #8882;
	cursor: pointer;
}

.video-card-thumb {
	grid-column: 1;
}

.video-card-thumb-pad {
	padding: 8px 15px 8px 8px;
}

.video-card-thumb-img {
	width: 100%;
	border-radius: 10px;
}

.video-card-other {
	grid-column: 2;
	overflow: hidden;
}

.player-outer {
	border-radius: 10px;
	width: 100%;
	height: 450px;
	overflow: hidden;
	background: #444;
}

.player-video {
	width: 100%;
	height: 100%;
}