/* Palette - Off-black (text) #181717
    Off-white (Background) #f7efef */
    
    @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Noto+Sans+Mono:wght@100..900&family=Poiret+One&display=swap');
    
  html, body {
    margin: 0;
    padding: 0;
    background-color: #f8f7f3; /* off-white background */
    height: 100%;
    color:#181717;
    background: linear-gradient(45deg,#9b9292,#f8f7f3, #9b9292);
    background-attachment: fixed;
  }
  canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .home {
  position: absolute;
  inset: 2.5%; /* equal top, right, bottom, left */
  border-radius: 1em;
  border: #181717 dashed 1px;
  font-family: 'Noto Sans Mono';
  padding: 10px;
  display:flex;
  justify-content: space-between;
  }

  a:hover {
    color:crimson;
  }

  .content h2 {
    font-family: 'Poiret One'; 
    font-size:48px;
    font-weight: 500;
  }

  .namecard {
    margin-top:-50px;
    padding:10px;
  }

  .namecard h1 {
    font-size: 48px;
    font-weight: 400;
    margin-bottom:0px;
  }

  #jobtitle {
    background-color: #181717;
    color:#f8f7f3;
    padding:1px 4em 1px 24px;
    font-family: 'Google Sans Code';
    width:fit-content;
  }

  #jobtitle h3 {
    font-weight: 200;
    font-size:24px;
  }

  nav ul{
    list-style:none;
    margin-left:0;
    margin-right:10px;
  }

  nav ul li {
    text-align: end;
    font-size: 2em;
    padding:0.25em 0px;
    font-family: 'Noto Sans Mono';
    font-weight: 200;
  }

  nav ul li a {
    color:#181717;
    text-decoration: none;
  }

  @media screen and (max-width:550px) {
    .home{
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    #jobtitle {
      padding:1px;
    }

    nav ul  li{
      text-align: center;
      padding:0;
    }
  }

  .content {
  margin: 2.5%;
  border-radius: 1em;
  border: #181717 dashed 1px;
  font-family: 'Noto Sans Mono';
  padding: 50px;
  }

  .proj-display {
    display:flex;
    background-color:#f1e5e56b;
    border-radius: 2em;
    overflow:hidden;
    border:1px #9b9292 dashed;
    margin-bottom:10px;
  }

  .proj-text {
    width:70%;
    display:flex;
    justify-content: center;
    flex-direction: column;
    padding:20px;
  }

  .proj-gallery {
    width:30%;
    max-width:600px;
    display:flex;
    justify-content: end;
  }

  .proj-gallery img{
    width:100%
  }

  .contactsheet {
    width:100%;
    display:flex;
    align-items: center;
    justify-content: space-around;
  }

  .contactsheet a {
    color:#181717;
  }

  .contactsheet a:hover {
    color:crimson;
    transition: 0.2s ease-in-out;
    scale:1.1;
  }

  .linkedin-card img{
    height:200px;
    margin-bottom:-20px;
  }

  .linkedin-card {
    text-align: center;
  }

  .linkedin-card:hover {
    transition: 0.2s ease-in-out;
    scale:1.1;
  }

  /*mobile preview*/

  .mobile-preview {
    display:none;
  }

  @media screen and (max-width:750px) {
    .desktop-preview {
      display:none;
    }

    .mobile-preview {
      display:block;
    }

    .proj-text {
      width:90%;
    }

    .proj-gallery {
    width:100%
    }

    .proj-display {
      flex-direction: column;
    }

    .contactsheet {
      flex-direction: column;
    }
  }