@font-face {
	font-family: YosterIsland;
	src: url(/fonts/yoster-island/yoster.ttf) format("truetype");
}

:root /* root allows for defining terms which can be used later on in the code. This way we can reference a specific color without having to remember what a specific color's hexcode is, and it also makes it easier to edit the color universally by just changing the one instance, affecting all usages. */
{
	--accent-light:#ffd711; /* Yellow */
	--accent-dark:#caa200;
	--invisible:#FFFFFF00;
	--visible:#FFFFFFFF;
}

.center /* This is a broad class used to align things into the center. Should only really be used when no more specific class is applicable or the <center> tag isn't working */
{
	text-align:center;
}

body:not(.unique) /*This is the general background. It defaults to black if no image can be found.  */
{
	background-color:black;
	background-image:url('/background.gif');
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	z-index:5;
}

.wrapper /* This is the wrapper for the entire main body.*/
{
	width:50%;
	margin:auto;
	margin-top:100px;
	min-width:800px;
	max-width:1200px;
	background-color:#020203CC;
	padding-top:20px;
	padding-bottom:100px;
	padding-left:20px;
	padding-right:20px;
	border-radius:25px;
	border-width:8px 10px; /* top and bottom, sides */
	/*border-color:blue; /* Top, right, bottom, left */
}

nav /* This applies to all navs. This might have to be changed later */
{
	text-align:center;
	padding:5px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index:25;
}

nav a /* For any links in a nav */
{
	color:white;
	padding:5px 40px;
	border-radius:5px;
	background-color:#020203CC;
}

nav a:hover
{
	background-color:#020203CC;
	border-radius:50px;
	margin-bottom:10px;
	padding:20px 50px; /* Vertical, horizontal */
}

.small-title /* For the welcome text above the main title on the home page */
{
	font-size:20px;
	text-align:center;
}

p
{
	color:white;
	font-size:20px;
	font-family:YosterIsland;
}

a /* This just makes it so that all links display as the accent color, which is currently a yellow color */
{
	color:var(--accent-light);
}

a:hover /* This just makes it so that all links display as a dark version of the accent color when hovered over, which is a darker yellow-ish orange color */
{
	color:var(--accent-dark);
}

a.image-link
{
	color:var(--invisible);
}

a.image-link:hover
{
	color:var(--invisible);
}