@charset "UTF-8";

:root {
	--bg-back: #eee8f2;
	--bg-panel: #faf8fb;
	--bg-panel-alpha: hsla(270, 19%, 98%, 0.75);
	
	--text-main: #111111;
	--text-alt: hsl(0, 0%, 96%);
	--highlight: #ffa74d;
	--highlight-minor: #fb701a;
	
	--shadow: rgba(80, 80, 80, 0.5);
}


@media (prefers-color-scheme: dark) {
	:root {
		--bg-back: hsl(270, 29%, 28%);
		--bg-panel: hsl(273, 15%, 16%);
		--bg-panel-alpha: hsla(270, 14%, 16%, 0.75);
		
		--text-main: hsl(277, 38%, 89%);
		
		/* --shadow: rgba(20, 20, 20, 0.5); */
		--shadow: rgba(5, 5, 5, 0.5);
	}
	
	a					{ color: hsl(208, 67%, 67%);	}
	a:hover				{ color: hsl(214, 67%, 75%);	}
	a:active, a:focus	{ color: hsl(214, 87%, 85%);	}
	a:visited			{ color: hsl(264, 77%, 65%);	}
	
	.invert-when-dark	{ filter: invert(100%);			}
}

html, body {
	margin: 0; padding: 0;
	font-size: 100%;
	scroll-behavior: smooth;
}
body {
	background: var(--bg-back);
	
	color: var(--text-main);
	font-family: sans-serif;
}

h1, h2 { text-align: center;	}

/* A small tweak to things more responsive */
iframe, object, embed, img, table   { max-width: 100%; }
/* Turn the user's cursor into a hand when over things they can click */
button, summary                     { cursor: pointer; }

/*
███████ ███████ ███████ ███████  ██████ ████████ ███████
██      ██      ██      ██      ██         ██    ██
█████   █████   █████   █████   ██         ██    ███████
██      ██      ██      ██      ██         ██         ██
███████ ██      ██      ███████  ██████    ██    ███████
*/

.fancy-browser-window {
	display: inline-block;
	/* background: radial-gradient(0.25em at top 0.25em right 0.25em, red 0%, red 99%, transparent 100%), */
	
	--button-size: 0.35em;
	--border-thin: 0.5em;
	--border-top: 1.25em;
	--button-spacing: 1em;
	
	--colour-z: hsl(0, 0%, 85%);
	
	--colour-a1: hsl(5, 80%, 60%);
	--colour-a2: hsl(7, 74%, 48%); /*hsl(6, 75%, 37%)*/
	
	--colour-b1: hsl(53, 80%, 60%);
	--colour-b2: hsl(53, 73%, 48%);
	
	--colour-c1: hsl(114, 80%, 59%);
	--colour-c2: hsl(114, 73%, 48%);
	
	background: radial-gradient(
			var(--button-size) at top calc(var(--button-size) + var(--border-thin) / 2) left calc(0.5em + var(--button-size)),
			var(--colour-a1) 50%,
			var(--colour-a2) 100%,
			transparent 100%
		), radial-gradient(
			var(--button-size) at top calc(var(--button-size) + var(--border-thin) / 2) left calc(0.5em + var(--button-size) + var(--button-spacing)),
			var(--colour-b1) 50%,
			var(--colour-b2) 100%,
			transparent 100%
		), radial-gradient(
			var(--button-size) at top calc(var(--button-size) + var(--border-thin) / 2) left calc(0.5em + var(--button-size) + var(--button-spacing) * 2),
			var(--colour-c1) 50%,
			var(--colour-c2) 100%,
			transparent 100%
		), var(--colour-z);
	border-radius: 0.25em;
	padding: var(--border-top) var(--border-thin) var(--border-thin) var(--border-thin);
}

.perspective {
	perspective: 50em;
}

.feature-tilted {
	margin: 2em;
	transform: rotateY(-10deg);
	/* box-shadow: 0 0 0.5em var(--shadow); */
	
	transition: transform 0.25s;
}
.feature-tilted:hover {
	transform: rotateY(0deg) scale(1.1);
}

.spin-in {
	backface-visibility: visible;
	animation: 1.5s ease-out enter-spin;
}

@keyframes enter-spin
{
	from { transform: translateX(30em) rotateY(180deg); }
	to { transform: translateX(0) rotateY(350deg);  }
}

.panel {
	background: var(--bg-panel);
	border-bottom: 0.25em solid var(--highlight-minor);
	border-top: 0.25em solid var(--highlight-minor);
	
	box-shadow: inset 0 0 0.5em var(--shadow);
}
.panel-small {
	background: var(--bg-panel-alpha);
	box-shadow: 0 0.25em 0.5em var(--shadow);
}

.lift-from-page {
	position: relative;
	--amount-initial: 0.5em;
	--blur: 0.5em;
	border: 0.2em solid var(--highlight);
	border-radius: 0.25em;
	box-shadow: var(--amount-initial) var(--amount-initial) var(--blur) var(--shadow);
	transform: translate(0, 0);
	transition: transform 0.5s, box-shadow 0.5s;
}
.lift-from-page:hover {
	--amount: 0.5em;
	--shadow-amount: calc(var(--amount) + var(--amount-initial));
	/* top: var(--amount-translate);
	left: var(--amount-translate); */
	/* top: -0.5em;
	left: -0.5em; */
	transform: translate(-0.5em, -0.5em);
	box-shadow: var(--shadow-amount) var(--shadow-amount) calc(var(--blur) * 2) var(--shadow);
}

.action-button {
	display: inline-block;
	
	padding: 0.35em 0.45em;
	border-radius: 0.25em;
	
	background: var(--highlight);
	
	color: var(--text-alt) !important;
	font-size: 1.25em;
	text-decoration: none;
	
	box-shadow: 0 0 0.5em var(--shadow);
	
	cursor: pointer;
	transition: box-shadow 0.25s, transform 0.25s;
}
.action-button:hover {
	box-shadow: 0 0.25em 0.65em var(--shadow);
	transform: translateY(-0.25em);
}
.action-button:active {
	box-shadow: 0 0 0.25em var(--shadow);
	transform: translateY(0.1em);
}
.action-button.major	{ background: var(--highlight-minor);	}


/*
██       █████  ██    ██  ██████  ██    ██ ████████
██      ██   ██  ██  ██  ██    ██ ██    ██    ██
██      ███████   ████   ██    ██ ██    ██    ██
██      ██   ██    ██    ██    ██ ██    ██    ██
███████ ██   ██    ██     ██████   ██████     ██
*/

.double {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
}
.double.lean-right	{ grid-template-columns: 5fr 6fr;	}
.double.lean-left	{ grid-template-columns: 6fr 5fr;	}
.double > img		{ max-width: 90%;					}

.centre-horizontal	{ align-self: center;	}
.centre-vertical	{ justify-self: center;	}
.centre				{ align-self: center; justify-self: center;	}
.centre-text		{ text-align: center;	}

.margin-wide		{ margin: 3em;			}
.margin-medium		{ margin: 2em;			}
.margin-vertical	{ margin: 2em 0 2em 0;	}
.margin-top			{ margin-top: 2em;		}
.margin-narrow		{ margin: 1em;			}

.padding-wide		{ padding: 3em;				}
.padding-wide-ntop	{ padding: 1em 3em 3em 3em;	}
.padding-medium		{ padding: 2em;				}
.padding-horizontal	{ padding: 0 2em 0 2em;		}

.list-thin			{ padding-left: 1em; }

.logo				{ vertical-align: middle;	}
.logo.large			{ max-width: 2em;			}
.logo.medium		{ max-width: 1.5em;			}
.logo.small			{ max-width: 1em;			}

.feature-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20em, 100%), 1fr));
	grid-gap: 2em;
	margin: 4em 2em 4em 2em;
}
.feature { margin: 0; /* We add the spacing with grid-gap in feature-list*/ }
.feature:not(.mini) {
	display: grid;
	grid: auto / 1fr 3fr;
	grid-gap: 0.5em;
	align-items: center;
}
.feature.vertical {
	grid: auto auto / auto;
}
.feature figcaption > strong {
	display: block;
	margin-bottom: 0.5em;
}

.display-items {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
/* .feature img { float: left; } */
/* .feature figcaption { flex: 1; } */


/*
███    ███  ██████  ██████  ██ ██      ███████
████  ████ ██    ██ ██   ██ ██ ██      ██
██ ████ ██ ██    ██ ██████  ██ ██      █████
██  ██  ██ ██    ██ ██   ██ ██ ██      ██
██      ██  ██████  ██████  ██ ███████ ███████
*/
@media (max-width: 800px) {
	.double, .double.lean-left, .double.lean-right {
		grid-template-columns: auto !important;
		grid-template-rows: auto auto !important;
	}
	.feature-tilted {
		transform: rotateY(0);
	}
}