html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
	font-style: normal;
	font-size: 16px;
}

a {
	color: inherit;
	text-decoration: underline;
}

p+p {
	margin-top: 20px;
}

#introduction {
	height: 90vh;
	background: #a6ffcb;;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 72px;
}

@media (min-height: 680px) and (orientation: portrait) {
    #introduction {
		height: 80vh;
	}
}

#life {
	background: linear-gradient(to top, #1fa2ff, #12d8fa, #a6ffcb);
}

#timeline {
	position: fixed;
	width: 0;
	top: 10px;
	bottom: 100px;
	left: 0;
	overflow: hidden;
}

#timeline .marker {
	position: absolute;
	width: 100%;
	border-top: 1px solid #666;
}

#cords {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 330px;
	height: 100%;
}
@media (min-height: 680px) and (orientation: portrait) {
	#cords {
		width: 130px;
	}
}

#cords path {
	opacity: 0;
	transition: opacity 800ms ease-out;
}

#cords path.visible {
	opacity: 1;
}

#content {
	padding: 10px 12.2807017544% 72px 340px;
}
@media (min-height: 680px) and (orientation: portrait) {
	#content {
		padding: 10px 10% 48px 160px;
	}
}

#events .event {
	margin-bottom: 30px;
	line-height: 1.3;
	font-size: 20px;
	font-weight: normal;
}

@media (min-height: 680px) and (orientation: portrait) {
    #events .event {
		font-size: 42px;
	}
}

#events .event time {
	font-weight: bold;
}

#note {
	background: #ea1f6e;
	color: #fff;
	font-weight: bold;
	padding: 0.8em 10% 1em;
}