@media all and (max-width: 800px) {
  :root {
    --font-large: 26px;
    --font-medium: 16px;
    --font-small: 10px;
  }
  
  
  header {
    display: grid;
    grid-template-columns: 2, 1fr;
    grid-template-rows: 2, 1fr;
    gap: 20px;
    padding: 20px 10px;
    justify-content: center;
  }
  #home, #about, #contact, #skills, #projects {
    margin: 0 0 20px 0;
    padding: 20px 30px;
    flex-direction: column;
    gap: 20px;
    border-top: 1px solid var(--primary-color-50);
  }
  #about, #projects, #skills { padding-top: 40px; }
  .cta-buttons-container { display: none; }
  h1 { font-size: var(--font-large); }
  .nav-bar ul {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    padding: 0 20px;
    align-items: flex-start;
    font-size: var(--font-medium);
  }

  .header-name-logo {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 16px;
    padding: 0 20px;
  }
  .mode-switch-container {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin-left: auto;
    gap: 5px;
    margin-right: 20px;
  }
  .skills-main-container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 40px;
    margin: 60px 0 30px 0;
  }
  .mode-switch-container label { font-size: 12px; }
  .mode-toggle {
    width: 40px;
    height: 20px;
  }
  .toggle {
    width: 20px;
    height: 20px;
    box-shadow: 1px 1px 4px var(--primary-color);
  }
  .img, .project-screenshot, #contact form {
    width: 100%;
    height: auto;
    min-width: 0;
    max-width: 100%;
  }

  #skills {
    text-align: center;
  }

  .skill-container h1 {
    margin-top: 10px;
    font-size: var(--font-medium);
  }
  .skill-container img {
    min-width: 50px;
    max-width: 50px;
  }
  .skill-container p { display: none; }
  .rolle-description,
  .about-text,
  .project-description,
  .cta-text,
  .intro-text-container,
  .about-text-container,
  .contact-text-container {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }
  .rolle-description h1,
  .about-text h1,
  .project-description h1,
  .cta-text h1,
  .intro-text-container h1,
  .about-text-container h1,
  .contact-text-container h1 {
    font-size: var(--font-large);
  }
  .project-description-container a { display: none; }
  .project-description-container h1 { align-self: center; }
  .project-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .some-links-section img { width: 24px; }
  .name-and-email {
    flex-direction: column;
    gap: 10px;
  }
  .input-container input {
    min-width: 250px;
    max-height: 50px;
  }
  #contact form { padding: 20px; }
  #message {
    min-width: 250px;
    min-height: 150px;
  }
  #submit { align-self: center; }
  footer { padding: 40px 10px; }
}