/*Define fonts*/
@font-face{
	font-family: 'league_regular';
	src: url('fonts/LeagueSpartan-Regular.woff2') format('woff2');
}

/*Define Custom Colour Scheme. Comments are inital colours*/
:root{
  --scheme_c1: #F00000; /* Red for links */
  --scheme_c2: #AA0000; /* Darker red for mouse over links */
  --scheme_c3: #2E2E2E; /* Main page background grey */
  --scheme_c4: #353535; /* Header lighter background grey */ 
  --scheme_c5: #FFFFFF; /* White for text */ 
  --scheme_c6: #C9C9C9; /* Darker white for text */ 
  --scheme_c7: #FF8989; /* Desaturated red for highlights */ 

	/* Flag for most browsers to set dark mode on page elements */ 
  color-scheme: dark;

}



/*Main Styles*/

/*Top level main page settings*/
html{
	font-family: 'league_regular';
	font-size: 14pt;
	color: var(--scheme_c5);
	text-align: center;
	
}

body{
	background-color: var(--scheme_c3);
	margin: 0px;
	background-image: url("bg_tiling_texture.png");
}


/*Needed to reduce dead-space between top of page*/
#header_title{
	margin: 0px;
}

header{
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	background-color: var(--scheme_c4);
}

.header_links{
	font-size: 20px;
	padding: 11px 11px 11px 11px;
}

.para40{
	width: 40%;
	margin: auto;
}

.code_highlight{
	color: var(--scheme_c7);
	background-color: var(--scheme_c4);
}

/*Used for underlined text*/
.sub-header {
	text-decoration: underline;
}

/*Used for alternative header style*/
.sub-header_alt {
	text-decoration: underline;
	color: var(--scheme_c2);
	margin-top: 40px;
}

ul {
    text-align: left;
    list-style-position: inside;
	color: var(--scheme_c6);
	margin: 8px;
	
	display: flex;
	flex-direction: column;
	gap: 10px;
	
}

footer {
	background-color: var(--scheme_c4);
    height: 30px;
	position:relative;
	margin-top: 20px;
	width:100%;
	padding-top: 20px;
}

textarea {
    resize: vertical;
	background-coloR: #2E2E2E;
	color: #afafaf;
	font-size: 18px;
	margin-bottom: 10px;
}

select{
	overflow-y: auto;
	display: inline-block;
	background-color: #212121;
	margin: 0px;
	font-family: sans-serif;
	font-size: 20px;
	color: #FFFFFF;
}



/*Special formatting layout classes*/
.column {
	overflow-y: auto;
	display: inline-block;
	overflow-wrap: break-word;
	inline-size: 40%;
}

.grid_row{
  display: inline-flex;
  margin-right: 10px;
  width: auto;
}

/*Used to fix footer to bottom of page, not sticky, with a minimum height*/
.body_content {
    min-height: calc(100vh - 70px);
}

/*Flexbox centered with column wrapping*/
.flex_col {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
}






/*Link styles:*/
/*Unvisited*/
a:link {
  color: var(--scheme_c1);
}

/*Visited*/
a:visited {
  color: var(--scheme_c1);
}

/*Mouse Over*/
a:hover {
  color: var(--scheme_c2);
}

/*Selected*/
a:active {
  color: var(--scheme_c1);
}