/*
  
  0 - 600px --> Phone
  
  600 - 900px --> tablet portrait
  
  900 - 1200px --> tablet landscape
  
  1200 - 1800 normal styles
  
  1800px --> Large Desktop
  
  breakpoint argument choices:
  - phone 
  - tab-port
  - tab-land 
  -big-desktop
  
  ORDER: Base + typography > general layout + grid > page layout > components
  
  1em = 16px;
  */
*,
*::before,
*::after {
  margin: 0px;
  padding: 0px;
  box-sizing: inherit; }

html {
  transition: filter 850ms ease-in-out;
  font-size: 62.5%; }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 50%; } }

body {
  box-sizing: border-box;
  background-color: #d9e1e4;
  scroll-behavior: smooth; }
  @media only screen and (max-width: 56.25em) {
    body {
      padding: 0; } }

img {
  transition: all 300ms; }

.divider {
  max-width: 75%;
  margin: 5rem 0rem;
  display: none;
  background-color: #f7f7f7; }
  @media only screen and (max-width: 56.25em) {
    .divider {
      display: block; } }
  @media only screen and (max-width: 37.5em) {
    .divider {
      margin: 2rem 0rem;
      max-width: 100%; } }

.p5canvas {
  width: 100%;
  height: 100%; }

::selection {
  background-color: #111;
  color: #f0ffff; }

.u-center-text {
  text-align: center !important; }

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important; }

.u-margin-bottom-medium {
  margin-bottom: 4rem !important; }
  @media only screen and (max-width: 56.25em) {
    .u-margin-bottom-medium {
      margin-bottom: 3rem !important; } }

.u-margin-bottom-big {
  margin-bottom: 8rem !important; }
  @media only screen and (max-width: 56.25em) {
    .u-margin-bottom-big {
      margin-bottom: 5rem !important; } }

.u-margin-top-big {
  margin-top: 8rem !important; }

.u-margin-top-huge {
  margin-top: 10rem !important; }

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem); }
  80% {
    transform: translateX(1rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem); }
  80% {
    transform: translateX(-1rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes autofill {
  to {
    color: inherit;
    background: transparent; } }

@-webkit-keyframes autofill {
  to {
    color: inherit;
    background: transparent; } }

@font-face {
  font-family: "Inconsolata";
  font-style: normal;
  font-weight: 400;
  src: local("Inconsolata Regular"), local("Inconsolata-Regular"), url(https://fonts.gstatic.com/s/inconsolata/v17/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body {
  font-family: "Inconsolata", monospace;
  font-weight: 400;
  /* font-size: 16px; */
  line-height: 1.7;
  color: #333333; }

.heading-primary {
  color: #111111;
  text-transform: uppercase;
  backface-visibility: hidden;
  margin-bottom: 6rem; }
  .heading-primary--main {
    display: block;
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: 1.5rem;
    animation: moveInLeft 0.7s ease-in-out;
    /* animation-delay: 3s; */ }
    @media screen and (prefers-reduced-motion: reduce) {
      .heading-primary--main {
        transition: none;
        animation: none; } }
    @media only screen and (max-width: 37.5em) {
      .heading-primary--main {
        letter-spacing: 1rem;
        font-family: 5rem; } }
  .heading-primary--sub {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.35rem;
    animation: moveInRight 0.7s ease-in-out; }
    @media screen and (prefers-reduced-motion: reduce) {
      .heading-primary--sub {
        transition: none;
        animation: none; } }
    @media only screen and (max-width: 37.5em) {
      .heading-primary--sub {
        letter-spacing: 0.5rem; } }

.heading-secondary {
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 400;
  background-image: linear-gradient(to right, #141414, #540000);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.2rem;
  transition: all 0.3s; }
  @media only screen and (max-width: 56.25em) {
    .heading-secondary {
      font-size: 3rem; } }
  @media only screen and (max-width: 37.5em) {
    .heading-secondary {
      font-size: 2.5rem; } }
  .heading-secondary:hover {
    transform: skewY(0.5deg) skewX(3deg) scale(1.05);
    text-shadow: 0.5rem 1rem 2rem rgba(17, 17, 17, 0.2); }

.heading-tertiary {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase; }

.paragraph {
  font-size: 1.6rem; }
  .paragraph--sm {
    font-size: 1.3rem; }
  .paragraph:not(:last-child) {
    margin-bottom: 3rem; }

.highlight {
  background-color: #333333;
  color: #f7f7f7; }

.t--dark,
video {
  filter: invert(100%);
  transition: all 750ms; }
  .t--dark > *,
  video > * {
    color: #653e22; }
  .t--dark img:not(.no-filter),
  video img:not(.no-filter) {
    filter: invert(100%);
    border: none;
    mix-blend-mode: hard-light;
    opacity: 0.8;
    border-radius: 3px; }
    .t--dark img:not(.no-filter):hover,
    video img:not(.no-filter):hover {
      mix-blend-mode: normal;
      transform: scale(1.05);
      opacity: 1;
      transition: all 300ms; }
  .t--dark-txt,
  video-txt {
    color: #653e22; }

.btn {
  padding: 1rem;
  border-radius: 1rem;
  border: 2px solid #333333;
  background-color: transparent;
  color: #333333;
  width: 25%;
  cursor: pointer; }
  .btn:hover {
    transform: scale(1.05);
    opacity: 1;
    transition: all 300ms; }
  .btn:active,
  .btn :focus {
    transform: scale(0.9);
    box-shadow: 0 1.5em 4rem rgba(17, 17, 17, 0.15); }
  .btn--code {
    border-radius: 1rem;
    background-color: #d5dadf;
    padding: 1rem;
    margin: 0.5rem 0.5rem 0.5rem auto;
    cursor: pointer; }
    .btn--code:active,
    .btn--code :focus {
      transform: scale(0.9);
      box-shadow: 0 1.5em 4rem rgba(17, 17, 17, 0.15); }
    .btn--code:hover {
      transform: scale(1.05);
      opacity: 1;
      transition: all 300ms; }

.disabled {
  background-color: #c4c4c4;
  opacity: 0.3;
  box-shadow: none; }

.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0); }

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #999 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s; }

.ripple:active:after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s; }

.banner {
  position: relative;
  margin: 5rem 8rem 0;
  padding: 1rem 5rem 2rem;
  display: flex;
  justify-content: space-between;
  z-index: 1; }
  @media only screen and (max-width: 56.25em) {
    .banner {
      flex-wrap: wrap;
      padding: 12rem 0 2rem 0; } }
  @media only screen and (max-width: 37.5em) {
    .banner {
      padding-top: 3rem;
      margin: 0 5rem; } }

.emailaddress {
  position: absolute;
  margin-top: -4rem;
  padding: 1rem; }
  @media only screen and (max-width: 56.25em) {
    .emailaddress {
      margin-top: -7rem; } }
  @media only screen and (max-width: 37.5em) {
    .emailaddress {
      position: fixed;
      margin-top: -2rem;
      left: 0;
      max-width: 16rem;
      max-height: 9rem; } }

.js-emailcopybtn {
  border: none;
  background-color: transparent; }
  @media only screen and (max-width: 37.5em) {
    .js-emailcopybtn {
      margin-top: 5rem; } }

.get-email {
  text-decoration: none;
  color: #333333;
  font-family: "Inconsolata", monospace;
  cursor: pointer;
  font-size: 1.6rem; }

.js-emaillink {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  text-decoration: none;
  color: #333333;
  font-family: "Inconsolata", monospace; }

.name {
  flex: 4 55%; }
  .name__header {
    margin: 5rem 0 4rem 0; }
    @media only screen and (max-width: 56.25em) {
      .name__header {
        margin: 0 0 5rem 0; } }
    @media only screen and (max-width: 37.5em) {
      .name__header {
        margin: 5rem 0 0 0;
        text-align: center; } }
  .name__tag {
    overflow: hidden; }
    @media only screen and (max-width: 37.5em) {
      .name__tag {
        text-align: center; } }

.dev,
.design,
.cCoder {
  cursor: pointer; }

.nav {
  flex: 2 10%;
  margin: 0 2rem;
  z-index: 1; }
  @media only screen and (max-width: 37.5em) {
    .nav {
      order: -1;
      position: fixed;
      top: 0;
      left: 0;
      padding: 2rem 0;
      margin: 0;
      width: 100vw;
      background-color: #333333;
      color: #f7f7f7;
      opacity: 0.95; } }
  .nav__list {
    display: flex;
    justify-content: space-around; }
    .nav__list-item {
      list-style: none;
      padding: 0 2rem; }
      .nav__list-item--link,
      .nav__list-item :active,
      .nav__list-item :link,
      .nav__list-item :visited {
        text-decoration: none;
        color: inherit; }
        @media only screen and (max-width: 37.5em) {
          .nav__list-item--link,
          .nav__list-item :active,
          .nav__list-item :link,
          .nav__list-item :visited {
            padding: 1.5rem; } }
        .nav__list-item--link:hover,
        .nav__list-item :active:hover,
        .nav__list-item :link:hover,
        .nav__list-item :visited:hover {
          border-bottom: 1px solid #c4c4c4; }

.info {
  min-width: 24;
  max-width: 28rem;
  margin-left: 3rem; }
  @media only screen and (max-width: 56.25em) {
    .info {
      max-width: 80vw;
      margin: 0; } }
  @media only screen and (max-width: 37.5em) {
    .info {
      text-align: center; } }

.form {
  display: flex;
  flex: 5 80%;
  background-color: inherit;
  flex-direction: column;
  margin-bottom: 4rem;
  overflow: hidden; }
  .form__element {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: inherit;
    font-size: 1.6rem;
    overflow: hidden; }
    @media only screen and (max-width: 37.5em) {
      .form__element {
        flex-wrap: wrap;
        justify-content: center; } }
    .form__element--label {
      min-width: 10%;
      overflow: hidden;
      min-width: 15%; }
      .form__element--label-txt {
        position: relative;
        top: 1.1rem;
        overflow: hidden;
        min-width: 15%; }
    .form__element--input, .form__element--input-webkit-autofill, .form__element--input-webkit-autofill:hover, .form__element--input-webkit-autofill:focus, .form__element--input-autofill {
      -webkit-animation-name: autofill;
      -webkit-animation-fill-mode: both;
      display: block;
      width: 40%;
      margin: 0 auto 2rem 0;
      border: none;
      border-bottom: 1px solid #c4c4c4;
      outline: none;
      font-family: inherit;
      background-color: inherit;
      font-size: 1.6rem;
      overflow: hidden;
      color: inherit; }
      @media only screen and (max-width: 37.5em) {
        .form__element--input, .form__element--input-webkit-autofill, .form__element--input-webkit-autofill:hover, .form__element--input-webkit-autofill:focus, .form__element--input-autofill {
          width: 100%;
          margin: 2rem auto; } }
    .form__element--textarea, .form__element--textarea-webkit-autofill, .form__element--textarea-webkit-autofill:hover, .form__element--textarea-webkit-autofill:focus {
      background-attachment: local;
      background-image: linear-gradient(to right, transparent -1rem, transparent 10px), linear-gradient(to left, transparent -10px, transparent -10px), repeating-linear-gradient(transparent, transparent 31px, #c4c4c4 31px, #c4c4c4 32px, transparent 32px);
      line-height: 31px;
      margin: 0 0 2rem auto;
      width: 90%;
      padding: 8px 0rem;
      border: none;
      resize: none;
      outline: none;
      font-family: inherit;
      background-color: inherit;
      font-size: 1.6rem;
      overflow: hidden; }
      @media only screen and (max-width: 37.5em) {
        .form__element--textarea, .form__element--textarea-webkit-autofill, .form__element--textarea-webkit-autofill:hover, .form__element--textarea-webkit-autofill:focus {
          width: 100%; } }
    .form__element--btn {
      margin: 0.5rem 1.5rem 0.5rem auto; }
      @media only screen and (max-width: 56.25em) {
        .form__element--btn {
          width: 100%; } }

.footer {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
  padding: 1rem;
  background-color: #111111;
  box-shadow: 0 1.5em 4rem rgba(17, 17, 17, 0.15);
  color: #f7f7f7;
  z-index: 1; }

.contact {
  position: relative;
  margin: 0rem 8rem;
  display: flex;
  justify-content: space-between;
  background-color: transparent;
  z-index: 1; }
  @media only screen and (max-width: 56.25em) {
    .contact {
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 0; } }

.social {
  flex: 2 33.33%;
  padding-left: 5rem;
  background-color: transparent; }
  @media only screen and (max-width: 56.25em) {
    .social {
      padding: 0; } }
  .social__image {
    display: block;
    height: 22rem;
    filter: grayscale(1); }
    @media only screen and (max-width: 56.25em) {
      .social__image {
        display: none; } }
  .social__list {
    display: flex;
    justify-content: space-around;
    margin: 1rem; }
    @media only screen and (max-width: 56.25em) {
      .social__list {
        margin: 3rem 0;
        justify-content: space-evenly; } }
    .social__list-item {
      list-style-type: none;
      display: flex;
      min-width: 1rem;
      text-align: center; }
      .social__list-item--link,
      .social__list-item :active,
      .social__list-item :link,
      .social__list-item :visited {
        text-decoration: none;
        color: inherit;
        padding: 0 1.5rem; }
        .social__list-item--link:hover,
        .social__list-item :active:hover,
        .social__list-item :link:hover,
        .social__list-item :visited:hover {
          border-bottom: 1px solid #c4c4c4; }
  .social__icon {
    max-width: 3rem;
    display: none; }
    @media only screen and (max-width: 56.25em) {
      .social__icon {
        display: inline; } }

.github::after {
  content: "Github"; }

.twitter::after {
  content: "Twitter"; }

.linkedin::after {
  content: "LinkedIn"; }

.fixed {
  letter-spacing: 0.35rem;
  overflow: hidden; }

.broken {
  letter-spacing: 0.5em;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif !important;
  color: #111; }

.wobble {
  animation: wiggle 2.5s infinite; }

@keyframes wiggle {
  0% {
    transform: rotate(0deg); }
  80% {
    transform: rotate(0deg); }
  85% {
    transform: rotate(5deg); }
  95% {
    transform: rotate(-5deg); }
  100% {
    transform: rotate(0deg); } }

.project {
  display: flex;
  max-width: 95vw;
  background-color: transparent;
  margin: 0rem 8rem;
  padding: 4rem 0;
  align-items: center; }
  @media only screen and (max-width: 75em) {
    .project {
      flex-wrap: wrap;
      padding: 2rem 0;
      margin: 0rem 6rem; } }
  @media only screen and (max-width: 56.25em) {
    .project {
      flex-wrap: wrap;
      padding: 0;
      margin: 0rem 4rem; } }
  .project:nth-child(even) {
    background-color: transparent;
    flex-direction: row-reverse; }
  .project__button {
    cursor: pointer; }
  .project .image {
    position: relative;
    top: -1px;
    left: -1px;
    width: 80%;
    object-fit: contain;
    cursor: pointer;
    margin-bottom: 1rem; }
    @media only screen and (max-width: 37.5em) {
      .project .image {
        width: 100%; } }
  .project__image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 8rem;
    flex: 1 3 33%;
    margin: 2rem 1rem;
    display: flex;
    justify-content: center;
    overflow: hidden; }
    .project__image--link {
      display: flex;
      justify-content: center;
      align-items: center; }
      .project__image--link:hover {
        transform: scale(1.05);
        opacity: 1;
        transition: all 300ms; }
  .project__info {
    width: 60%;
    flex: 3 1 66%;
    margin: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 1.6rem; }
    @media only screen and (max-width: 75em) {
      .project__info {
        width: 100%; } }
    .project__info-item {
      display: flex;
      width: 100%;
      padding: 0.5rem 1rem; }
      @media only screen and (max-width: 56.25em) {
        .project__info-item {
          flex-wrap: wrap; } }
      .project__info-item--title {
        width: 11rem;
        margin: 0.3rem;
        padding: 0.2rem;
        font-weight: 700;
        text-transform: uppercase; }
        @media only screen and (max-width: 56.25em) {
          .project__info-item--title {
            width: 100%;
            text-align: center; } }
      .project__info-item--desc {
        width: 60%;
        margin: 0.3rem;
        padding: 0.2rem; }
        @media only screen and (max-width: 56.25em) {
          .project__info-item--desc {
            width: 100%;
            text-align: center; } }

.gib {
  text-decoration: line-through; }

.tooltip {
  margin-left: 2rem;
  position: relative;
  display: inline-block;
  font-family: "Inconsolata", monospace; }
  @media only screen and (max-width: 37.5em) {
    .tooltip {
      margin-top: 8rem; } }
  .tooltiptext {
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 7px 4px;
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 1s; }
    @media only screen and (max-width: 75em) {
      .tooltiptext {
        top: 0;
        left: 0; } }
    @media only screen and (max-width: 37.5em) {
      .tooltiptext {
        top: -7rem;
        left: -1rem; } }
    .tooltiptext::after {
      content: " ";
      position: absolute;
      top: 50%;
      right: 100%;
      /* To the left of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent #111111 transparent transparent; }
      @media only screen and (max-width: 37.5em) {
        .tooltiptext::after {
          top: -25%;
          left: 50%;
          margin: -3px 0 0 -5px;
          border-width: 5px;
          border-style: solid;
          border-color: transparent transparent #111111 transparent; } }

.showtip {
  visibility: visible;
  opacity: 1; }

main {
  background: linear-gradient(164.75deg, rgba(247, 247, 247, 0.7) 33.16%, rgba(213, 218, 223, 0.7) 37.43%, rgba(213, 218, 223, 0.7) 55.33%, rgba(255, 255, 255, 0.7) 65.61%); }

.g-wrapper {
  background-color: transparent; }

.projects {
  position: relative;
  z-index: 1; }
  .projects__header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4rem;
    background-color: transparent; }