:root {
	color-scheme: light dark;
}

body {
	margin: 0;
	font: 1em/1.3 "Century Gothic", Helvetica;
	text-shadow: 0 2px 2px hsla(0, 0%, 0%, 0.15),
	             0 1px 5px hsla(0, 0%, 0%, 0.1);
}

@media screen and (orientation: portrait) {
	body {
		font-size: 2.5vw;
	}
}

@media screen and (orientation: landscape) {
	body {
		font-size: 4vh;
	}
}

@media screen and (min-width: 900px) {
	body {
		font-size: 1.5em;
	}
}

header,
canvas {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

header {
	display: flex;
	width: 20em;
	margin: 0 auto;
}

@media screen and (orientation: portrait) {
	header {
		font-size: 3vw;
	}
}

@media screen and (orientation: landscape) {
	header {
		font-size: 3vh;
	}
}

header > svg {
	width: 100%;
}

@keyframes dash-light {
	from { stroke-dashoffset: 200; }
	10%  { stroke-dashoffset: 200; }
	50%  {                         fill: transparent; stroke: black; }
	60%  {                         fill:       black; }
	to   { stroke-dashoffset:   0; fill:       black; stroke: black; }
}

header > svg > path {
	fill: transparent;
	stroke-dasharray: 200;
	stroke: transparent;
  animation: dash-light 15s linear forwards;
}

@media (prefers-color-scheme: dark) {
	@keyframes dash-dark {
		from { stroke-dashoffset: 200; }
		10%  { stroke-dashoffset: 200; }
		50%  {                         fill: transparent; stroke: white; }
		60%  {                         fill:       white; }
		to   { stroke-dashoffset:   0; fill:       white; stroke: white; }
	}

	header > svg > path {
		animation-name: dash-dark;
	}
}

.chevron {
	position: relative;
	color: inherit;
	cursor: pointer;
	overflow: hidden;
}

.chevron::before,
.chevron::after {
	position: absolute;
	top: 95%;
	width: 50%;
	height: 10%;
	content: "";
	background-color: currentColor;
}

.chevron::before {
	left: 0;
  transform: skewY(-45deg) translateX(100%);
}

.chevron::after {
	right: 0;
  transform: skewY(45deg) translateX(-100%);
}

.chevron.up::before,
.chevron.up::after {
	top: initial;
	bottom: 95%;
}

.chevron.up::before {
  transform: skewY(45deg) translateX(100%);
}

.chevron.up::after {
  transform: skewY(-45deg) translateX(-100%);
}

@keyframes up-bounce {
	from, to { transform: translateY(0); }
	50%      { transform: translateY(-15px); }
}

body > .chevron {
	position: fixed;
	top: calc(50vh + 10.5em);
	right: calc(50% - 1em);
	left: calc(50% - 1em);
	width: 2em;
	height: 1.5em;
  animation: up-bounce 2s 6s ease-in-out infinite;
}

@keyframes grow-width {
	from, 90% { width: 0; }
}

body > .chevron::before,
body > .chevron::after {
  animation: grow-width 7s ease-in-out;
}