@import "./variables";
@import "./mixins";

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

@include keyframes(shake) {
	0% { @include transform(translate(1px, 1px) rotate(0deg)); }
	10% { @include transform(translate(-1px, -2px) rotate(-1deg)); }
	20% { @include transform(translate(-3px, 0px) rotate(1deg)); }
	30% { @include transform(translate(3px, 2px) rotate(0deg)); }
	40% { @include transform(translate(1px, -1px) rotate(1deg)); }
	50% { @include transform(translate(-1px, 2px) rotate(-1deg)); }
	60% { @include transform(translate(-3px, 1px) rotate(0deg)); }
	70% { @include transform(translate(3px, 1px) rotate(-1deg)); }
	80% { @include transform(translate(-1px, -1px) rotate(1deg)); }
	90% { @include transform(translate(1px, 2px) rotate(0deg)); }
	100% { @include transform(translate(1px, -2px) rotate(-1deg)); }
}

img:hover {
	@include animation(shake 0.5s linear infinite);
}

@media (prefers-reduced-motion) {
	img:hover {
		@include animation(none !important);
	}
}

* {
	scrollbar-color: $blue transparent;
}

h1 {
	font-family: $header-font;
	font-size: 325%;
	line-height: 100%;
	margin: 15px 0;
}

h2 {
	font-family: $header-font;
	font-size: 200%;
	line-height: 100%;
	margin: 12px 0;
}

h3 {
	font-family: $header-font;
	font-size: 150%;
	line-height: 100%;
	margin: 5px 0;
}

h4 {
	font-family: $header-font;
	font-size: 130%;
	line-height: 100%;
	margin: 2px 0;
}

a,
a:visited {
	color: $yellow;
	@include text-decoration(underline);
}

a:hover {
	color: $yellow-alt;
	@include text-decoration(underline);
}

html {
	color: $white;
	font-family: $font;
	font-size: 120%;
	background: #181818;
	background-image: url("../img/background.jpg?ref=2");
	background-repeat: repeat;
	background-size: 512px;
}

html,
body,
#container {
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	padding: $inner-gap;
	min-height: 100%;

	.center {
		display: table;
		margin: 0 auto;
	}
}

#header,
#main,
#footer,
#container {
	@include border-radius($outer-radius);
	width: $page-width;
	text-align: left;
}

@media (max-width: ($page-width + $outer-gap * 2)) {
	body, #header,
	#main, #footer,
	#container {
		width: 100%;
		min-width: 250px;
	}
}

#header,
#footer {
	display: block;
	@include section;
}

#header {
	$logo-size: 200px;
	height: #{$logo-size + $inner-gap * 2 + 10px};
	padding: $inner-gap;

	img {
		@include border-radius($inner-radius);
		float: left;
		height: $logo-size;
		width: $logo-size;
	}

	.content {
		padding-top: 30px;
		padding-left: $logo-size;

		.logo-text {
			margin: 0;
			text-align: center;
			text-shadow: 3px 3px $white-alt;
		}

		#nav {
			margin: 0;
			padding: 0;
			list-style-type: none;
			margin: 0 auto;
			@include display-table($inner-gap);

			ul { padding: none;}

			li {
				@include display-table-cell;
				float: left;
				padding: $inner-gap;

				a {
					@include text-decoration(none);

					&:hover,
					&:active {
						color: $yellow;
						@include text-decoration(underline);
					}

					h2 {
						margin: 0;
						text-shadow: 3px 3px $yellow-alt;
					}
				}
			}
		}
	}
}

@media (max-width: 800px) {
	#header {
		display: block;
		height: auto;

		img {
			float: none;
			display: block;
			margin: 0 auto;
		}

		.content {
			padding-top: 0;
			padding-left: 0;

			#nav {
				text-align: center;
			}
		}
	}
}

@media (max-width: 550px) {
	#header .content #nav {
		li {
			float: none;
			display: block;
		}
	}
}

#footer {
	padding: $inner-gap;

	.footer-text {
		display: block;
		margin: 10px 0;
	}

	.bucket {
		margin-top: $inner-gap;
		width: 100%;
		height: 40px;
		border: none;
	}

	.john {
		display: block;
		max-width: 732px;
		height: 94px;
		width: 100%;
		border: none;

		@media(max-width: 732px) {
			height: 12vw;
		}
	}

	.buttons {
		a, img {
			height: 30px;
			text-decoration: none;
		}
	}
}

#main .section {
	@include section;

	.heading {
		@include linear-gradient(to bottom, $blue, $black);
		margin: 0;
		padding-left: $inner-gap;
		@include border-radius($inner-radius $inner-radius 0 0);
	}

	h1, h2, h3, h4, h5,
	span, pre {
		margin-left: $inner-gap;
	}

	p {
		padding: 0 $inner-gap;
	}

	blockquote p {
		border-left: 5px solid $blue;
	}

	pre {
		background: black;
		margin-right: $inner-gap;
		@include border-radius($outer-radius);
		padding: $inner-gap;
	}

	code {
		font-family: $font;
		color: $green;
	}

	pre code {
		color: $white;
	}

	table {
		width: 100%;

		th, td {
			padding: $outer-radius;
			font-family: $header-font;
			font-size: 120%;
			line-height: 120%;

			@media (max-width: 400px) {
				font-size: 100%;
				line-height: 100%;
			}

			@media (max-width: 360px) {
				font-size: 90%;
				line-height: 90%;
			}

			@media (max-width: 320px) {
				font-size: 80%;
				line-height: 80%;
			}

		}

		td {
			background: $blue-alt;
		}

		th {
			background: $blue;
			text-align: left;
		}

		tr:last-child {
			th {
				@include border-radius(0 0 0 $inner-radius);
			}
			tr {
				@include border-radius(0 0 $inner-radius 0);
			}
		}
	}
}