/* ------------------------------------------------------------------------ */
/* Reset */
/* ------------------------------------------------------------------------ */

html:root {
   --spacing-large:3em;
   --spacing-small:2em;
   --spacing-xsmall:1em;
   
   --color-brand-1:#006837;
   --color-brand-2:#009245;
   --color-brand-3:#244234;
}

* {
   box-sizing:border-box;
}

h1, h2, h3, h4, h5, h6, span, p, a {
   color:white;
   margin:0;
   padding:0;
}

h1,h2,h3,h4,h5,h6 {
   margin-bottom:16px;
   font-size:16px;
}

h1 {
   font-size:64px;
   line-height:1em;
   margin-bottom:20px;
}

h1 span {
   display:none;
}

h1 img {
   max-width:600px;
}

@media (min-width:900px) {
   h1 {
      font-size:90px;
   }
}
@media (min-width:1200px) {
   h1 {
      font-size:130px;
   }
}

h2 {
   margin-bottom:1.6em;
}

h2 span {
   display:block;
   font-size:1.2em;
   line-height: 32px;
   opacity:0;
}

@media (min-width:900px) {
   h2 span {
      font-size:1.6em;
      line-height: 45px;
   }
}

@keyframes reveal {
   from {
     opacity:0;
   }
   to {
     opacity:1;
   }
}

html.loaded h2 span {
   animation-name: reveal;
   animation-duration:1s;
   animation-fill-mode: forwards;
}

h2 span:nth-of-type(1) {
   animation-delay:.5s;
}
h2 span:nth-of-type(2) {
   animation-delay:1s;
}
h2 span:nth-of-type(3) {
   animation-delay:1.5s;
}

body {
   position:relative;
   margin:0;
   padding:0;
   color:#f7f7f7;
   background-color: #161616;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size:16px;
}

/* ------------------------------------------------------------------------ */
/* Sitewide */
/* ------------------------------------------------------------------------ */

p {
   font-size:18px;
   line-height:1.7em;
   color:#a3a3a3;
}

p + p {
   margin-top:1em;
}

span {
   font-size:.8em;
}

a {
   text-decoration: dotted;
}

a:hover {
   text-decoration: none;
}

img {
   display:block;
   width:100%;
   height:auto;
}

ul {
   list-style:none;
   padding:0;
   margin:0;
}

.hidden {
   display:none;
}

/* ------------------------------------------------------------------------ */
/* Site Layout */
/* ------------------------------------------------------------------------ */

#main {
   position:relative;
   z-index:1;
   width:100%;
   min-height:95vh;
   padding:var(--spacing-large);
   background:linear-gradient(to bottom right, var(--color-brand-1), var(--color-brand-2));
   background-size: cover;
   background-position: top right;

   display:flex;
   align-items: center;
   justify-content: center;
}

#header {
   flex: 0 1 600px;
   max-width:100%;
}

#header ul {
   display: flex;
   flex-wrap: wrap;
}

#header ul li:not(:last-of-type) {
   margin-right:10px;
}

#header li,
#header li a {
   color: var(--color-brand-3);
}

/* ------------------------------------------------------------------------ */
/* Footer */
/* ------------------------------------------------------------------------ */

footer {
   padding: 30px;
   background-color: #404040;
   background-image: url('../img/dotted-bg-black.png');
   image-rendering: pixelated;
   overflow:hidden;

}

footer span {
   font-size:12px;
   margin-bottom:3px;
   display:block;
}

@media (min-width: 1000px) {
   footer {
      height:5vh;
      display:flex;
      justify-content: space-between;
      align-items: center;
   }


   footer span {
      font-size:15px;
      line-height: 1em;
      display:block;
      margin-bottom:-10px;
   }
}