/* Mobile Nav Bar */
@media screen and (max-width: 1440px) {
  #message {
    padding: 10% 8%;
  }
  #message h1 {
    font-size: 105px;
  }
  #blob {
    height: auto;
    width: 90%;
  }
  #intro-me {
    height: auto;
    width: 70%;
  }
}
@media screen and (max-width: 1024px) {
  #intro-buttons button {
    margin-bottom: 10px;
  }
  #message {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #message h1 {
    font-size: 72px;
  }
  #message p {
    padding-top: 5px;
    font-size: 24px;
  }
  #about-blob {
    width: 90%;
  }
  #about-container {
    max-width: 600px;
    flex-direction: column;
  }
  #skills {
    padding: 30px;
    box-sizing: border-box;
  }
  .skills-container {
    width: 100%;
  }
  .skill {
    flex-basis: 49%;
  }
  #projects {
    padding: 30px;
  }
}
@media screen and (max-width: 768px) {
  #picture {
    width: 100%;
  }
  #intro-me {
    max-width: 100%;
    width: 80%;
  }
  #intro {
    flex-direction: column;
    box-sizing: border-box;
  }
  #message {
    width: 100%;
    margin-bottom: 0px;
    text-align: center;
  }
  #message h1 {
    text-align: center;
  }
  #pictures {
    width: 80%;
    margin: 10% 15%;
  }
}
@media screen and (max-width: 500px) {
  #blob {
    height: auto;
    width: 100%;
  }
  #about {
    padding: 30px;
    box-sizing: border-box;
  }
  #story {
    padding: 30px;
    border-radius: 10px;
  }
  #about-title {
    font-size: 32px;
    margin-bottom: 15px;
  }
  .about-p {
    font-size: 16px;
    text-indent: 30px;
  }
  #about-info {
    padding: 0;
    margin: 30px 0;
  }
  #about-info tr td {
    font-size: 16px;
  }
  #about-info tr:last-child {
    border-bottom: 0;
  }
  #social-icons {
    flex-direction: column;
    gap: 10px;
  }
  #social-icons li {
    width: 100%;
    justify-content: center;
  }
  .skill {
    flex-basis: 100%;
  }
  .project-info {
    flex-direction: column-reverse;
  }
  .project-header {
    display: none;
  }
  .project-header-mobile {
    display: block;
  }
  #primary-intro-button {
    margin-right: 0px;
    margin-bottom: 10px;
  }
  .project-desc {
    padding: 35px;
  }
  .project-sidebar {
    padding: 35px;
  }
  #about-blob {
    width: auto;
    height: 90%;
  }
}