/*CSS styling for stuff that affects the whole page*/


body { /*move to body.css */
    margin:40px;
    margin-top:20%;
    padding-bottom:200px;
    font-size:18px;
    font-family:barlow, helvetica;
    position:relative;

background: linear-gradient(to bottom, #111213, #0b1d44);


  background: radial-gradient(
    circle at 50% 90%, /* center near bottom */
    #1a2a4f 0%,        /* bright core */
    #0e1a3f 40%,       /* mid glow */
    #0a100c 100%       /* outer darkness */
  );

  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;

  color: #ffffff;
}

.grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(0, 255, 136, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 255, 136, 0.1) 1px, transparent 1px);
  background-size: 80px 80px; /*grid spacing*/
  pointer-events: none;
  z-index: -1;
}


.stars {
  position: absolute;
  margin-top: -20%;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.stars::before {
  content: '';
  position: fixed;
  width: 1.2px;
  height: 1.2px;
  background: grey;
  box-shadow:
    100px 200px darkgrey,
    140px 190px grey,
    250px 90px darkgrey,
    700px 50px grey,
    900px 100px grey,
    1000px 80px grey;
}


hr {
    border-color: #60573e;
    border-style:solid;
    border-width:3px;
}

h1 {
    font-family:'Barlow';
text-transform:uppercase;
    font-weight:100;
    font-size: 50pt;
    line-height: 46pt;
    padding-bottom:7pt;
    /*border-bottom:3px solid #FF8000;*/

}


.stinger {
    margin-top:10%/*2em*/;
    margin-bottom:15%/*3em*/;
    font-size:50pt;
    border-width:0 0 0 2em; /*for cursor animation*/
    border-color:dodgerblue;
    text-transform:uppercase;
    display:inline-block;
    overflow:hidden;
    animation-name: headingReveal;
    animation-timing-function: steps(10);
    animation-duration: 2s;
}


@keyframes headingReveal {
    0% {white-space: nowrap; width:0; color:dodgerblue; border-style: none;}
    10% {border-style:solid;}
    30% {border-style:none;}
    50% {border-style:solid;}
    70% {border-style:none;
        width:0; background-color:teal; color:cyan;
/*}
    80% {background-color:dodgerblue;
*/
  background-image:
    linear-gradient(to right, rgba(0, 120, 156, 0.3) 2px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 120, 156, 0.3) 2px, transparent 1px);
  background-size: 40px 40px; /*grid spacing*/

}
    100% {white-space:nowrap;
         width:100%; background-color:none; color:white;} 

}

h1::first-line {
    color: dodgerblue;
}

h2 {
    font-weight:normal;
    color:#FF8000;
    font-family:'Barlow';
    font-size: 25pt;
    margin-top:3em;
    margin-bottom:2em;   
}


h3 {
    color:teal;
}

ul,ol {
    margin-bottom:2em;
}

ul {
    list-style-type:none;
    padding-left:0;
}

li {
    margin-bottom:1em;
}

ul li {
    border-left: 1em solid dodgerblue;
    padding-left:1em;
}


#footer {
    margin:100px -40px -40px -40px;
    padding:4em 1em 1em 40px;
    width:100%;
    display:block;
    /*text-transform:uppercase;*/
    position:absolute;
    bottom:0px;
    color:#FF8000;
}

#footer a {
    color:inherit;
}

#footer #tagline {
    font-size:18px;
}

#footer #fineprint {
    color:black;
    font-size:12px;
    display:inline-block;
    padding:3em 0em 0.7em 0;
    border-bottom:1em solid;
}