/* Terrible beastly thing. */

@import './fonts/DejaVuSansMono.css';

@import './hue.css';

:root {
	--label: hsl(0, 0%, 100%);
	
	min-height: 100vh;
}

body {
  display: grid;
	padding: 0;
	margin: 0;
	background-color: #202024
}

h1, h2, h3, p, a {
	font-family: "DejaVuSansMono", monospace;
}

header {
	background-image: linear-gradient(to bottom, var(--mainHigh), var(--hueHigh2));
	border-bottom: 2px solid var(--hueMid);
	
	display: flex;
	flex-direction: row;
	align-items: center;
	
	h1, #navbar a {
		color: var(--hueMid);
		font-style: italic;
		font-weight: bold;
		text-decoration: none;
		text-align: center;
		
		padding: 0 1rem 0 1rem;
		margin: 0;
	}
}

#navbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: stretch;
	
	a {
		font-size: 16pt;
	}
	
	a:hover {
		cursor: pointer;
		background-image: linear-gradient(to bottom, var(--hueHigh1), var(--hueHigh2));
		color: var(--label);
	}
}

#badges {

	display: flex;
	flex-direction: row;
	justify-content: center;

	margin-left: auto;
	margin-right: auto;
	margin-top: 32px;	
	margin-bottom: 32px;
}

@media only screen and (min-width: 850px) {
	header {
		align-content: left;
		height: 64px;
		
		h1 {
			font-size: 32pt;
		}
	}
	
	main {
		border: 2px solid var(--hueHigh1);
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 32px;
	}
	
	#navbar {
		width: 30%;
		
		a {
			line-height: 300%;
			min-width: 128px;
		}
	}
}


@media only screen and (max-width: 849px) {	
	header {
		display: block;
		overflow: hidden;
		
		h1 {
			display: none;
		}
	}
	
	main {
		border-bottom: 2px solid var(--hueMid);
		width: 100%;
	}
	
	#navbar {
		flex-direction: row;
		width: 100%;
		
		a {
			line-height: 150%;
			min-width: 96px;
		}
	}
}