@import url('https://fonts.googleapis.com/css2?family=Teko:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

html,body
{
	height: 100%;
}
main
{
	position: relative; 
	min-height: 100%;
}

body
{
	margin: 0px; 
	padding: 0px; 
	position: relative;
	min-height: 100%;
	background-color: #CCC;
	font-family: 'Noto Sans', sans-serif;
	background-image: url("/theme/steel.jpg");
	background-image: url("/theme/4hgiRFC-black-metal-background.jpg");
	background-image: url("/theme/steel-wallpaper.jpg");
}

section
{
	background-color: rgba(255,255,255,0.3);
	width: 1170px;
	margin: auto;
	padding: 50px;
	padding-bottom: 120px;
}

header
{
	color: white; 
	width: 100%;
	background-color: rgba(0,0,0,0.7);
	font-family: 'Teko', sans-serif;
	font-weight: 600;
	box-shadow: 0px 30px 30px 5% black;
	position: relative;
}

.contentheading
{
	font-size: 24pt;
	font-weight: bold; 
}

header h1
{
	margin: 0;
	padding-left: 5px;
}

header h1 a
{
	text-decoration: none; 
	color: white; 
	font-size: 48pt;
}

.code-display
{
	font-family: 'Teko', sans-serif;
	font-size: 42pt;
	font-weight: 600;
	text-align: center; 
}
.code-info
{
	font-family: 'Teko', sans-serif;
	text-align: center; 
	font-size: 14pt;
}
.code-info-invalid
{
	color: red; 
	font-size: 14pt;
}
.code-info-memo
{
	font-size: 14pt;
	font-style: italic; 

}
.evidence-display
{
	border: 2px solid black;
}
.evidence-heading
{
	font-family: 'Teko', sans-serif;
	font-size: 16pt; 
}
.subhead
{
	margin-left: 20px; 
	padding-left: 20px; 
	font-size: 14pt;
}

.navbar
{
	text-align: right;
	font-size: 20pt; 
	color: white;
	position: absolute;
	top: 8px;
	right: 0;
}

.navbar a
{
	display: block;
    color: white;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
}

.navbar ul
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	min-height: 40px;
}

.navbar li
{
	float: left;
}

.navbar li a:hover 
{
    background-color: rgba(0,0,0,0.5);
	border: 1px solid rgb(202, 255, 0);
}

.descriptionbox, p
{
	margin: 0;
	font-size: 12pt;
	margin-bottom: 10px;

}

/*
.modulebox
{
	margin: 10px; 
	padding: 10px; 
}
*/

nav.main
{
	clear:both;
	margin: auto;
	display: block;
	text-align: center;
	padding: 30px 50px;
}
nav.main:after, .clearfix
{
	display: block;
	content: ' ';
	clear: both;
}
nav.main a
{
	/* width: 200px;
	height: 200px; */
	padding: 70px 30px;
	max-width: 200px;
	border: 1px solid white;
	background: url("/theme/steel.jpg");
	box-shadow: 0px 0px 20px -1px rgba(64,64,64,0.65);
	display: inline-block;
	/* line-height: 200px; */
	text-align: center;
	text-decoration: none;
	color: white;
	margin: 12px;
	transition: all 1s;
	font-weight: bold;
	font-size: 1.8rem;
}
nav.main a:hover
{
	border-color: red;
	color: white;
	background-color: #ffe6e6;
	background: linear-gradient(to right, rgba(255,128,128, 0.3), rgba(255,128,128, 0.3)), url("/theme/steel.jpg");
	box-shadow: 0px 0px 40px -1px rgba(255,148,148,0.55);
}

.subform select
{
	text-align-last:center;
	font-weight: bold; 
}

.formlabel
{
	font-weight: bold; 
	width: 100%;
	margin-top: 10px;
}
.formlabel:first-child
{
	margin-top: 0;
}

input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], textarea
{
  -webkit-appearance: none; -moz-appearance: none;
  display: block;
  margin: 0;
  width: 100%;
  font-size: 18px;
  border: 1px solid #bbb;
  transition: 1s border height;
  padding: 5px;
  padding-left: 10px;
  color: #666;
}
textarea
{
	padding-left: 0;
	height: 50px;
}


input[type="text"]:hover, input[type="text"]:focus,
input[type="url"]:hover, input[type="url"]:focus,
input[type="password"]:hover, input[type="password"]:focus,
input[type="number"]:hover, input[type="number"]:focus,
textarea:hover, textarea:active
{
	border: 1px solid #fbb;
	color: #000;
}

textarea:focus
{
	height: 8rem;
}

select
{
  /* -webkit-appearance: none; -moz-appearance: none; */
  display: block;
  margin: 0;
  width: 100%; height: 40px;
  line-height: 40px; font-size: 17px;
  border: 1px solid #bbb;
}


.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #000 transparent transparent transparent;
}

button[type=submit], input[type=submit]
{
 -webkit-appearance: none; -moz-appearance: none;
 display: block;
 margin: 1.5em 0;
 font-size: 1em; line-height: 2.5em;
 color: #333;
 font-weight: bold;
 height: 2.5em; width: 100%;
 background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
 border: 1px solid #bbb;
 -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
 transition: 3s all;
}

input[type="submit"]:hover,input[type="submit"]:active
{
	background: linear-gradient(to right, rgba(255,128,128, 0.3), rgba(255,128,128, 0.3)), linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);;
}


.btnSubmit
{
 -webkit-appearance: none; -moz-appearance: none;
 display: block;
 margin: 1.5em 0;
 font-size: 1em; line-height: 2.5em;
 color: #333;
 font-weight: bold;
 height: 2.5em; width: 100%;
 background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
 border: 1px solid #bbb;
 -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
 transition: 3s all;
}

.btnSubmit:hover,.btnSubmit:active
{
	background: linear-gradient(to right, rgba(255,128,128, 0.3), rgba(255,128,128, 0.3)), linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);;
}

.content
{
	max-width: 980px; 
	padding: 10px 15px; 
	margin: auto;
	background-color: white; 

}

.bodytext
{
	margin-left: 20px;
	max-width: 980px; 
}

.bodytext h2
{
	margin-bottom: 5px;
}

.instructions
{
	font-size: 10pt;
	max-width: 980px;
}

.footer
{
  margin-top: 25px;
  /* background-color: #000;
  background-image: url("/theme/steel.jpg"); */
  background-color: rgba(0,0,0,0.6);
  text-align: center;
  color: #fff;
  font-size: 10pt;
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  
}

.footer a
{
	color: white; 
}

.content.homepage p img
{
	float: left;
	margin-right: 5px;
	width: 200px;
}

section h1
{
	font-family: 'Teko', sans-serif;
	font-weight: 600;
	font-size: 32pt;
	margin-top: 0;
	margin-bottom: 10px;
	line-height: 32pt;
}

.player-form-container
{
	margin-bottom: 8px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: stretch;
}

.player-form-container div.subform
{
	/* width: 400px; */
	flex: 1 1 calc(50% - 60px);
	min-width: 250px;
	padding: 25px;
	padding-top: 10px;
	border: 1px solid #DDD;
	border-radius: 10px;
}

.menuToggler {
	display: none;
	color: white;
	font-size: 24pt;
	position: absolute;
	top: 15px;
	right: 15px;
	text-decoration: none;
}

@media (max-width: 1024px)
{
	section
	{
		width: 95%;
		padding: 20px;
		padding-bottom: 40px;
	}
	nav.main
	{
		padding: 25px;
	}
}

@media (max-width: 812px)
{
	section
	{
		width: 95%;
		padding: 20px;
		padding-bottom: 40px;
	}
	header div.navbar {
		position: initial;
		margin-top: -25px;
		overflow:hidden;
	}
}
@media (max-width: 400px)
{
	header
	{
		font-size: 48pt;
	}

	section
	{
		width: 100%;
		padding: 0px;
		padding-bottom: 40px;
	}
	
	.content
	{
		margin: 3px;
		padding: 5px 10px;
	}
	
	section h1
	{
		font-size: 26pt;
		line-height: 28pt;
		text-align: center;
	}
	.player-form-container div.subform
	{
		padding: 5px;
		margin-bottom: 5px;
	}
	
	nav.main
	{
		padding: 10px;
	}
	
	.content.homepage p img
	{
		float: initial;
		display: block;
		margin: auto;
		width: 98%;
		margin-bottom: 5px;
	}
	
	header div.navbar
	{
		font-size: 16pt;
		margin-top: -10px;
		display: none;
		background:rgba(32,32,32,0.5);
	}
	header div.navbar.visible
	{
		display: block;
	}
	
	.menuToggler
	{
		display: block;
	}
	
	header div.navbar li
	{
		float: none;
	}
	header div.navbar a
	{
		text-align: left;
		padding: 4px;
	}
}