@include box-sizing;
@include font-face("Merriweather");
@include font-face("CourierNew");

* {
	font-family: Merriweather, Georgia, serif;
	color: $lightblue;
}

html {
	background-color: #454545;
}

html, body {
	height: 100%;
	margin: 0;
}

a {
	display: inline-block;
	position: relative;
	text-decoration: none;
	transition: linear 0.2s;
	color: $purple;

	&:before {
		content: '';
		height: 2px;
		position: absolute;
		bottom: -1.5px;
		width: 100%;
		left: 50%;
		@include linear-gradient($rainbowright...);
		@include transform(translate(-50%, 0));
		@include transition(width 0.2s ease-in-out);
	}

	&:hover {
		color: $white;
	}

	&:hover:before {
		width: 0;
	}
}

@mixin animate-letter($n) {
	.e#{$n} {
		position: relative;
		$delay: (12 - $n) * -100ms;
		@include animation-delay($delay);
		@include animation(
			wave 1s linear $delay infinite,
			rainbow 3s linear $delay infinite);
	}
}

#webring {
	position: relative;
	width: 100%;
	padding: 0.5em;

	.left {
		float: left;
	}

	.right {
		float: right;
	}

	center {
		width: 100%;
		left: 0;
		position: absolute;
		margin-top: 3px;

		.center {
			.header {
				@for $i from 0 through 12 {
					@include animate-letter($i);
				}
			}
		}
	}

}

@media (prefers-reduced-motion: reduce) {
	.header span {
		animation: none !important;
	}
}

@include keyframes(wave) {
	0%	 {top: 0px;}
	25%	 {top: -1px;}
	50%	 {top: 0px;}
	75%	 {top: 1px;}
	100% {top: 0px;}
}

@include keyframes(rainbow) {
	0%   {color: $red;}
	17%  {color: $orange;}
	33%  {color: $yellow;}
	50%  {color: $green;}
	67%  {color: $blue;}
	83%  {color: $purple;}
	100% {color: $red;}
}