/* -== Responsive / ADA == */

@media screen and (max-width: 59.99em) {
  header .container,
  #intro,
  #poster-items,
  #who-am-i,
  #work,
  #contact .container,
  #education,
  #skills {
    padding: 1rem 2rem;
  }

  #poster {
    padding: 1rem;
  }

  #poster h2 {
    font-size: 3.5rem;
  }

  .skills {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 44.8em) {
  #footer-resume {
    grid-column: 1/-1;
  }

  .poster-highlights {
    margin-bottom: 1rem;
  }

  .poster-highlights h2 + p {
    font-size: 1rem;
  }

  #poster {
    padding: 1.5rem;
  }

  .skills {
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
  }

  .graphic-design-apps {
    grid-column: 1/-1;
  }

  #intro h1 {
    font-size: 3.5rem;
  }

  #portfolio {
    grid-template-columns: repeat(2, 1fr);
  }

  #contact .container {
    grid-template-columns: repeat(2, 1fr);
  }

  .poster-highlights h2 {
    font-size: 2rem;
  }

  #intro {
    padding-bottom: 1.5rem;
  }

  #poster-items {
    min-height: auto;
    margin-bottom: 3rem;
  }
  #who-am-i,
  #work,
  #contact {
    padding: 1rem;
  }
  #poster .fa-solid,
  #poster .fa-regular {
    font-size: 4rem;
  }

  #contact-info {
    font-size: 1.1rem;
  }

  .container {
    margin-bottom: 1rem;
  }

  footer p {
    margin: 0;
  }

  .teaching {
    width: 100%;
  }
}

@media screen and (max-width: 35em) {
  #intro {
    padding: 1rem 2rem;
    grid-template-columns: 1fr;
    grid-gap: inherit;
  }

  ul.teaching {
    columns: 1;
  }

  .rounded-image {
    display: none;
  }
}

@media screen and (max-width: 30em) {
  ul.teaching {
    columns: 1;
  }

  header .container {
    grid-template-columns: 1fr;
  }

  #intro .button {
    margin-bottom: 1rem;
  }

  body {
    font-size: 1rem;
  }
  .rounded-image {
    display: none;
  }
  #intro {
    grid-template-columns: 1fr;
    grid-gap: inherit;
    padding: 0 0 1rem 0;
  }

  #contact .container {
    grid-template-columns: 1fr;
    grid-row-gap: 1rem;
  }

  .contact-overview {
    padding-bottom: 0;
  }

  #contact-info {
    text-align: center;
  }

  .button {
    width: 100%;
    text-align: center;
  }

  #portfolio {
    grid-template-columns: 1fr;
  }

  #scroll-area {
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    background-color: rgb(255, 255, 255, 0.5);
  }

  #scrollButton {
    margin: auto;
  }

  #profile-intro h1 {
    color: #484848;
  }

  #navigation {
    font-size: 3rem;
    color: #3d3d3d;
    text-align: center;
  }
  #intro {
    text-align: center;
  }

  #resume {
    justify-content: inherit;
  }

  #resume .button {
    width: 50%;
    margin: auto;
  }

  .poster-highlights h2 {
    font-size: 2.5rem;
    line-height: 2.75rem;
    margin: 0;
  }

  header .container,
  #intro,
  #poster-items,
  #who-am-i,
  #work,
  #contact .container {
    margin: inherit;
    padding: 0 1rem;
  }

  #poster-items {
    margin-bottom: 2rem;
  }

  .skills {
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
  }
}

*/ @media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  :after,
  :before {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}