/* Dandelions */

@keyframes wipe {
	0%   { transform: rotate(5deg) translateX(10%); }
	100% { transform: rotate(-5deg) translateX(-100%); }
}
@keyframes wipetwo {
	0%   { transform: rotate(-5deg) translateX(10%); }
	100% { transform: rotate(15deg) translateX(-100%); }
}
@keyframes scaleup {
	0%   { transform: scale(0.6); }
	100% { transform: scale(1.2); }
}
@keyframes wobble {
	25% { transform: rotate(20deg); }
	75% { transform: rotate(-20deg); }
}

html {
	height: 100%;
}
body {
	background-color: #1D85D8;
	background-image: url(../images/mountains.png), linear-gradient(to top, #BEEBFF, #1D85D8);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	padding-bottom: 300px;
	background-attachment: fixed;
	box-sizing: border-box;
}
header,
header nav,
header nav ol {
	border-radius: 0;
}
header nav ol li:hover {
	background-color: rgba(3, 169, 244, 0.5);
}
header nav a {
	color: white;
}
header {
	margin-top: 0;
}
.dandelions {
	position: fixed;
	width: 100%;
	overflow: hidden;
}
.content {
	position: relative;
	top: 0;
	left: 0;
	/*margin: 30px;*/
	/*padding: 20px;*/
	border-radius: 10px;
	background-color: rgba(255,255,255, 0.85);
	transition: margin 0.5s ease-in-out, padding 0.5s ease-in-out;
}

.dandy-track {
	text-align: right;
	/*border: 1px dashed yellow;*/
	transform: translateZ(0);
	will-change: transform;
	animation: wipe 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	transform: rotate(5deg) translateX(10%);
}
.dandy {
	background-image: url(../images/dandelion.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 64px;
	height: 64px;
	transform: translateZ(0);
	will-change: transform;
	display: inline-block;
	background-position: center;
	animation: wobble 6s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	transform-origin: 50% 10%;
}
.dandy-track:nth-child(2) { animation-delay: 7s,   0s; animation-duration: 11s; }
.dandy-track:nth-child(3) { animation-delay: 1s,   0s; animation-duration: 33s; animation-name: wipetwo; }
.dandy-track:nth-child(4) { animation-delay: 20s,  0s; animation-duration: 29s; }
.dandy-track:nth-child(5) { animation-delay: 2s,   0s; animation-duration: 13s; animation-name: wipetwo; }
.dandy-track:nth-child(6) { animation-delay: 14s,  0s; animation-duration: 32s; animation-name: wipetwo; }
.dandy-track:nth-child(7) { animation-delay: 8s,   0s; animation-duration: 9s; }
.dandy-track:nth-child(8) { animation-delay: 1s,   0s; animation-duration: 12s; }
.dandy-track:nth-child(9) { animation-delay: 12s,  0s; animation-duration: 31s; }

.dandy-track:nth-child(2) .dandy { animation-delay: 7s; }
.dandy-track:nth-child(3) .dandy { animation-delay: 1.5s; animation-duration: 4s; width: 32px; height: 32px; opacity: 0.5; }
.dandy-track:nth-child(4) .dandy { animation-delay: 5s;   width: 32px; height: 32px; opacity: 0.5; }
.dandy-track:nth-child(5) .dandy { animation-delay: 2s;   animation-duration: 4s; }
.dandy-track:nth-child(6) .dandy { animation-delay: 3.5s; animation-duration: 4s; width: 32px; height: 32px; opacity: 0.5; }
.dandy-track:nth-child(7) .dandy { animation-delay: 8s; }
.dandy-track:nth-child(8) .dandy { animation-delay: 1s;   animation-duration: 4s; }
.dandy-track:nth-child(9) .dandy { animation-delay: 4s;   width: 32px; height: 32px; opacity: 0.5; }