html {
    box-sizing: border-box;
    /* background: #eeeeee; */
    font-family: 'helvetica neue';
    font-size: 20px;
    font-weight: 200;
  }
  
  body {
    margin: 0;
    background-color: #181818;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Source Code Pro', monospace;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  .site-wrap {
    width: 65%;
    margin: 2rem auto;
    background: black;
    color: white;
    padding: 40px;
    text-align: justify;
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.05);
    transform: scale(0.98);
    transition: transform 0.5s;
    /* min-width: 300px; */
  }
  
  .fixed-nav .site-wrap {
    transform: scale(1);
  }
  
  
  header {
    text-align: center;
    height: 50vh;
    /* background: url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat; */
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  h1 {
    color: white;
    font-size: 9vw;
    font-family: 'Odibee Sans', cursive;
    text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.2);
  }
  
  nav {
    background: black;
    top: 0;
    width: 100%;
    transition: all 0.5s;
    font-family: 'Inconsolata', monospace;
    
    position: relative;
    z-index: 1;
  }
  
  
  
  .fixed-nav nav {
    position: fixed;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1);
  
  }
  
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  
  nav li {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  li.logo {
    max-width: 0;
    overflow: hidden;
    background: white;
    transition: all .5s;
    font-weight: 600;
    font-size: 1.5rem;
  }
  
  .fixed-nav li.logo {
    max-width: 500px;
  }
  
  li.logo a {
    color: black;
  }
  
  nav a {
    text-decoration: none;
    padding: 20px;
    display: inline-block;
    color: white;
    transition: all 0.2s;
    text-transform: uppercase;
  }
  p, h2{
    
    
  }

  .heading{
    color: white;
    -webkit-text-fill-color: white; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
    transition: all .5s;
  }
 

  .heading .h1-hover{
    color: lightgray;
    -webkit-text-fill-color: #181818; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: lightgray;
  }

  img{
    width: 40%;
    float: left;
      margin-right: 20px;
  }
  a{
    text-decoration: none;
    color: wheat;
  }
  img{
    padding:  2px;
  }