* {
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}


.main-container {
    background:rgb(27, 27, 27);
    height:100vh;
    padding: 0;
    margin: 0;
    box-sizing:border-box;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-flow:row wrap;
    justify-content: flex-start;
}

.header-div-top {
    background:rgb(23, 23, 23);
    display:flex;
    flex-flow:column wrap;
    width:140px;
    position: fixed;
    height:100vh;
    box-sizing: border-box;
    z-index:2;
}

.inner-div-header {
    background:black; 
    height:200px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:140px;
}

h3 {
    margin-top: 10px;
    color:whitesmoke;
}

h6 {
    margin-top: 15px;
    color:azure;
    opacity:65%;
    color:rgb(194, 193, 193);
}


.nav-links-div a {
    text-decoration: none;
    color:rgb(194, 193, 193);
    opacity:65%;
    height:50px;
    width:140px;
    display:flex;
    align-items: center;
    justify-content:center;
    box-sizing: border-box;
   
}

.nav-links-div {
    list-style-type: none;
    display:flex;
    width:100%;
    align-items: center;
    justify-content:center;
    border-bottom:1px solid rgb(38, 38, 38); 
}

.nav-links-div a:hover {
  color:#07FDD8;
}

.nav-links {
    margin-top:150px;
    display: flex;
    flex-flow:column wrap;
    justify-content:center;
    align-items:center;
}


.social-links {
    display:flex;
    flex-flow:row wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-top:100px;
    box-sizing: border-box;
    width:140px;
}

.linkedin-icon,
.github-icon,
.slack-icon {
    display:flex;
    flex-flow:row wrap;
    justify-content: space-evenly;
    align-items: center;
    align-self: center;
}

a {
    color:white;
    text-decoration: none;
    box-sizing: border-box;
    /* opacity:65%; */
}

main {
    height: 100vh;
    display:flex;
    flex-flow:row wrap;
    justify-content: space-evenly;
    align-items: center;

}

pre {
    color:white;
    opacity:25%;
    font-family: 'La Belle Aurore', cursive;
    font-size: 20px;
}

.main-container-body {
    margin-left: 170px;
    width:100%;
}

.heading-intro {
    margin-top: 80px;
}

.heading-intro h1 {
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 80px;
    margin-left: 50px;
    letter-spacing: -8px;
}

.heading-intro img {
    height:80px;
    margin-left:20px;
}

/* .hvr-buzz-out {
    transition:0.3s ease-out;
} */


.heading-intro p {
    color: white;
    opacity:65%;
    margin-left: 60px;
}


button {
    background-color: transparent;
    height:50px;
    width:240px;
    border:1px solid #07FDD8;
    color:#07FDD8;
    margin: 10px 2px;   
    font-size: 15px;
}

.blast {
    /* transform: translateX(300px); */
    transition:all 2s ease-out;
}

.contact-form-top {
  /* width:200px; */
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.contact-form-top input {
  width:250px;
}

input {
  height:60px;
  width:510px;
  background-color: rgb(31, 33, 42);
  /* display: inline-block; */
  padding:0 10px;
  border:none;
  margin-bottom: 10px;
}

.contact-form {
  margin-left: 60px;  
}

.contact-form-message {
  height:180px;
}

input::placeholder {
  vertical-align:text-top;
}

.section-previews {
  display: flex;
  flex-flow: column wrap;
}

.site-summary p {
  color: white;
  opacity:65%;
  margin-left: 60px;
}

.sub-container-1 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
}

.hidden {
  visibility: hidden;
  text-decoration: none;
  
}




.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  height: 200px;
}
.hvr-grow:hover,.hvr-grow:focus, .hvr-grow:active  {
  -webkit-transform: scale(2.1);
  transform: scale(2.1);
  z-index: 10;
}

@keyframes hvr-buzz-out {
    10% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg);
    }
    20% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg);
    }
    30% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg);
    }
    40% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg);
    }
    50% {
      -webkit-transform: translateX(2px) rotate(1deg);
      transform: translateX(2px) rotate(1deg);
    }
    60% {
      -webkit-transform: translateX(-2px) rotate(-1deg);
      transform: translateX(-2px) rotate(-1deg);
    }
    70% {
      -webkit-transform: translateX(2px) rotate(1deg);
      transform: translateX(2px) rotate(1deg);
    }
    80% {
      -webkit-transform: translateX(-2px) rotate(-1deg);
      transform: translateX(-2px) rotate(-1deg);
    }
    90% {
      -webkit-transform: translateX(1px) rotate(0);
      transform: translateX(1px) rotate(0);
    }
    100% {
      -webkit-transform: translateX(-1px) rotate(0);
      transform: translateX(-1px) rotate(0);
    }
  }
  .hvr-buzz-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    
  }
  .hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
    -webkit-animation-name: hvr-buzz-out;
    animation-name: hvr-buzz-out;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    color: #08fdd8;
  }

  .hvr-sweep-to-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }
  .hvr-sweep-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #07FDD8;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
    color: black;
  }
  .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }