content.css

a {
	color: white;
	z-index: 1;
	position: relative;
}
.login-cutout {
	position: relative;
	float: right; /* Fix rounding error in Chrome. */
}
.login-cutout:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 38px; /* Not 100%, to fix rounding error in Firefox. */
	left: 0;
	background-attachment: fixed;
}
.login {
	visibility: hidden;
}
#gradient {
	position: fixed;
	width: 100%;
	height: 150px;
	top: 0;
	z-index: 2;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
}
@supports not (-webkit-mask-image: linear-gradient(to bottom, white, rgba(255, 255, 255, 0))) {
	#gradient {
		mask: url(images/gradient-mask.svg#m);
	}
}
#wrap {
	color: white;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
@supports (-webkit-overflow-scrolling: touch) { /* iOS (http://stackoverflow.com/questions/23083462#23123845) */
	#wrap {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-webkit-tap-highlight-color: transparent;
	}
	
	/* Scroll performance */
	body.scrolled .annotation,
	body.scrolled .arrow {
		animation-delay: 0s !important;
		animation-duration: 0s !important;
	}
	body.scrolled #fastforward {
		display: none;
	}
}
.header.header { /* Increase specificity above .annotation */
	top: auto;
	left: calc(50vw - 21.7ch);
	color: #E1E7EA;
	font-size: xx-large;
	position: relative;
}
#header-1 {
	margin-top: calc(50vh - 100px);
	animation-delay: .1s; /* Hide first character when animation hasn't started yet (on page load). */
}
#header-2 {
	transform: translateY(-100%);
	animation-delay: .2s; /* Slight delay after the comma. */
	pointer-events: none;
}
#header-3 {
	transform: translateY(-200%);
	animation-delay: .4s; /* Slight delay after the whitespace. */
	pointer-events: none;
}
#header-2 *, #header-3 * {
	pointer-events: all;
}
.header-hidden {
	visibility: hidden;
}
.header-hidden .marquee {
	animation: none;
}
.header-smaller {
	font-size: smaller;
}
.marquee-placeholder {
	animation: hide 0s 3.8s;
	animation-fill-mode: forwards;
}
.marquee {
	position: relative;
	display: inline-block;
	height: 1.2em;
	margin-bottom: -.2em;
	overflow: hidden;
	vertical-align: top;
	animation: show 0s 3.8s;
	animation-fill-mode: both;
}
.marquee-hidden {
	display: none;
}
.marquee-el {
	animation: marquee 4s 4.1s infinite;
	margin-bottom: .24em;
}
@keyframes show {
	from { visibility: hidden; }
	to { visibility: visible; }
}
@keyframes hide {
	to { font-size: 0; }
}
@keyframes marquee {
	0% { transform: translateY(0); }
	24% { transform: translateY(0); }
	29% { transform: translateY(-120%); }
	54% { transform: translateY(-120%); }
	59% { transform: translateY(-240%); }
	84% { transform: translateY(-240%); }
	89% { transform: translateY(0); }
}
.annotation {
	animation: type 2s linear forwards;
	overflow: hidden;
	width: 0;
	height: 1.2em;
	word-break: break-all;
	font-size: large;
	position: absolute;
	top: 50%;
	left: 50%;
	line-height: 1.2;
}
#annotation-1 {
	margin-top: -38px;
	margin-left: -125px;
	animation-delay: 2.8s;
}
#annotation-2 {
	margin-top: 90px;
	margin-left: -34px;
	animation-delay: 4.6s;
}
@keyframes type {
	from { width: 1ch; }
	to { width: 54ch; }
}
.arrow {
	animation: reveal 1s linear;
	animation-fill-mode: both;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0; /* iOS */
}
.arrow img {
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
	height: 24px;
}
#arrow-1 {
	margin-top: 60px;
	animation-delay: 4.3s;
}
#arrow-1 img {
	transform: scaleY(-1);
	filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, .6));
}
@keyframes reveal {
	from { height: 0; }
	to { height: 90px; }
}
body.inactive .annotation,
body.inactive .arrow,
body.inactive .marquee-el {
	animation-play-state: paused;
}
#noanim {
	position: fixed;
	top: 0;
	left: 0;
}
#fastforward {
	position: absolute;
	top: 50%;
	left: 50%;
	text-decoration: none;
	margin-left: 300px;
	margin-top: 57px;
	animation: fadeout .5s 4.6s forwards;
}
#noanim:target ~ .annotation,
#noanim:target ~ .arrow,
body.noanim .annotation,
body.noanim .arrow {
	animation-delay: 0s !important;
	animation-duration: 0s !important; /* iOS */
}
body.noanim #fastforward,
#noanim:target ~ #fastforward {
	display: none;
}
#fastforward :first-child:before {
	width: 8px;
	overflow: hidden;
}
#fastforward :last-child:before {
	margin-left: -5px;
	overflow: hidden;
}
@keyframes fadeout {
	to { opacity: 0; visibility: hidden; }
}
#demo-bar {
	position: relative;
	top: 0;
	pointer-events: none;
}
@supports (position: sticky) {
	#demo-bar {
		position: sticky;
		z-index: 3;
	}
}
#demo-bar .bar, #demo-bar .menu {
	position: static; /* For .bar only */
	visibility: hidden;
}
#demo-bar .demo-button {
	visibility: visible;
	pointer-events: all;
	background: white;
	background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6) 10px, rgba(255, 255, 255, .8) 10px, rgba(255, 255, 255, .8) 20px);
	border-radius: 7px;
	padding: 0 12px;
	margin-right: -3px;
	display: inline-block;
	text-shadow: none;
	height: 38px;
}
#demo-bar .demo-button i:before {
	opacity: 1;
}
#contents {
	margin-top: calc(50vh - 150px);
}
.row {
	padding: 16px calc((100vw - 865px) / 2);
	margin-top: 100px;
	margin-bottom: 100px;
}
.row .img, .row p {
	margin: 0 8px 1rem;
}
.row p.title {
	font-weight: bold;
	font-size: larger;
}
.row ul {
	margin: 0 0 1rem;
}
.row .img {
	border-radius: 10px;
	width: 639px;
	height: calc(var(--height) * 1px);
	max-width: calc(100vw - 2 * 8px);
	max-height: calc((100vw - 2 * 8px) / 639 * var(--height));
	background-size: cover;
}
.row:after {
	content: '';
	clear: both;
	display: block;
}
.row:target {
	animation: highlight .5s ease-in-out 2 alternate;
}
body:not(.scrolled) .row:not(:first-child):not(:target) .img {
	background: none !important;
}
@keyframes highlight {
	from { background: rgba(255, 255, 0, 0); }
	to { background: rgba(255, 255, 0, 0.3); }
}

@media (max-width: 900px) {
	/*.bar {
		background: rgba(166, 201, 208, .8);
	}*/
	.logo, .hanger {
		display: none;
	}
	.login-cutout {
		visibility: visible;
		position: fixed;
		left: 0;
		top: 0;
	}
	.menu:after {
		content: '';
		background: url(images/inverted-corner.svg);
		background-size: cover;
		width: 20px;
		height: 20px;
		opacity: .7;
		position: absolute;
		top: 0;
		right: 100%;
	}
	#gradient {
		height: 100px;
	}
	.header.header {
		font-size: x-large;
	}
	.header-hidden {
		display: none;
	}
	#header-1 {
		top: -5px;
		left: calc(50vw - 8.7ch);
	}
	#header-2 {
		left: calc(50vw - 13ch);
		transform: none;
		animation-delay: 1s;
	}
	#header-3 {
		top: 5px;
		left: calc(50vw - 2.5ch);
		transform: none;
		animation-delay: 2.3s;
		margin-bottom: 94px;
	}
	.annotation {
		font-size: medium;
		opacity: 0.99; /* Fix overflow: hidden on iOS. */
	}
	#annotation-1 {
		margin-top: 30px;
	}
	#annotation-2 {
		margin-top: 161px;
		margin-left: -43px;
	}
	#arrow-1 {
		margin-top: 132px;
		margin-left: -26px;
	}
	#arrow-1 img {
		transform: scale(-1);
	}
	#fastforward {
		margin-left: 100px;
		margin-top: 157px;
	}
	#demo-bar .menu-button, #demo-bar .menu > :first-child li {
		display: none;
	}
	#demo-bar .menu {
		position: static;
		padding: 0 calc(50vw - 160px);
	}
	#demo-bar .menu li {
		display: inline-block;
	}
	#contents {
		margin-top: calc(50vh - 220px);
	}
}
@media (max-height: 600px) {
	#header-1 {
		margin-top: 200px;
	}
	.annotation, .arrow {
		top: 300px;
	}
	#contents {
		margin-top: 150px;
	}
}
@media (max-width: 900px) and (max-height: 600px) {
	#contents {
		margin-top: 80px;
	}
}