:root {
  /* ==== Media Queries ==== */
  --mq-mobile: 768px;

  /* ==== Sizes ==== */
  --header-height-1440: 42px;
  --header-height-1024: 40px;
  --header-height-768-H: 38px;
  --header-height-on-mobile: 40px;
  --footer-height-on-mobile: 40px;
  --section-height-1440: calc(var(--screen-height) - var(--header-height-1440) + 2px);
  --section-height-1024: calc(var(--screen-height) - var(--header-height-1024) + 2px);
  --section-height-768-H: calc(var(--screen-height) - var(--header-height-768-H) + 2px);
  --section-height-on-mobile: calc(var(--screen-height) - var(--header-height-on-mobile) - var(--footer-height-on-mobile));
}

@media (max-width: 1440px) {
  #home-link,
  #about-link,
  #skills-link,
  #examples-link,
  #contact-link {
    top: calc(-1 * var(--header-height-1440));
  }

  .slide {
    height: var(--section-height-1440);
  }

  .slide-title-style {
    font-size: 20px;
    padding: 23px 50px;
    border-width: 5px 0px;
  }
}

@media (max-width: 1024px) {
  #home-link,
  #about-link,
  #skills-link,
  #examples-link,
  #contact-link {
    top: calc(-1 * var(--header-height-1024));
  }

  .slide {
    height: var(--section-height-1024);
  }

  .slide-title-style {
    font-size: 18px;
    padding: 23px 40px;
  }

  .arrow-down {
    bottom: 8px;
    left: calc(50% - 5% - 8px);
    padding: 1px 8px;
  }
}

@media (max-height: 768px) {
  #home-link,
  #about-link,
  #skills-link,
  #examples-link,
  #contact-link {
    top: calc(-1 * var(--header-height-768-H));
  }

  .slide {
    height: var(--section-height-768-H);
  }

  .slide-title-style {
    margin-top: 24px;
    font-size: 17px;
    border-width: 4px 0px;
    padding: 24px 42px;
  }

  .arrow-down img {
    height: 16px;
  }
}

@media (max-height: 750px) {
  #contact-content .slide-title-style {
    padding: 20px 42px;
  }
}

@media (max-height: 650px) and (max-width: 850px) {
  .slide-title-style {
    font-size: 17px;
    margin-bottom: 42px;
  }
}

@media (max-height: 590px), (max-width: 768px) {
  #home-link,
  #about-link,
  #skills-link,
  #examples-link,
  #contact-link {
    top: 0;
  }

  .slide {
    height: auto;
    top: 0;
    min-height: 100vh;
  }

  .slide-title-style {
    margin-top: 100px;
    font-size: 19px;
  }
}

@media (max-height: 600px) and (max-width: 320px) {
  body {
    min-width: 0;
  }
}