:root {
	--bg-one: #721727;
	--bg-two: #581b64;
	--bg-three: #1b6d74;
	--bg-four: #608437;
	--bg-one-lite: #b65b6b;
	--bg-two-lite: #9c5fa8;
	--bg-three-lite: #5FB1B8;
	--bg-four-lite: #A4C87B;
	

	--nav-bar-bg: #333333;
	--nav-button-text-color: #ffffff;
	--nav-hover-color: #111111;

	font-family: sans-serif;
}

@font-face {
	font-family: "Federo";
	src: url("/static/fonts/Federo/Federo-Regular.ttf")
}

@font-face {
	font-family: "Sacramento";
	src: url("/static/fonts/Sacramento/Sacramento-Regular.ttf")
}

@font-face {
	font-family: "Oregano";
	src: url("/static/fonts/Oregano/Oregano-Regular.ttf")
}

@font-face {
	font-family: "Neonderthaw";
	src: url("/static/fonts/Neonderthaw/Neonderthaw-Regular.ttf")
}

@font-face {
	font-family: "Caviar Dreams";
	src: url("/static/fonts/caviar_dreams/CaviarDreams.ttf")
}

@font-face {
	font-family: "Royalty Free";
	src: url("/static/fonts/royalty_free/Royalty Free.ttf")
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

body {
	font-size: 2em;
	font-family: "Caviar Dreams";
	display: flex;
	flex-direction: column;
	background: linear-gradient(
		-45deg, 
		var(--bg-one), 
		var(--bg-two), 
		var(--bg-three),
		var(--bg-four)
	);
	background-size: 400% 400%;
	animation: gradient 30s ease infinite;
	height: 100vh;
}



/* Base Styling */
.content {
	font-weight: 350;
	font-style: normal;
}

/* Title-Header Styling */
h1 {   
    font-family: "Royalty Free";
    text-align: center;
    font-size: 3em;
	color: var(--bg-four-lite);
	text-shadow: 
		1px -2px white, 
		2px 1px 0px var(--bg-four), 
		2px 1px 4px black;
}

/* Subheader Base Styling */
h2, h3, h4, h5 {
    font-family: "Federo";
    text-align: center;
    margin: 0;
}

/* Create Background "card" for blockquotes*/
blockquote {
	background-color: rgba(255, 255, 255, 0.6);
    border-radius: 2em;
    padding: 4em;	
	box-shadow: 12px 16px 16px rgba(0, 0, 0, 1);
}

/* Center paragraphs within blockqoute "cards" */
blockquote p {
	text-align: center;
}

/* Todo remove?
li {
    font-family: sans-serif;
    font-size: 0.8em;
    list-style-type: none;
}
*/

/* Scale container to 'max within screenspace' */
.fullPane {
    width: 100%;
}

/* Default link styling */
a {
	color: var(--bg-three);
    text-decoration: none
}

/* Default link hover styling */
a:hover {
	color: var(--nav-button-text-color);
}