@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap'); /* I could have just used it locally */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');
/* CSS Document */
/* AGONY code//SIPLA */

:root { /*we love using var */
	--bgc: #1d1d1d;
	--bgf: rgba(29, 29, 29, 0.65);
	--bgw: #2d2d2d;
	--textc: #d2d2d2;
	--accent1: #ff6f61;
	--accent1t: #ff6e6141;
	--headerC: #00ffed;
	--headerA: #4d4d4d;
	--headerAf: rgba(77, 77, 77, 0.65);
	--void: #000;
	--navi: #a6ddd9;
	--string: #fff577;
}
::selection {
  background-color: var(--accent1); 
  color: var(--void);
}
/* --------------------------------------------*/
body {
	animation: fadeIn 0.5s ease-in; /* you are welcome. */
	background-color: var(--bgc);
	font-size: 15px;
	margin: 0;
	color: var(--textc);
	padding-left: 100px;
	padding-right: 100px;
	font-family: 'IBM Plex Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 3px;
}

a { /*I see no point in doing visted, link, focus on these. Active should be for navigation, to show you are HERE. */
	color: var(--navi);
	text-decoration: none;
	font-weight: 700;
}
a:hover { 
	color: var(--accent1);
}

#wrapper {
	max-width: 1280px;
	margin: 0 auto;
	background-color: var(--bgw); 
}

header {
		background-color: var(--headerAf); /* translucent dark */
  		border: var(--bgw) solid 1em;
  		backdrop-filter: blur(10px);
  			-webkit-backdrop-filter: blur(10px);
  		box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
	min-height: 200px;
	font-size: 35px;
	margin: 0 auto;
	padding: 1em;
	text-align: center;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}

header img {
	height: 10vh; /*sure why not, I can always change this */
	max-height: 200px;
}

main {
	padding: 1em;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	width: 100%;
	min-height: 600px;
		background-color: var(--bgf); /* translucent dark */
  		border: var(--bgw) solid 1em;
  		backdrop-filter: blur(10px);
  			-webkit-backdrop-filter: blur(10px);
  		box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.main_with_aside {
	width: 75%;
	padding: 1em;
	float: left;
}
aside {
	padding: 1em;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	width: 23.5%;
	float: right;
	min-height: 250px;
	/* frost that thing */
		background-color: var(--bgf); /* translucent dark */
  		border: var(--bgw) solid 1em;
  		backdrop-filter: blur(10px);
  			-webkit-backdrop-filter: blur(10px);
  		box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
aside a {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 1em;
}

/* Aside on the full width pages I guess.--------------------------------------------*/
.asidemax {
	background-color: var(--bgf); /* translucent dark */
	border: var(--bgw) solid 1em; 
	padding: .2em;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	clear: both;
	margin-top: 2em;
	width: 100%;
	min-height: 200px;
	text-align: center;
}
.asidemax form {
	padding-top: 0em;	
}
.asidemax #Submit.button {
	width: 150px;
	margin-right: 1em;
	margin-left: 1em;
}
.asidemax .inputs {
	width: 80%;
	margin-right: 1em;
	margin-left: 1em;
}
/* --------------------------------------------*/
footer { 
	background-color: var(--bgf); /* translucent dark */
	border: var(--bgw) solid 1em; 
	padding: 1em;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	clear: both;
	margin-top: 2em;
}

/* Table --- ---------- */
.mobile-table {
    display: none;
}
table {
	width: 100%;
  	border: var(--bgf) solid 1em;
  		box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
	border-collapse: separate;
	border-spacing: 1em;
	background-color: var(--headerAf);
}

table caption {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 2em;
	padding: 1em;
}

th {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	text-align: center;
	letter-spacing: 3px;
	font-size: 1.5em;
	color: var(--string);
	padding: .5em;
	background-color: var(--bgc);
}

tr{
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 300;
	text-align: center;
	letter-spacing: 3px;
	font-size: 1em;
	color: var(--textc);
	padding: .5em;
	line-height: 1.5em;
}

td {
	vertical-align: top;
	background-color: var(--bgw);
}
/* active table elements for focusing*/
td:hover {
	background-color: var(--string);
	color: var(--void);
	font-weight: 700;
}
/* Contact form -------------- */
.form-header {
	text-align: center;
	border-bottom: 3px double var(--accent1t);
	padding-bottom: 1rem;
}
form {
	padding-top: 2.5rem;
}
.inputs:focus { 
	outline: none;
	box-shadow: 0 0 0 2px var(--accent1);
}
#Submit.button:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--accent1);
}

label {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	text-align: left;
	width: 25%;
	float: left;
	color: var(--string);	
}

.inputs {
	width: 70%;
	padding: .5em;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	background-color: var(--headerA);
	color: var(--textc);
	border: 0px;
}

/* Images --- ---------- */
.imagesection { 
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.imagesection img {
	width: 25vw;
	max-width: 300px;
	border-radius: 20em;
}
.imgA {
	width: 120px;
	border-radius: 20em;
	float: left;
	margin-right: 10px;
}
.imgB {
	width: 120px;
	border-radius: 20em;
	float: right;
	margin-left: 10px;
}
/*--------------------------------------------*/
/*NAV is subject to revesion */
/*reserve space to fix the shake glitch. */
.main-nav {
 	background-color: var(--accent1);
	padding: 1em;
	text-align: center;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}

.main-nav ul {
	margin: 0;
	padding: 0;
}

.main-nav li {
	display: inline;
	margin-right: 3.5em;
	margin-left: 3.5em;
}

.main-nav li:last-child {
	margin-right: 0;
}


.main-nav a {
	color: var(--void);
	background-color: var(--accent1);
	padding: .5em;
	text-decoration: none;
	border: 1px solid transparent; /* reserve space */
	box-sizing: border-box;
}

.main-nav a:hover {
 	background-color: var(--navi);   
	border-radius: 3em;
    border: var(--navi) solid 1px;
	color: var(--void);
}
.NAVIlabel {
	color: var(--void);
	display: none;
	text-align: center;
	text-decoration: none;
	border-bottom: none;
	height: 40px;
}
nav input[type=checkbox] { 
	display: none;
}
nav input[type=checkbox]:checked~#nav-menu {
	display: block;
}

/*--------------------------------------------*/
footer h3 {
	text-align: center;
}
.footer-nav {
 	background-color: var(--bgw);
	padding: 2em;
	text-align: center;
	box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}
.footer-nav li {
	display: inline;
	margin-right: 3.5em;
	margin-left: 3.5em;
}
.footer-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .5em;
	background-color: var(--bgw);
	color: var(--navi);
}
.footer-nav a:hover {
	color: var(--accent1);
}

/*Buttons--------------------------------------------*/
.button:link, .button:visited, .button:active {
	background-color: var(--navi);
	color: var(--void);
	padding: .5em;
	margin-top: 2em;
	border-radius: 1em;
	display: inline-block; /*duh */
	text-align: center;
		width: -webkit-fill-available; /* I realize this is less then ideal, I also realize that this is solving issues with 100% width. Tired boss. */
	max-width: 300px;
	font-weight: 700;
}
main .button { /*what an actual pain */
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 1em;
	margin: 2em auto 0 auto;
	display: flex !important;
	justify-content: center !important;
}

#Submit.button {
	background-color: var(--navi);
	color: var(--void);
	padding: .5em;
	margin-top: 2em;
	border-radius: 1em;
	width: 300px;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	text-transform: uppercase;	
}
#Submit.button:hover, #Submit.button:focus {
	background-color: var(--accent1);
	color: var(--void);
}

.button:hover, .button:focus {
	background-color: var(--accent1);
	color: var(--void);
}
/*animations imported from a project of mine--------------------------------------------*/
@keyframes fadeIn {
    from { opacity: 0 }
    to   { opacity: 1 }
}
/* Custom styles and MASS fixes I guess */
.clearfix {
	clear: both;
}
.content-columns {
	column-count: 3;
		-webkit-column-count: 3;
		-moz-column-count: 3;
	column-gap: 1.5em;
		-webkit-column-gap: 1.5em;
		-moz-column-gap: 1.5em;
}
.spacer { /* break tags are stupid and add a selectable empty line that can be highlighted, this is better */
    padding: 1em;
}
.SMOLspacer { /* break tags are stupid and add a selectable empty line that can be highlighted, this is better */
    padding: .3em;
}
.BIGspacer { /* BIG MAN COMING THROUGH, make way, HEAVY LOAD */
    padding: 5em;
}

/*Mobile Nigtmare Fixes --------------------------------------------*/
/* Adding a ton of this stuff from the rip honestly, so far it seems to work really well with a 1000px start point
and additonal flags at 750px */
@media screen and (max-width : 1000px ){
body {
	padding-left: 1rem;
	padding-right: 1rem;
}
.content-columns {
	column-count: 2;
		-webkit-column-count: 2;
		-moz-column-count: 2;
	column-gap: 2em;
		-webkit-column-gap: 2em;
		-moz-column-gap: 2em;
	}
main {
	padding: 1em;
	width: 100%;
	min-height: 600px;
}
.imagesection img {
	width: 25vw;
	border-radius: 100%;
}
.main_with_aside {
	width: 100%;
	padding: 1em;
	float: both;
}
aside {
	width: 100%;
	clear: both;
	margin-top: 1rem;
	margin-botom: 1rem;
}
a.button {
	display: flex !important;
	justify-content: center !important;
	margin: 2em auto 0 auto;
}
}
@media screen and (max-width: 750px) {
body {
	padding-left: 0rem;
	padding-right: 0rem;
}
#wrapper {
	overflow: hidden; /* 10000% not ideal frankly, ideally phase this out */
	}
.content-columns {
	column-count: 1;
		-webkit-column-count: 1;
		-moz-column-count: 1;
	column-gap: 0em;
		-webkit-column-gap: 0em;
		-moz-column-gap: 0em;
	}
.main-nav li {
	margin-right: .5rem;
	margin-left: .5rem;
}
.main-nav a:hover { /*might change later, dunno yet */
 	background-color: var(--navi);   
	border-radius: 3em;
    border: var(--navi) solid 1px;
	color: var(--void);
}
label {
	font-weight: 700;
	text-align: left;
	width: 100%;
	clear: both;
}	
.inputs {
	width: 100%;
}
/*mobile table nightmare-----*/	
table {
    display: none;
}

.mobile-table {
    display: block;
}

.mobile-row {
    background-color: var(--bgw);
    padding: 1em;
    margin-bottom: 1em;
    border-radius: .5em;
}

.mobile-title {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--string);
    font-weight: 700;
	font-size: 1.2em;
}

.mobile-value {
    padding: .5em;
	font-size: 1em;
	font-weight: 500;
}
/*-----*/	
.main-nav a {
	padding: 5px;
	}
.main-nav {
	padding: 2em;
	}
.main-nav ul {
	padding: 0;
	}	
.main-nav li {
	display: block;
	margin-right: 0;
	margin-left: 0;
	margin: 0 auto;
	padding: .5em;
	}	
#nav-menu {
	display: none;
}

nav input[type=checkbox]:checked ~ #nav-menu {
	display: block;
}
.NAVIlabel {
	display: block;
}
}
@media screen and (max-width: 370px) { /*abyss phones */
body {
	font-size: 12px;
	padding-left: 0px;
	padding-right: 0px;
	}

h1, h2, h3, h4, h5, h6 { 
	letter-spacing: 1px;
	}
h3 { 
	font-size: 35px;
	}
#Submit.button {
	padding: .5em;
  	margin-top: 1em;
 	width: 200px;
 	font-weight: 500;
	}
}