@media (min-width: 768px) {
  html {
    background: rgb(16, 29, 61);
    background: linear-gradient(
      90deg,
      rgba(16, 29, 61, 1) 0%,
      rgba(16, 23, 42, 1) 37%
    );
    scroll-behavior: smooth;
  }
  .left-section,
  .right-section {
    flex: 1;
  }

  .left-section {
    float: left;
    width: 45%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 5em;
  }
  .left-section h1,
  .left-section h2 {
    color: white;
  }

  .left-section h1 {
    font-weight: 700;
    margin-bottom: 0.5em;
  }

  .left-section h2 {
    font-weight: 400;
    margin-bottom: 0.5em;
  }

  .left-section p {
    color: #8a9cba;
    font-weight: 300;
  }

  .social-media {
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 3rem;
    width: auto;
  }
  .social-media-icon {
    img {
      width: 2.5rem;
      height: 2.5rem;
      margin: 0 0.5rem;
    }
  }
  .shortcut-link {
    text-decoration: none; /* Removes underline */
    color: #475569; /* Inherits color from parent element */
    font-weight: 100;
  }

  /* .shortcut-link:visited {
    color: #475569; 
    font-weight: 100;
  } */

  .shortcut-link:hover,
  .shortcut-link:focus,
  .shortcut-link:active {
    color: #475569; /* Inherits color from parent element for hover, focus, and active states */
    outline: none; /* Removes outline */
    font-weight: 600;
    font-size: large;
  }

  .shortcut-links-wrapper {
    margin-top: 5em;
  }

  /* End of left Section */

  .right-section {
    float: right;
    width: 55%;
    overflow-y: hidden;
    overflow-x: hidden;
    /* padding-top: 5em; */
  }
  .right-section h1,
  .right-section h2,
  .right-section h3,
  .right-section h5,
  .right-section p,
  .right-section ul {
    color: #8a9cba;
  }

  .role-card {
    /* background-color: black; */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 16px 0;
    margin: 16px 0;
    /* background-color: #4ec2b4; */
  }

  .role-card:hover {
    /* background-color: gray;
    transition-delay: 300; */
  }

  .role-card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1.3em;
    color: white;
  }

  .role-card-content {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .role-card-button {
    padding: 8px 16px;
    border-style: hidden;
    border-radius: 30px;
    background-color: #132b3d;
    color: #4ec2b4;
    font-size: small;
    margin: 0.25em 0.1em;
  }

  .time-period {
    text-align: end;
    font-weight: 300;
    font-size: smaller;
  }

  .stack {
    margin-top: 1em;
  }

  .project-card {
    margin-top: 1.5em;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* background-color: #132b3d; */
  }
  .project-description {
    font-size: 16px;
    margin-top: 0.75em;
  }

  .project-awards {
    margin-top: 0.75em;
    font-style: italic;
  }

  .project-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1.3em;
    color: white;
  }

  .education-card {
    padding: 1em;
  }
  .education-awards {
    margin-top: 0.75em;
    font-style: italic;
  }

  .award-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 1.3em;
    color: white;
  }

  #experience,
  #projects,
  #education,
  #awards,
  #non-tech-exp {
    padding-top: 5em;
  }

  .footer {
    padding: 10em;
  }
}

@media (max-width: 767px) {
  body {
    background: rgb(16, 29, 61);
    background: linear-gradient(
      90deg,
      rgba(16, 29, 61, 1) 0%,
      rgba(16, 23, 42, 1) 37%
    );
    scroll-behavior: smooth;
    /* padding: 1.5em; */
    padding: 4em 0.5em;
  }

  .left-section h1,
  .left-section h2 {
    color: white;
  }

  .left-section h1 {
    font-weight: 700;
    margin-bottom: 0.3em;
    font-size: 2.2em;
  }

  .left-section h2 {
    font-weight: 400;
    margin-bottom: 0.75em;
  }

  .left-section p {
    color: #8a9cba;
    font-weight: 300;
  }
  .social-media {
    display: flex;
    justify-content: space-around;
    bottom: 3rem;
    width: auto;
    margin-top: 2em;
  }
  .social-media-icon {
    img {
      width: 2.5rem;
      height: 2.5rem;
      margin: 0 0.5rem;
    }
  }

  .shortcut-links-wrapper {
    display: none;
  }

   */

  .right-section {
    float: right;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    /* padding-top: 5em; */
  }
  .right-section h1,
  .right-section h2,
  .right-section h3,
  .right-section h5,
  .right-section p,
  .right-section ul {
    color: #8a9cba;
  }
  #career-description {
    display: none;
  }

  .role-card {
    /* background-color: black; */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 16px 0;
    margin: 16px 0;
    /* background-color: #4ec2b4; */
  }

  .role-card:hover {
    /* background-color: gray;
    transition-delay: 300; */
  }

  .role-card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1.3em;
    color: white;
  }

  .role-card-content {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .role-card-button {
    padding: 8px 16px;
    border-style: hidden;
    border-radius: 30px;
    background-color: #132b3d;
    color: #4ec2b4;
    font-size: small;
    margin: 0.25em 0.1em;
  }

  .time-period {
    text-align: end;
    font-weight: 300;
    font-size: smaller;
  }

  .stack {
    margin-top: 1em;
  }

  .project-card {
    margin-top: 1.5em;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* background-color: #132b3d; */
  }
  .project-description {
    font-size: 16px;
    margin-top: 0.75em;
  }

  .project-awards {
    margin-top: 0.75em;
    font-style: italic;
  }

  .project-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1.3em;
    color: white;
  }

  .education-card {
    padding: 1em;
  }
  .education-awards {
    margin-top: 0.75em;
    font-style: italic;
  }

  .award-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 1.3em;
    color: white;
  }

  #experience,
  #projects,
  #education,
  #awards,
  #non-tech-exp {
    padding-top: 5em;
  }

  .footer {
    padding: 10em;
  }
}