@font-face {
  font-family: "LiberationMono";
  src: url("/fonts/LiberationMono-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "LiberationMono";
  src: url("/fonts/LiberationMono-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "LiberationMono";
  src: url("/fonts/LiberationMono-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "LiberationMono";
  src: url("/fonts/LiberationMono-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}


@property --hueOffset {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

@keyframes hueCycler {
	0% {
		--hueOffset: 0;
	}
	
	50% {
	  --hueOffset: 30;  
  }
	
	100% {
		--hueOffset: 0;
	}
}

@-webkit-keyframes hueCycler {
	0% {
		--hueOffset: 0;
	}
	
	50% {
	  --hueOffset: 30;  
  }
	
	100% {
		--hueOffset: 0;
	}
}

:root {
	--hue: mod(calc(var(--hueInit) - var(--hueOffset)), 360);
	--bg: hsl(0, 0%, 92%);
	--text: hsl(240, 9%, 17%);
	--mid: hsl(var(--hue), 100%, 30%);
	--high1: hsl(var(--hue), 100%, 40%);
	--high2: hsl(var(--hue), 66%, 70%);
	--label: hsl(0, 0%, 100%);
	animation: hueCycler 60s ease-in-out infinite;
	-webkit-animation: hueCycler 60s ease-in-out infinite;
	
	height: 100vh;
}

body {
	background: linear-gradient(to bottom, var(--bg), var(--high2));
	margin: 0;
}

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

h1 {
	color: var(--label);
	text-align: center;
	font-style: italic;
	margin: 0;
}

h2 {
	text-align: justify;
}

p {
	color: var(--text);
	text-align: justify;
	text-indent: 2.5rem;
	line-height: 125%;
	font-size: 12pt;
}

a {
	color: var(--mid);
}

header {
	background-image: linear-gradient(to bottom, var(--high1), var(--high2));
	height: 80px;

	h1 {
		line-height: 80px;
	}
}

#card {
	background: var(--bg);
	display: flex;
	flex-direction:column;
}

#cardBody {
	width: 100%;
	height: calc(100% - 84px);
	
}

#sidebar {
	display: flex;
	align-items: stretch;
		
	a {
			background-image: linear-gradient(to top, var(--high2), var(--bg));
		}
		
	a, p {
		padding: 0.5rem 0 0.5rem 0;
		margin: 0;

		font-style: italic;
		font-weight: bold;
		text-decoration: none;
		text-align: center;
		text-indent: 0;
	}
	
	a:hover {
		cursor: pointer;
	}
	
	a:hover, p {
		background-image: linear-gradient(to bottom, var(--high1), var(--high2));
		color: var(--label);
	}
}

#content {
	max-height: calc(100% - 16px);
	padding: 0 16px 0 16px;
	overflow: scroll;
	word-wrap: break-word;
	
	p {
		line-height: 150%;
		padding: 0;
	}
}

#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: 1000px) {
	#card {
		width: 800px;
		max-height: 600px;
	}
}

@media only screen and (min-width: 640px) {
	body {
		padding: 32px;
		overflow: hidden;
	}
	
	h1 {
		font-size: 4rem;
	}
	
	header {
		border-bottom: 4px solid var(--mid);
	}
	
	#card {
		max-width: 80vw;
		height: 60vw;
		
		margin-left: auto;
		margin-right: auto;
		border: 4px solid var(--mid);
		border-radius: 16px;
		overflow: hidden;
	}

	#sidebar {
		flex-direction: column;
	
		float: left;
		
		width: calc(30% - 4px);
		height: 100%;
		border-right: 4px solid var(--mid);
		
		a, p {
			font-size: 16pt;
			line-height: 125%;
			
			border-bottom: 4px solid var(--mid);
		}
	}
}

@media only screen and (max-width: 999px) {
	h1 {
		font-size: clamp(1rem, 10vw, 3rem)
	}
}

@media only screen and (max-width: 639px) {
	body {
		padding: 0;
		overflow: scroll;
	}
	
	header {
		border-bottom: 2px solid var(--mid);	
	}
	
	#sidebar {
		flex-direction: row;
		align-content: stretch;
		flex: 1;
		
		border-bottom: 2px solid var(--mid);
		
		a, p {
			/*I still don't like this not being dynamic */
			width: calc(100% / 3);
			
			font-size: 12pt;
			line-height: 90%;
		}
	}
	
}