@media screen and (max-width: 1024px) {
  aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 95%;
    height: auto;
    margin: 0;
    padding: 2vh;

    background-color: var(--background-color);
    color: var(--text-color1);
    box-sizing: border-box;
    box-shadow: none;
    border-radius: 0;
    position: static;
  }

  /* Logo Visibility */
  .mainLogo {
    display: none;
  }

  .darkMobileLogo {
    display: flex;
    height: 44vw;
    top: -20px;
    position: relative;
      
      filter: drop-shadow(1px -2px 2px cyan)
  }

  .NameTag,
  .NameTag h1,
  .NameTag h2,
  .Side-infoTxt h3 {
    text-align: center;
    font-family: serif;
    font-variant-caps: petite-caps;
    color: var(--text-color1);
  }

  .NameTag {
    width: 100%;
    margin: 0;
    border-bottom: var(--half-border-bottom);
  }

  .NameTag h1 {
    margin: 0 0 10px;
    font-size: 8vw;
    font-weight: 550;
    letter-spacing: 1px;
  }

  .NameTag h2 {
    position: relative;
    width: 95%;
    margin: 10px 0 20px;
    padding: 0.5vh;
    font-size: 4vw;
    font-weight: 550;
    letter-spacing: 2px;
    border-radius: 15px;
    background-color: var(--div-background-color2);
    overflow: hidden;
  }

  .NameTag h2::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -150%;
    background: var(--gradient-background);
    transform: skewX(-25deg);
  }

  .NameTag h2:hover::after {
    animation: shine 1s ease-out;
  }

    .Side-infoTxt {
        border-bottom: var(--border-bottom3);
        
        margin: 10px 0 0;
}
    
  .Side-infoTxt h3 {
    width: 95%;
    margin: 0 0 1.5vw;
    padding: 0.5vh;
    font-size: 2.5vw;
    font-weight: 250;
    letter-spacing: 1px;
    border-radius: 15px;
  }

  @keyframes shine {
    from {
      left: -100%;
    }
    to {
      left: 100%;
    }
  }

  /* Hide on mobile */
  .personalInfoGrid,
  .contact,
  .socials {
    display: none;
  }
}