/*//////////////////////////////////////////
   Element reset
//////////////////////////////////////////*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, figure, figcaption,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}

/* resets for all elements (easily overridden with any selector) */
*, *::before, *::after {
	/* This is the way <div>s behave before a width is set. It makes a lot of sense to treat all elements this way, and avoids lots of padding/border calulations in CSS. */
	/* Does affect layout. */
	box-sizing: border-box;

	/* Doesn't affect layout, and more times than not makes positioning "just work". */
	position: relative;
}


/* cursor reset */
html,
body {
	cursor: default;
}

a {
	cursor: pointer;
}





/*//////////////////////////////////////////
   Theme colors
//////////////////////////////////////////*/
:root {
	/* 216 must stay in sync with the hue default in swirl-interaction.js. #01398D in index.html is hsl(216, 98%, 28%). */
	--hue-primary: 216;

	--off-black-color: #444;

	--main-bg-color: hsl(var(--hue-primary), 98%, 28%);
	--main-bg-color-darker: hsl(var(--hue-primary), 98%, 24%);
}





/*//////////////////////////////////////////
   Typography
//////////////////////////////////////////*/
:root {
	--fancy-font: Montserrat, sans-serif;
	--content-font: Roboto,Oxygen, Ubuntu, Helvetica Neue, sans-serif;

	--font-2: 1rem;
	--font-3: 1.25rem;
	--font-4: 1.6rem;
	--font-5: 2rem;
	--font-6: 2.5rem;
}


/* Decrease font size on mobile */
@media only screen and (max-width: 640px) {
	html {
		font-size: 15px;
	}
}





/*//////////////////////////////////////////
   Entrance animation
//////////////////////////////////////////*/
.fade-slide-up {
	animation: 0.4s ease-out backwards fade-slide-up;
}

.anim-delay-1 { animation-delay: 0.08s; }

@keyframes fade-slide-up {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	/* Animate to natural state. */
	100% {}
}





/*//////////////////////////////////////////
   Page shell
//////////////////////////////////////////*/
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-5: 20px;
}


/* Themed highlight color */
::selection {
	background-color: hsl(var(--hue-primary), 64%, 82%);
	color: var(--off-black-color);
}


html,
body {
	height: 100%;
}

body {
	background-color: var(--main-bg-color);
	/* Apply subtle vignette effect */
	background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.16) 100%);
	background-attachment: fixed;

	font-family: var(--content-font);
	color: white;
	letter-spacing: 0.06em;

	/* Disable tap overlay color on links (Android / iOS Safari) by making the highlight transparent */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	transition: background-color 0.5s;
}

body,
#root,
.app-wrap,
.app-wrap > main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 0;
}


p {
	line-height: 1.5;
}





/*//////////////////////////////////////////
   Site header
//////////////////////////////////////////*/
.app-header {
	user-select: none;
	flex-shrink: 0;
	padding: var(--space-5);
	font-family: var(--fancy-font);
	font-weight: bold;
	text-transform: uppercase;
	z-index: 1;
}

.app-header nav {
	display: flex;
	align-items: center;
}

.app-header__logo {
	flex-shrink: 0;
}

.app-header__name {
	margin-left: var(--space-5);
	font-size: var(--font-5);
	line-height: 1.2;
	transition-property: opacity, visibility, transform ease-out;
	transition-duration: 0.3s;
}

.app-header__home-link,
.app-header__nav-link {
	color: white;
	text-decoration: none;
}

.app-header__home-link {
	display: flex;
	align-items: center;
	margin-right: auto;
}

.app-header__home-link.link--active {
	cursor: default;
}

.app-header__home-link.link--active .app-header__name {
	visibility: hidden;
	opacity: 0;
	transform: translateX(-4px);
}


.app-header__nav-link {
	margin: 0 var(--space-1);
	padding: var(--space-1) var(--space-2);
	border: 3px solid transparent;
	border-left: none;
	border-right: none;
	font-size: var(--font-3);
	opacity: 0.75;
	transition: border-color 0.3s, opacity 0.3s;
}

/* Hover is limited to fine pointers on screens at least 450px in both dimensions so touch devices do not get sticky hover. The header and footer blocks must use the same query. */
@media (pointer: fine) and (min-width: 450px) and (min-height: 450px) {
	.app-header__nav-link:hover {
		opacity: 1;
	}

	.app-header__nav-link:hover {
		border-bottom-color: white;
	}
}

.app-header__nav-link:focus-visible,
.app-header__nav-link:active {
	opacity: 1;
}

.app-header__nav-link:focus-visible,
.app-header__nav-link:active,
.app-header__nav-link.link--active {
	border-bottom-color: white;
}


@media only screen and (max-width: 640px) {
	.app-header {
		padding: var(--space-3);
	}

	.app-header__logo {
		width: 42px;
		height: 42px;
	}

	.app-header__name {
		margin-left: var(--space-3);
		font-size: var(--font-3);
	}

	.app-header__nav-link {
		padding: var(--space-1) var(--space-1);
		border-width: 2px;
		font-size: var(--font-2);
	}
}

/* Special font sizing for portrait phones */
@media only screen and (max-width: 450px) {
	.app-header__name {
		font-size: 1.1rem;
	}

	.app-header__nav-link {
		font-size: 0.88rem;
	}
}





/*//////////////////////////////////////////
   Site footer
//////////////////////////////////////////*/
.app-footer {
	user-select: none;
	/* Same as .home-screen. The header stays at auto so a drag from the top can still pull-to-refresh. */
	touch-action: none;
	display: flex;
	flex-shrink: 0;
	justify-content: flex-end;
	align-items: center;
	padding: var(--space-5);
}

.app-footer__link {
	margin: 0 var(--space-2);
	opacity: 0.65;
	transition: opacity 0.3s;
}

/* Hover is limited to fine pointers on screens at least 450px in both dimensions so touch devices do not get sticky hover. The header and footer blocks must use the same query. */
@media (pointer: fine) and (min-width: 450px) and (min-height: 450px) {
	.app-footer__link:hover {
		opacity: 1;
	}
}

.app-footer__link:focus-visible,
.app-footer__link:active {
	opacity: 1;
}


@media only screen and (max-width: 640px) {
	.app-footer {
		padding: var(--space-3);
	}
}





/*//////////////////////////////////////////
   Home screen
//////////////////////////////////////////*/
.home-screen {
	/* The canvas is behind #root, so this is what a drag on the empty page hits. Same value on .app-footer. Not on body or #root: a child cannot undo an ancestor, and the header must keep pull-to-refresh. */
	touch-action: none;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	line-height: 1.4;
}

.home-screen h1 {
	user-select: none;
	touch-action: none;
	margin-bottom: var(--space-3);
	font-family: var(--fancy-font);
	font-weight: bold;
	font-size: var(--font-6);
	text-transform: uppercase;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.home-screen p {
	user-select: none;
	touch-action: none;
	font-size: var(--font-4);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
	opacity: 0.75;
}


@media only screen and (max-width: 640px) {
	.home-screen h1 {
		margin-bottom: var(--space-2);
		font-size: var(--font-4);
	}

	.home-screen p {
		font-size: var(--font-2);
	}
}





/*//////////////////////////////////////////
   Swirl canvas
//////////////////////////////////////////*/
.swirl-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}