/* =================================================================
 * New Landing Page - styled after resume
 * ================================================================= */

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

/* Base
------------------------------------------------------------------ */
html {
   font-size: 62.5%;
   -webkit-font-smoothing: antialiased;
}

html, body {
   height: 100%;
}

body {
   background: #0f0f0f;
   font-family: 'Open Sans', sans-serif;
   font-size: 15px;
   line-height: 30px;
   color: #838c95;
}

a {
   color: #F06000;
   text-decoration: none;
   -webkit-transition: color 0.2s ease-in-out;
   transition: color 0.2s ease-in-out;
}

a:hover, a:focus {
   color: #11ABB0;
}

/* Home Section
------------------------------------------------------------------ */
#home {
   position: relative;
   height: 100vh;
   min-height: 500px;
   width: 100%;
   background: #161415;
   text-align: center;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Canvas fills the section behind everything */
#cloudchamber {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   display: block;
}

/* Dark overlay on top of the background */
#home .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.60);
   z-index: 1;
}

/* Banner
------------------------------------------------------------------ */
.banner {
   position: relative;
   z-index: 2;
   width: 85%;
   max-width: 1000px;
   padding: 0 20px;
   text-align: center;
}

.banner-text {
   width: 100%;
}

.banner-text h1 {
   font-family: 'Open Sans', sans-serif;
   font-weight: 800;
   font-size: 80px;
   line-height: 1.1em;
   color: #fff;
   letter-spacing: -2px;
   margin: 0 auto 18px auto;
   text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
}

.banner-text h3 {
   font-family: 'Libre Baskerville', serif;
   font-weight: 400;
   font-size: 18px;
   line-height: 1.9em;
   color: #A8A8A8;
   margin: 0 auto;
   width: 70%;
   text-shadow:
      1px 1px 0 #111,
      -1px 1px 0 #111,
      -1px -1px 0 #111,
      1px -1px 0 #111;
}

.banner-text h3 span {
   color: #F06000;
}

.banner-text hr {
   width: 60%;
   margin: 18px auto 24px auto;
   border: none;
   border-top: 1px solid rgba(150, 150, 150, 0.1);
}

/* Links / Buttons
------------------------------------------------------------------ */
.links {
   margin: 24px 0;
}

.btn {
   display: inline-block;
   font-family: 'Open Sans', sans-serif;
   font-weight: 700;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: #fff;
   border: 2px solid rgba(255, 255, 255, 0.5);
   padding: 14px 36px;
   border-radius: 3px;
   margin: 0 8px;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

.btn:hover, .btn:focus {
   background: #F06000;
   border-color: #F06000;
   color: #fff;
}

/* Footer
------------------------------------------------------------------ */
footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   text-align: center;
   z-index: 10;
}

.footer-bottom {
   padding: 12px 0;
   background: rgba(0, 0, 0, 0.5);
}

.copyright {
   font-family: 'Open Sans', sans-serif;
   font-size: 12px;
   letter-spacing: 1px;
   color: rgba(255, 255, 255, 0.3);
}

/* Responsive
------------------------------------------------------------------ */
@media only screen and (max-width: 900px) {
   .banner-text h1 {
      font-size: 60px;
      letter-spacing: -1px;
   }
   .banner-text h3 {
      width: 90%;
      font-size: 16px;
   }
}

@media only screen and (max-width: 600px) {
   .banner-text h1 {
      font-size: 42px;
      letter-spacing: 0;
   }
   .banner-text h3 {
      width: 95%;
      font-size: 14px;
   }
   .btn {
      padding: 12px 24px;
   }
}