@font-face 
{
  font-family: gluten;
  src: url(../fonts/gluten/Gluten-VariableFont_wght.ttf);  
}
@font-face
{
	font-family: creepster;
  src: url(../fonts/creepster/Creepster-Regular.ttf);	
}
:root
{
	--max-width: 55%;
	--bg-color: #231f20;
	--bg-color-2: #222;
	--main-font: creepster;
	--secondary-font: gluten;
	--font-color: maroon;
	--shadow: 1px 1px 1px black;
	--font-color-2: Moccasin;
	--br: 5px;
	/* --font-color-2: PeachPuff; */
	/* --font-color-2: PaleGoldenrod; */
	/* --font-color-2: Khaki; */
}

* {margin: 0; padding: 0; box-sizing: border-box; font-family: var(--main-font); text-shadow: var(--shadow); font-weight: lighter;}
html
{
	scroll-behavior: smooth;
}
nav.sub-nav, h1.alternates-heading
{
	background-color: transparent;
	border: none;
	box-shadow: none;
}
a[href="#top"]
{
	font-size: 18px;
	color: #ccc;
	font-family: gluten;
}
main.alternates > section
{
	width: 90%;
	margin: 20px auto;
	background-color: var(--font-color-2);
	padding: 20px;
	border-radius: var(--br);
	box-shadow: 0 0 50px var(--font-color);
	border: 10px solid black;
}
main.alternates > section > h1
{
	font-size: 45px;
}
main.alternates > section > h2 
{
	margin: 40px 0 0 0;
	color: var(--font-color);
	/* font-size: 30px; */
}
main.alternates > section > p
{
	text-align: left;
	/* border: 1px solid red; */
	margin: 10px 0 20px 0;
	font-size: 25px;
	font-family: gluten;
	max-width: 100%;
	display: block;
	line-height: 27px;
}
main.alternates > section > p > em, main.alternates > section > ul > li {font-family: gluten;}
main.alternates > section > ul > li {font-size: 25px;}
body {background-color: var(--bg-color); padding: 0 0 35px 0;}
form, input {display: block; letter-spacing: 6px;}
form {margin: 20px auto; max-width: var(--max-width);}
input 
{
	padding: 10px; 
	font-size: 45px; 
	/* min-width: 50%;  */
	margin: 0 auto; 
	margin-bottom: 10px;
	font-weight: bold;
	cursor: pointer;
	max-width: 99%;
	display: block;
	/* outline: none; */
	/* border: none; */
	border-radius: 5px;
}
div.admin-links
{
	margin: 0 auto;
	text-align: center;
}
div.admin-links > a
{
	font-size: 35px;
	display: inline-block;
	margin: 10px;
	border: 2px solid var(--font-color-2);
	padding: 30px;
	border-radius: 15px;
}
div.video, div.video > div, div.video > div > iframe {border-radius: 15px; }
div.video, p, small {max-width: var(--max-width); margin: 20px auto; text-align: center; display: block;}
small > a {font-size: 35px; padding: 10px; display:inline-block; border-top: 1px dotted var(--font-color); border-bottom: 1px dotted var(--font-color);}
a:not(.regular):hover {color: var(--font-color); text-shadow: var(--shadow);}
a
{
	font-size: 75px;
	margin: 10px auto;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	color: var(--font-color-2);
	text-decoration: none;
	transition: color 500ms;
}
a.regular:hover 
{
	border-bottom-color: transparent;
	border-top-color: var(--font-color);
}
a.regular 
{
	font-size: 25px;
	margin: 0;
	padding: 0;
	color: var(--font-color);
	transition: border-color 300ms;
	text-decoration: none;
	font-family: var(--secondary-font);
	border-bottom: 2px solid var(--font-color);
	border-top: 2px solid transparent;
}
ul li {margin: 20px 50px;}
h2, h2 > a {font-size: 35px;}
h2
{
	margin-top: 75px;
}
div.change-log > h1 > a
{
	color: var(--font-color);
	text-shadow: var(--shadow);
	font-family: var(--main-font);
	letter-spacing: 6px;
}
div.change-log *
{
	font-family: var(--secondary-font);
}
div.change-log > h2
{
	margin-top: 55px;
}
div.change-log
{
	margin: 0 auto;
	color: var(--font-color-2);
	font-size: 35px;
	padding: 20px; 
}
div.error
{
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 10px;
}
div.error > span
{
	color: #db1d40; 
	text-align: center; 
	font-size: 25px; 
	display:block;
	margin: 0 auto;
	font-weight: bold;
	font-size: 4em;
	letter-spacing: 8px;
}
form.vote-form
{
	display: block;
	margin: 0;
	max-width: 100vw;
}
section.voting-images 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}
div.voting-image 
{
	position: relative;
}
div.voting-image input
{
	display: none;
}
div.voting-image input:checked + label img
{
	border: 5px solid var(--font-color);
}
div.voting-image label img:hover 
{
	transform: scale(1.05);
}
div.voting-image img 
{
	transition: transform 500ms;
	border: 5px solid transparent;
	border-radius: 15px;
}
div.voting-image label img 
{
	cursor: pointer;
}
div.voting-image img 
{
	margin: 10px;
}
small.vote-count 
{
	color: var(--font-color-2);
	position: relative;
	font-size: 55px;
	text-align: center;
}

.image-poll, h1.alternates-heading
{
	color: var(--font-color);
	text-align: center;
	margin: 10px;
	font-size: 55px;
	font-weight: lighter;
	text-shadow: var(--shadow);
}
h1.alternates-heading
{
	margin-bottom: 50px;
	font-size: 65px;
}
h3.image-poll
{
	font-size: 55px;
	color: var(--font-color-2);
}
.biggest 
{
	color: var(--font-color);
	text-shadow: var(--shadow);
}

div.vote-button input:hover
{
	border-color: var(--font-color);
	color: var(--font-color-2);
}
div.vote-button input 
{
	transition: border-color 500ms, color 500ms;
	border-radius: 15px;
	/* max-width: 350px; */
	/* min-width: auto; */
	/* width: 200px; */
	background-color: var(--bg-color-2);
	color: var(--font-color);
	font-weight: bold;
	border: 6px solid var(--font-color-2);
	font-size: 65px;
	text-shadow: var(--shadow);
	padding: 10px 2x5px;
}
nav ul li, nav ul li a {display: inline-block; margin: 0;}
nav 
{
	background-color: var(--bg-color-2); 
	text-align: center; 
	margin-bottom: 35px;
	box-shadow: 0 8px 6px -6px #333;
	padding: 10px;
}

nav ul li a 
{
	font-size: 45px;
	margin: 8px 15px;
	padding: 10px 20px;
	border-radius: 15px;
}
nav ul li a.active:hover 
{
	color: var(--font-color-2);
}
nav ul li a.active
{
	background-color: var(--font-color);
}
p.savings, p.savings > a
{
	color: var(--font-color);
	text-shadow: var(--shadow);
	font-size: 35px;
	text-align: center;
	font-family:  var(--secondary-font);
}
p.savings > a:hover
{
	color: var(--bg-color);
	background-color: var(--font-color-2);
}
p.savings > a 
{
	transition: color 350ms, background-color 350ms;
	display: inline-block;
	padding: 20px;
	border: 2px solid var(--font-color-2);
	color: var(--font-color-2);
	border-radius: 15px;
}
p.normal
{
	padding: 20px;
	margin: 0 auto !important;
	width: 300px;
	border-radius: 5px;
	box-shadow: 1px 1px 1px black;
	background-color: var(--font-color);
	cursor: pointer;
	transition: background-color 250ms;
	display: block;
	text-align: center !important;
}
p.normal > a:hover
{
	color: black;
}
p.normal > a 
{
	font-size: 30px;
	color: var(--font-color-2)
}
@media (max-width: 900px)
{
	:root 
	{
		--max-width: 95%;
	}
	input[type=submit]
	{
		font-size: 25px;
	}
}