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

@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;

	@media (max-width: 400px) {
		font-size: 300%;
		margin: 12px 0;
	}

	@media (max-width: 340px) {
		font-size: 250%;
	}
}

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

	@media (max-width: 400px) {
		font-size: 175%;
		margin: 9px 0;
	}

	@media (max-width: 340px) {
		font-size: 165%;
	}
}

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

	@media (max-width: 400px) {
		font-size: 125%;
		margin: 4px 0;
	}

	@media (max-width: 340px) {
		font-size: 120%;
	}
}

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

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

	@media (max-width: 340px) {
		font-size: 115%;
	}
}

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%;
}

body {
	@include background-image(
		url("WEB_ROOT/public/img/background.png?ref=4"),
		url("WEB_ROOT/public/img/background.webp?ref=7") type("image/webp"),
		url("WEB_ROOT/public/img/background.png?ref=4") type("image/png")
	);
	background-repeat: repeat;
	background-size: 512px;
	background-color: #181818;
	min-height: 100%;
}

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

	.section {
		@include section;
	}
}

#main div.span {
	padding-left: $inner-gap;
}

#header,
#main,
#footer,
.container {
	display: block;
	width: $page-width;
}

#header,
#footer {
	margin-bottom: $outer-gap;

	.section {
		padding: $inner-gap;
	}
}

#header {
	margin-top: $outer-gap;

	&, &.container {
	  height: $logo-width + $inner-gap * 2 + $border-width * 2;

	  .section {
		height: $logo-width;
	  }
	}

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

	.content {
		height: $logo-width;

		.logo-text {
			margin: 0;
			text-align: center;
			text-shadow: 3px 3px $white-alt;
			height: $logo-width / 2;
			line-height: $logo-width / 2;
		}

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

			li {
				float: left;
				@include display-table-cell;
				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;
					}
				}
			}
		}
	}
}

#header,
#main,
#footer {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* once the page has been shrank to max content width */
@media (max-width: ($page-width + $outer-gap * 2 + $border-width * 2)) {
	body,
	#header,
	#main,
	#footer {
		width: 100%;

		.container {
			padding: 0 $outer-gap;
			width: auto;
		}
	}
}

@media (max-width: 800px) {
	#header {
		&, &.container {
		  height: auto;

		  .section {
			height: auto;
		  }
		}

		#logo {
			float: none;
			display: block;
			margin: 0 auto;
		}

		.content {
			height: auto;

			.logo-text {
				height: auto;
			}

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

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

@media (max-width: 300px) {
	body,
	#header,
	#main,
	#footer {
		width: 300px;
	}
}

#footer {
	.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;
		background: white;

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

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

#main .section {
	@include section;
	margin-bottom: $outer-gap;

	.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;
	}

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

	pre {
		@include border-radius($outer-radius);
		background: black;
		overflow-x: scroll;
		margin-right: $inner-gap;

		code {
			padding: $inner-gap;
			padding-bottom: 0px;
			color: $white;
		}
	}

	table {
		width: 100%;

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

			@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;
		}

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

	&#post,
	&#writeup {
		.posted {
			margin-top: $inner-gap;
		}
	}

	&#ad {
	  padding: $inner-gap;
	}
}