/* 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-h1: rgb(255,255,255);
  --clr-h1-page-title: yellow;
  --clr-h2-title: red;
  --clr-h3-title: #67efbf;
  --clr-p-dark-back: #67efbf;
  --clr-p-light-back: rgb(0,0,0);
  --clr-dark-back: #67efbf;
  --clr-light-back: rgb(0,0,0);
  --clr-title: #67efbf;
  --clr-title-page: red;
  --clr-neon-link: rgb(57,255,20);
  
  /*--clr-neon-link: rgb(11,255,1);*/
  /*--clr-neon-link: rgb(81, 252, 9);*/
  /*--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: 0;
  padding: 0;
  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            H1         */

h1 {
  color: var(--clr-h1); /* rgb(255,255,255); */
}

/*h1 {
  text-align:center;
  color:#ffaa55;
  color: green;
  font-size:2.5em;
  padding-top:1em;
}*/

/*header h1 .page-title  {
  font-size:4.0em;
  text-align:center;
  padding-top:1em;
  color: var(--clr-h1-page-title);
  color: green;
}*/

h1.page-title {
  font-size: 2.5em;
  text-align: center;
  padding-top: 1em;
  margin-bottom: 0.3em;
  margin-top: 0.5em;
  color: var(--clr-h1-page-title);
}
/*                                                 */

.title-page {
  font-size: 1.3rem;
  text-align: center;
  padding-top: 0.7em;
  color: var(--clr-title-page);
}

/*                   H2    H2        */

h2 {
  font-size: 1.7em;
  text-align: center;
  color: red;
}
h2.title {
  font-size: 1.7em;
  text-align: center;
  color: var(--clr-h2-title);
}

.title {
  text-align: center;
  color: var(--clr-title);
}

h3 {
  font-size: 1.4em;
  text-align: left;
}

h3 .title {
  text-align: center;
  color: var(--clr-h3-title);
}

p.dark-back {
  text-align: left;
  color: var(--clr-p-dark-back);
}

.dark-back {
  color: var(--clr-dark-back);
}

/*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%);
}



/* Maybe put this area in a grid and use repeat(auto-fill) or something like that to
 * make this deal with small widths??
 * or watch video again and see how to get rid of the color splash outside of the items
 * so that they can stack?? Whatever. {8-)}}
 */

.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;
}
*/