body {
  background-color: #c3c3b357;
  font-family: 'Inter', sans-serif;
}

#header {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  margin-bottom: 25px;
}

#bio {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  padding: 20px;
  letter-spacing: 0.25px;
  line-height: 35px;
}

#projects {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height:30px;
}

#projects > ul {
  padding:18px;
}

#contact {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height:20px;
  text-decoration: none;
  padding-bottom: 25px;
}

#contact > p > a {
  color: black;
}

#profile {
  width: 20%;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  #header {
    padding: 50px 10px 10px 25px;
    display: flex;
    align-items: center;
  }

  #bio {
    padding: 40px 10px 10px 25px;
  }
  #projects {
    padding: 25px 10px 10px 25px;
  }
  #contact {
    padding-left: 25px;
  }
  #mobile-profile-pic {
    border-radius: 50%;
    width: 100px;
    margin-left: 32px;
  }
  #profile-pic {
    display: none;
  } 
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  #header {
    padding: 50px 10px 10px 25px;
    display: flex;
    align-items: center;
  }

  #bio {
    padding: 40px 10px 10px 25px;
  }
  #projects {
    padding: 25px 10px 10px 25px;
  }
  #contact {
    padding-left: 25px;

  }
  #mobile-profile-pic {
    border-radius: 50%;
    width: 65px;
    margin-left: 32px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #header {
    padding: 50px 10px 10px 25px;
    display: block;
  }

  #mobile-profile-pic {
    display: none;
  }

  #profile-pic {
    box-shadow: #8b8b8b 2px -1px 20px 3px;
    width: 150px;
    margin-left: 25px;
    margin-right: 25px;
  }

  #projects {
    display: flex;
    justify-content: space-between;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) {...} */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) {...} */