/* This kills built-in defaults to give me control.
 * This doesn't prevent margin collapsing. Does padding collapse too?
 * I forget.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	/*--clr-neon-link: rgb(81, 252, 9);*/
	/*--clr-neon-link: rgb(11,255,1);*/
	--clr-neon-link: rgb(57,255,20);
	/*--clr-neon-link: rgb(11,255,1);*/


}

/* I can put variables in here like this:
 * --fw-body: 800;
 * This is boldest font value, assuming the font uses this number.
 * If I use it in many places, I can just change this one value here
 * and not everywhere else. Cool!
 *
 * Then use it like this later:
 * font-weight: var(--fw-body);


} */

/* For debugging, in order not to alter sizes, use outline instead of border.
 * Then the true layout will show through.
 */


/* flex defaults:
 *
 * flex-grow: 0;
 * flex-shrink: 1;
 * flex-basis: auto;
 */

/* Super Important!
 * If you use flex shorthand as:
 * flex: 1;
 * it overides these above defaults to give you:
 * flex-grow: 1;
 * flex-shrink: 1;
 * flex-basis: 0%;
 * WTF!, so don't use shorthand, use flex: 1 0 auto;
 * to keep defaults ( or put in whatever you really want);
 */



body {
	/*	background-color:#3f1306; */
		background: linear-gradient(to bottom, #3f1306, #ed4e1e);
		font-family:verdana, arial, helvetica, sans-serif;
		margin:0px;
		padding:0px;
		font-size:100%;
		}
/* Fix for pre-defined user styles in browsers */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
 margin: 0 0 1em 0;   
}

/*h1 {
		text-align:center;
		color:#ffaa55;
		font-size:2.5em;
		padding-top:1em;
		}*/
header h1.page_title#home  {
		font-size:4.0em;
		text-align:center;
		padding-top:1em;
		color:yellow;
	}
/*h1 header .home {

		}
h1 header {
		text-align:center;
		font-size:4em;
		}*/
h2 {
		font-size:2.0em;
		}
h3 {
		font-size:1.7em;
		}
/*h2 .document_dark_back {
	position:relative;width:75%;margin:0 auto;background:#000000;color:#ffaa55;padding:15px;text-align:left;clear:left;}*/

	.hon {
		visibility: hidden;
	}
main {
		background-color:#3f1306;
		font-size:1.2em;
		}
input {
		width:90%;
		font-size:1.2em;
		}
textarea {
		width:90%;
		border-radius:5px;
		font-size:1.1em;
		}
p {
		color:#ffaa55;
		font-size:1.5em;
		}
p.document {
		text-align:left;
		font-size:1.5em;
		}
label {
		color:#ffc488;
		}
#skip a, #skip a:hover, #skip a:visited {
		position:absolute;
		left:0px;
		top:-500px;
		width:1px;
		height:1px;
		overflow:hidden;
		}
#skip a:active, #skip a:focus {
		position:static;
		width:auto;
		height:auto;
		}
#skip.links1 {
		border:0;
		}
#skip2 a, #skip2 a:hover, #skip2 a:visited {
		position:absolute;
		left:0px;
		top:-500px;
		width:1px;
		height:1px;
		overflow:hidden;
		}
#skip2 a:active, #skip2 a:focus {
		position:static;
		width:auto;
		height:auto;
		}
#skip2 {
		width:20%;
		}
h2 .home {
		color:#ffffff;
		/*color:#15bef2;*/
	}
/*.home {
		color:#ffaa55;
		/*color:#15bef2;
	}*/

.document_dark_back {
		position:relative;
		width:85%;
		margin:0 auto;
		background:#000000;
		color:#ffaa55;
		padding:15px;
		text-align:left;
		clear:left;
		}

.smash-icons {
	margin: 10px;
}

.small-note {
	font-size: 0.9em;
}	

.sticky_bottom {
		margin:0;
		position: sticky;
		bottom:0;
		background:#000000;
		font-size:1.6em;
		text-align:center;
		/*border:6px;
		border-style:double;
		border-color:#ffffff;*/
		padding-top: 19px;
		padding-bottom: 39px;
		}
.float_left {
		float:left;
		margin-left:10px;
		margin-right:10px;
		}
.float_right {
		float:right;
		margin-left:10px;
		margin-right:10px;
		}
.float_left_up {
		float:left;
		margin-left:10px;
		margin-right:10px;
		margin-bottom:15px;
		}
.float_right_up {
		float:right;
		margin-left:10px;
		margin-right:10px;
		margin-bottom:15px;
		}

.centered {
		position:absolute;
		left:50%;
		transform:translate(-50%);
		}

.homelinks3 {
	font-size: 1.5rem;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	color: var(--clr-neon-link);
	border: var(--clr-neon-link) 0.125em solid;
	padding: 0.25em 1em;
	border-radius: 0.25em;
	text-shadow: 0 0 0.125em var(--clr-neon-link),
	0 0 0.45em var(--clr-neon-link);
	box-shadow: inset 0 0 0.5em var(--clr-neon-link),
		0 0 0.5em var(--clr-neon-link);
	position: relative;
	transition: background-color 100ms linear;
	

}

.homelinks3::before {
	pointer-events: none;
	content: "";
	position: absolute;
	background: var(--clr-neon-link);
	top: 115%;
	left: 0;
	width: 100%;
	height: 100%;

	transform: perspective(0.8em) rotateX(40deg)
		scale(1, 0.35);
	filter: blur(1em);
	opacity: 0.7;


}

.homelinks3::after {
	content: "";
	position: absolute;
	top 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 0 2em 0.5em var(--clr-neon-link);
	opacity: 0;
	transition: opacity 100ms linear;
}

.homelinks3:hover,
.homelinks3:focus {
	background: var(--clr-neon-link);
	color: #000000;
	text-shadow: none;
}

.homelinks3:hover::before,
.homelinks3:focus::before {
	opacity: 1;
}


.homelinks3:hover::after,
.homelinks3:focus::after {
	opacity: 1;
}

/*a.homelinks3 a:link {color:yellow;text-decoration:none;font-weight:bold;text-align:center;}
a.homelinks3 a:visited {color:green;text-decoration:none;font-weight:bold;text-align:center;}
a.homelinks3 a:focus {color:red;text-decoration:underline;font-weight:bold;}
a.homelinks3 a:hover {color:red;text-decoration:underline;font-weight:bold;}
*/

table {
		width:90%;
		font-size:1.3em;
		}
li {
		font-size:1.0em;
		}
#submitForm {
		width:30%;
		text-align:center;
		}
#resetForm {
		width:30%;
		text-align:center;
		}
@media screen and (max-width: 640px) {
   #intro1, #introb, #preamble1, .sidebar1, #sidebar2 { 
    float: none;
    width: 90%;
		margin: 10px;
  }
	.right_to_blog {
		float: none;
                width: 85%;
		margin: 10px;
  }
  #form1 {
		float: none;
                width: 85%;
		margin: 10px;
		font-size: 1.0em;

	}
	  #update1 {
		float: none;
                width: 85%;
		margin: 10px;
		font-size: 1.0em;

	}

/*	#M_Comments {
		font-size: 1.5rem;
	}*/
	}
/*
a:link {
		color:#ffff00;
		font-weight:bold;
		}
a:visited {
		color:#ffff00;
		font-weight:bold;
		}
a:hover {
		color:red;
		text-decoration:underline;
		font-weight:bold;
		}
a:focus {
		color:red;
		text-decoration:underline;
		font-weight:bold;
		}
a:active {
		color:green;
		font-weight:bold;
		}
*/