/* Color Scheme
Background: #263238 (Primary Dark)
Text: #F5F5F5 (Light Contrast)
*/

@import url('https://fonts.googleapis.com/css?family=Arizonia|Lato|Raleway');

body {
	background-color:#263238;
	color:#F5F5F5;
	font-family: 'Lato', sans-serif;
	font-size:14pt;
  text-align:left;
  margin-top:20px;
}

h1 {
	font-family:'Raleway', sans-serif;
	text-align:center;
	color:#F5F5F5;
	font-size:36pt;
}
h2 {
	margin-left:12%;
	color:#F5F5F5;
	font-size:20pt;
}
h3 {
	color:#F5F5F5;
	font-size:16pt;
	text-align:center;
}
hr {
	width:50%;
}

p {
	margin-left:12%;
	margin-right:12%;
}

ul {
	margin-left:12%;
	margin-right:12%;
}

/* Table Style */
/* CSS credit goes to dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l */
/*
.table-style {
	border-collapse: collapse;
	margin: 10px 0;
	font-size: 12pt;
	font-family: 'Lato', sans-serif;
	min-width: 500px;
	box-shadow: 0 0 15px rgba(0,0,0,0.10);
	margin-left:12%;
	margin-right:12%;
}

.table-style thead tr {
	text-align: left;
	background-color: #263238;
	color: #F5F5F5;
}

.table-style th {
	font-weight: bold;
	padding: 10px 10px;
}

.table-style td {
	padding: 5px 10px 5px 10px;
}

.table-style tbody tr {
	border-bottom: 1px solid #263238;
}

.table-style tbody tr.even-row {
	color: #F5F5F5;
	background-color: #263238;
}

.table-style tbody tr.odd-row {
	color: #F5F5F5;
	background-color: #263238;
}

.table-style tbody tr:last-of-type {
	border-bottom: 2px solid #263238;
}
*/
/* End Table Style */

.flex {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	color:#F5F5F5;
	font-size:12pt;
	font-weight:bold;
}

.wip {
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-content:center;
	align-items:flex-end;
	font-family:'Raleway', sans-serif;
	color:#F5F5F5;
	font-size:12pt;
	font-weight:bold;
}

.newimg {
  display: block;
  width: 25%;
  height: auto;
  margin-bottom:0;
  margin-left:auto;
  margin-right:auto;
}

.headtop {
	font-family:'Raleway', sans-serif;
	font-size:20pt;
	color:#F5F5F5;
	text-align:center;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
	margin-top:15px;
	font-variant:small-caps;
}

.headtop-sm {
	font-family:'Raleway', sans-serif;
	font-size:14pt;
	color:#F5F5F5;
	text-align:center;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
	margin-top:15px;
	font-variant:small-caps;
}

.headline {
	font-family:'Arizonia', 'Brush Script MT', cursive;
	font-size:48pt;
	font-weight:bold;
	text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
	color:#F5F5F5;
	text-align:center;
	margin-top:3px;
}

.subhead {
	font-family:'Arizonia', 'Brush Script MT', cursive;
	font-size:24pt;
	font-weight:bold;
	text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
	color:#F5F5F5;
	text-align:center;
	margin-top:3px;
}

.WIP-subhead {
	font-family:'Arizonia', 'Brush Script MT', cursive;
	font-size:24pt;
	font-weight:bold;
	text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
	color:#F5F5F5;
	text-align:center;
	margin-top:3px;
	margin-left:12%;
	margin-right:12%;
}

section a:link {
	color:#673AB7;
	/*color:#146DA9;*/
	text-decoration:none;
}
section a:visited {
	color:#32328A;
	/*color:#076A5D;*/
	text-decoration:none;
}
section a:hover {
/*  background-color:#673AB7; */
  color:#673AB7;
	/*background-color:#DCDAE9;*/
	text-decoration:underline;
}
section a:active {
	color:#CFD8DC;
	/*color:#1D9FF6;*/
	text-decoration:underline;
}

/* table fontawesome link colors */
/* Color Scheme Table Links
Color 1: #E9E7DA
Color 2: #636B46
Color 3: #373F27
Color 4: #CDA34F
Color 5: #B44C1B
Color 6: #A27B2E
*/
/*
.odd a:link {
	color:#E9E7DA;
	text-decoration:none;
}
.odd a:visited {
	color:#CDA34F;
	text-decoration:none;
}
.odd a:hover {
  color:#B44C1B;
	text-decoration:underline;
}
.odd a:active {
	color:#E9E7DA;
	text-decoration:underline;
}

.even a:link {
	color:#373F27;
	text-decoration:none;
}
.even a:visited {
	color:#A27B2E;
	text-decoration:none;
}
.even a:hover {
  color:#B44C1B;
	text-decoration:underline;
}
.even a:active {
	color:#373F27;
	text-decoration:underline;
}
*/
/* WIP Display */
.block {
	display:inline-block;
}
.block p {
	margin-right:2%;
}
.rndimg {
  border-radius: 10px 10px;
  max-width:150px;
  height:auto;
  float:left;
  visibility:visible;
  box-shadow:2px 2px 5px 1px #212121;
  margin-right:1%;
}
.rndimg2 {
  border-radius: 10px 10px;
  max-width:0%;
  float:center;
  visibility:collapse;
}

.rndimgindex {
  border-radius: 10px 10px;
  max-width:150px;
  height:auto;
  display:block;
  margin-left:auto;
  margin-right:auto;
  visibility:visible;
  box-shadow:2px 2px 5px 1px #212121;
}
.rndimg2index {
  border-radius: 10px 10px;
  max-width:0%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  visibility:collapse;
}

.break {
	display:block;
	clear:left;
}

/* flexbox customizations */
div.flex span {
	padding:5%;
}
div.flex h3 {
	padding:-5%;
}
div.flex p {
	margin-left:8%;
	font-size:12pt;
}
div.flex ul li {
	font-size:10pt;
	color:#262228;
	font-family: 'Raleway', sans-serif;
}

.icon-bar i {
	font-size:36px;
	padding-left:5px;
	padding-right:5px;
}
.icon-bar {
	width:55px;
	background-color:#263238;
}
.icon-bar a {
	display: block;
	text-align: center; 
	padding:5px; 
	transition: all 0.3s ease; 
	color:#0B3C5D;
}
.icon-bar a:hover {
	background-color:#263238;
	color:#F5F5F5;
}
.cFlex {
	display:flex;
	flex-flow: row nowrap;
}

/* for smaller side notes */
.tiny {
	font-size:8pt;
}
.sm {
	font-size:10pt;
}

/* Progress Bar */
progress {
	background:rgba(0, 0, 0, .25);
	border:1;
	height:15px;
	border-radius:10px;
	color:#636B46;
}
progress::-moz-progress-bar {
	background:#636B46;
	border:1;
	height:15px;
	border-radius:10px;
	color:#636B46;
}

/* Detail Summary Box */
/* credit: sitepoint.com/style-html-details-element */
details {
  /* display:inline-block; */
  cursor: pointer;
  border-radius: 5px;
}

summary {
  list-style: none;
  display: inline-flex;
  align-items: left;
  padding: 10px;
  font-weight: bold;
}

summary::after {
  content: '';
  width: 0; 
  height: 0; 
  border-top: 10px solid #262228;
  border-inline: 7px solid transparent;
  transition: 0.2s;
}

details[open] > summary {
	border-bottom: 2px solid #262228;
}

details[open] > summary::after {
  transform: rotate(-180deg);
}

summary::-webkit-details-marker {
  display: none;
}

summary {
  background-color: #262228;
  color: #F5F5F5;
  border-radius: 5px;
}

details[open] summary {border-radius: 5px 5px 0 0;}

details p {
	text-align:left;
	font-size:12pt;
}

/* extra styles */

* {box-sizing: border-box;}
body {font-family: system-ui, sans-serif; margin: 20px; background: #262228;}
h1 {font-size: 1.2em;}
article > *:first-child {margin: 0;}
article > * + * {margin: 0.75em 0 0 0;}
pre {color: white; background: #262228; padding: 1em; border-radius: 5px;}
article {padding: 10px; margin: 0; background: #262228; border-radius: 0 5px 5px 5px}
details code {font-size: 1.1em;}
/* End Details Summary */


/* RESPONSIVENESS SETTINGS */

.row {
  content: "";
  clear: both;
  display: inline-table;
}

* {
  box-sizing: border-box;
}

/* mobile */
[class*="col-"] {
  width: 100%;
  float:left;
  padding:15px;
}
@media only screen and (max-width: 320px) {
	body {
		font-size:10pt;
	}
	p {
		margin-left:2%;
		margin-right:2%;
	}
	h2 {
		margin-left:2%;
	}
}

/* tablets */
@media only screen and (min-width: 600px) {
  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 50px) and (max-width: 768px) {
	body {
		background-color:#263238;
	  font-size:12pt;
	}
	p {
		margin-left:10%;
		margin-right:10%;
	}
	h2 {
		margin-left:10%;
	}
	/* WIP Display */
	.block p {
		padding-left:2%;
		padding-right:2%;
	}
	.rndimg {
		max-width:0%;
		visibility:hidden;
	}
	.rndimg2 {
	  border-radius: 10px 10px;
	  max-width:150px;
	  height:auto;
	  margin-left:10%;
	  margin-right:auto;	
		visibility:visible;
		box-shadow:2px 2px 5px 1px #212121;
	}
	.break {
		clear:left;
	}
}

/* laptops and small desktop monitors */
@media only screen and (min-width: 769px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
	body {
	  max-width:1366px;
	  background-color:#263238;
	}
}

/* For larger desktop monitors: */
@media only screen and (min-width: 1369px) {
	body {
		max-width:1920px;
	  background-color:#263238;
	}
}

/*
button {
	font-size:18px;
	background-color:#373F27;
	color:#E9E7DA;
}
*/

/*
img {
	box-shadow:2px 2px 5px 1px #2E2300;
}
*/