/* CSS Stylesheet by Cosine Gaming */

/* Contents:
 * Universal Elements
  * ~ Lines 21 - 71
 * Universal Classes / IDs (Eg .indent, .wrap, .horizontal-ad)
  * ~ Lines 71 - 104
 * Main Blocks (Eg nav, footer)
  * ~ Lines 104 - 194
 * Form Styling
  * ~Lines 196 -
 */

/*
Colors:
(May be repeated throughout the document, when changing make sure to find and replace!)
Background: #00010f
Primary: #d3e4f9
Highlight: #f698ec
*/

/* Universal IDs */

* {
	/* Some browser styles are phenomonally annoying */
	margin: 0px;
	padding: 0px;
}

@font-face {
	font-family: Biolinum;
	src: url("/static/fonts/linux-biolinum.woff2") format("woff2"),
	     url("/static/fonts/linux-biolinum.woff") format("woff"),
	     url("/static/fonts/linux-biolinum.ttf") format("truetype");
}

@font-face {
	font-family: Libertine;
	src: url("/static/fonts/linux-libertine.woff2") format("woff2"),
	     url("/static/fonts/linux-libertine.woff") format("woff"),
	     url("/static/fonts/linux-libertine.ttf") format("truetype");
}

body {
	font-size: 20px;
	font-weight: 100;
	font-family: Biolinum, sans-serif;
	text-align: center; /* Lets us center inline-blocks */
	background-color: #f5f5f5;
	background-size: 1000px 1000px;
	background-repeat: repeat;
	/*background-image: url("/static/wave.gif");*/
	overflow-x: hidden;
}

a {
	text-decoration: none;
	color: #3b9ad6;
	font-family: Libertine, serif;
	transition: color 0.5s;
}

a:hover {
	color: #14115c;
}

a:active {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-family: Libertine, serif;
}

/* Headings start at 40px (Twice normal) and decrease by 4 each hx
 * By default, but symantic markup is used to determine hx,
 * Then inline styles to determine size */
h1 { font-size: 40px; }
h2 { font-size: 36px; }
h3 { font-size: 32px; }
h4 { font-size: 28px; }
h5 { font-size: 24px; }
h6 { font-size: 20px; }

b {
	font-weight: bold;
}

ul.dash {
	list-style: none;
	margin-left: 20px;
	padding-left: 20px;
}

ul.dash > li:before {
	display: inline-block;
	content: "- ";
	width: 20px;
	margin-left: -20px;
}

/* Universal Classes */

.indent {
	text-indent: 50px;
}

.highlight {
	color: #0d3365;
}

.wrap {
	max-width: 700px;
	margin: 0 auto;
	text-align: justify;
}

@media screen and (max-width: 350px) {
	.wrap {
		text-align: left;
	}
}

.card {
	background-color: white;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.26);
	padding: 25px;
	margin: 25px;
}

.bottom-spaced {
	margin-bottom: 20px;
}

.entry-spaced {
	margin-top: 40px;
}

#triangles {
	/* Width:height must equal 10:1 on account of the JS script */
	max-width: 1400px;
	height: 140px;
	margin: 0 auto 20px auto;
	overflow: hidden;
}

.horizontal-ad {
	margin: 10px auto;
	overflow: hidden;
}

/* Major Blocks */

nav {
	overflow: hidden;
	width: 100%;
	background-color: #14115c;
	box-shadow: 0 4px 10px 0 rgba(0,0,0,.26);
}

	nav ul {
		text-align: center;
		padding-top: 40px;
		/* Ghost spaces from formatting shouldn't show up when selected */
		font-size: 0;
	}

		nav ul li {
			display: inline;
			padding: 0 5%;
			font-size: 25px;
		}

		nav ul #active a {
			color: #3b9ad6;
		}

	nav h1 {
		padding-top: 20px;
		padding-bottom: 40px;
		text-align: center;
		font-size: 75px;
	}

	nav a {
		color: #d3e4f9;
	}

	nav a:hover {
		color: #3b9ad6;
	}

/* By default, the header has hard-coded sizes. This helps different devices look Ok.
 * The padding / sizes above is set for 680i - 1000i. That lines up the links with "Cosine Gaming".
 * The following adjust for more spatious padding if we can afford it.
 * They also adjust for smaller text or even a different design for smaller sizes (iPhone has a vertical list for navigation)
 */

@media screen and (max-width: 680px) and (min-width: 460px) {


	nav ul li {
		font-size: 20px;
	}

	nav h1 {
		font-size: 50px;
	}

}

@media screen and (max-width: 460px) {

	nav ul {
		padding-top: 20px;
	}

		nav ul li {
			/* Back to vertical list, no matter what */
			display: block;
			font-size: 20px;
		}

	nav h1 {
		padding-top: 10px;
		font-size: 45px;
	}

}

.card:first-child {
	margin-top: 50px;
}

footer {
	display: inline-block;
	margin: 25px;
	padding-bottom: 25px;
	max-width: 1400px;
	text-align: center;
}

/* Form Styling */

:invalid {
	border-color: red !important;
}

input[type="radio"] {
	display: none;
}

label {
	display: block;
	width: 184px;
	padding: 5px 0px;
	margin: 8px;
	float: left;
	text-align: center;
	background-color: #d3e4f9;
	color: #14115c;
	transition: color 0.2s, background-color 0.2s;
}

label:hover {
	background-color: #3b9ad6;
	color: #14115c;
}

input[type="radio"]:checked + label {
	background-color: #3b9ad6;
	color: #d3e4f9;
}

label + br, label + p {
	/* We must clear the float from the label so we don't screw stuff up */
	clear: both;
}

textarea, input {
	background-color: #f5f5f5;
	color: black;
	font-family: Biolinum, sans-serif;
	font-size: 20px;
	border: none;/*2px solid #f698ec;*/
	margin: 10px 0px;
	padding: 4px;
}

textarea {
	width: 100%;
	height: 75px;
	padding: 10px;
}

input[type="range"] {
	border: none;
}

input[type="submit"] {
	background-color: #3b9ad6;
	color: black;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
	transition: box-shadow 0.3s, background-color 0.3s;
}

input[type="submit"]:hover {
	box-shadow: 0 4px 10px 0 rgba(0,0,0,.26);
	background-color: #d3e4f9;
}

input[type="submit"]:active {
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.26);
	transition: box-shadow 0.1s, background-color 0.1s;
}

.slide-in
{
	position: relative;
	animation: slide-in 0.5s cubic-bezier(0.745, 1.650, 0.610, 0.845);
}

@keyframes slide-in
{
	from { left: -100%; }
	to { left: 0; }
}