/* General colours */
:root {
  --bg-clr: #010e21;
  --white-clr: #ffff;
  --bg-mid: #052c659d;
  --bg-light: #095ddc;
  --bg-dark: #000b18;
}

@media screen and (max-width: 600px) {
  #home {
    height: 100vh;
    font-weight: 200;
    text-align: center;
  }
  .porfilePic {
    margin-top: 5rem;
    width: 13rem;
  }

  #home h3 {
    margin-top: 1.5rem;
    font-size: 1rem;
    margin-bottom: 0rem;
  }

  #home .titleName {
    font-size: 2rem;
    font-weight: 500;
    line-height: 2rem;
  }

  #home p {
    margin-top: 0.5rem;
    font-size: 0.9rem;
  }

  .skillBadge {
    background-color: var(--bg-clr);
    width: 100%;
    border-radius: 20px;
    transition: 1s;
  }

  .skillContainer h3 {
    font-size: 1.3rem;
    font-weight: 400;
  }

  .panel {
    visibility: hidden;
  }
  #resume {
    background-position-x: 70%;
  }
  .disclosure {
    border-color: var(--bg-light);
    background-color: rgba(34, 34, 95, 0.175);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(16.5px);
  }
  .disclosure-trigger {
    flex-direction: column;
  }
  .disclosure-trigger-sub-section {
    justify-content: space-between;
    text-align: left;
  }
  .project-card {
    flex-direction: column;
  }
  .project-card-icon {
    font-size: 13px;
  }
  .project-card-icon img {
    width: 1rem;
  }
}