@media screen and (max-width: 1366px) {

  /* ---------------------------------------- Basics ---------------------------------------- */
  h1 {
    font-size: 6rem;
  }

  /* ---------------------------------------- Skills ---------------------------------------- */
  .skill {
    font-size: 14rem;
  }

  /* ---------------------------------------- Portfolio ---------------------------------------- */
  .description {
    font-size: 1.5rem;
  }

  /* ---------------------------------------- Footer ---------------------------------------- */
  nav {
    flex-basis: 15%;
  }

  .contact-info {
    flex-basis: 20%;
  }

  form {
    margin: 0 0 0 auto;
  }
}

@media screen and (max-width: 1024px) {

  /* ---------------------------------------- Portfolio ---------------------------------------- */
  .title {
    width: 100%;
    top: 20%;
    text-align: center;
    font-size: 2.5rem;
  }

  .description {
    line-height: normal;
  }

  .overlay button {
    bottom: 15%;
  }

  .btn {
    padding: 10px 40px;
    font-size: 1.5rem;
  }

  /* ---------------------------------------- Footer ---------------------------------------- */
  li a {
    font-size: 1.5rem;
  }

  .contact-info,
  h4 {
    font-size: 2rem;
  }

  .social a {
    font-size: 2rem;
    margin-right: 20px;
  }

  .contact-info address {
    font-size: 1.5rem;
  }

  .btn {
    padding: 10px 40px;
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 768px) {

  /* ---------------------------------------- Basics ---------------------------------------- */
  h1 {
    font-size: 5rem;
  }

  h2 {
    width: 90%;
    margin: 0 auto;
    font-size: 3rem;
  }

  p {
    font-size: 1.5rem;
    line-height: 2.5rem;
  }

  .container {
    padding-top: 40px;
  }

  /* ---------------------------------------- Header ---------------------------------------- */
  .logo {
    font-size: 8rem;
  }

  .arrow {
    font-size: 3rem;
  }

  /* ---------------------------------------- About me ---------------------------------------- */
  .about-me-container {
    flex-basis: 90%;
  }

  .about-me-container>img {
    width: 30%;
    margin: 40px auto;
  }

  .about-me-container>p {
    width: 90%;
    padding-bottom: 40px;
  }

  /* ---------------------------------------- Skills ---------------------------------------- */
  .skills-container {
    width: 90%;
    margin-top: 40px;
  }

  .skill {
    padding-bottom: 40px;
    font-size: 10rem;
  }

  span.label {
    font-size: 2rem;
  }

  /* ---------------------------------------- Portfolio ---------------------------------------- */
  .portfolio-container {
    width: 90%;
    margin-top: 40px;
    justify-content: center;
  }

  .project {
    flex-basis: 80%;
  }

  /* ---------------------------------------- Footer ---------------------------------------- */
  #footer {
    margin-top: 50px;
    padding-top: 40px;
  }

  .footer-container {
    width: 90%;
  }

  .contact-info {
    margin-left: auto;
    margin-right: 10px;
  }

  nav {
    flex-basis: 20%;
    margin-left: 10px;
  }

  form {
    flex-basis: 100%;
    order: -1;
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 480px) {

  /* ---------------------------------------- Basics ---------------------------------------- */
  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  .container {
    padding-top: 30px;
  }

  /* ---------------------------------------- About me ---------------------------------------- */
  .about-me-container>img {
    margin: 30px auto;
  }

  .about-me-container>p {
    padding-bottom: 30px;
  }

  /* ---------------------------------------- Skills ---------------------------------------- */
  .skills-container {
    margin-top: 30px;
  }

  .skill {
    flex-basis: 50%;
    padding-bottom: 30px;
    font-size: 10rem;
  }

  .skill:nth-last-child(1) {
    flex-grow: 1;
  }

  span.label {
    font-size: 2rem;
  }

  /* ---------------------------------------- Portfolio ---------------------------------------- */
  .portfolio-container {
    margin-top: 30px;
  }

  .project {
    flex-basis: 100%;
  }
}

@media screen and (max-width: 360px) {

  /* ---------------------------------------- Basics ---------------------------------------- */
  h1 {
    font-size: 3rem;
  }

  /* ---------------------------------------- Header ---------------------------------------- */
  .logo {
    font-size: 7rem;
  }

  /* ---------------------------------------- Skills ---------------------------------------- */
  .skill {
    flex-basis: 100%;
    font-size: 12rem;
  }

  span.label {
    font-size: 2rem;
  }
}

@media screen and (max-width: 812px) and (orientation: landscape) {

  /* ---------------------------------------- Basics ---------------------------------------- */
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 3rem;
  }

  p {
    font-size: 1.5rem;
    line-height: 2.5rem;
  }

  .container {
    padding-top: 40px;
  }

  /* ---------------------------------------- Header ---------------------------------------- */
  .logo {
    font-size: 6rem;
  }

  .next-section-info {
    padding-bottom: 20px;
  }

  .next-section-info>p {
    line-height: normal;
  }

  .arrow {
    font-size: 3rem;
  }

  /* ---------------------------------------- About me ---------------------------------------- */
  .about-me-container {
    flex-basis: 90%;
  }

  .about-me-container>img {
    width: 30%;
    margin: 40px auto;
  }

  .about-me-container>p {
    width: 90%;
    padding-bottom: 40px;
  }

  /* ---------------------------------------- Skills ---------------------------------------- */
  .skills-container {
    width: 90%;
    margin-top: 40px;
  }

  .skill {
    padding-bottom: 40px;
    font-size: 10rem;
  }

  span.label {
    font-size: 2rem;
  }

  /* ---------------------------------------- Portfolio ---------------------------------------- */
  .portfolio-container {
    width: 90%;
    margin: 40px auto 0 auto;
    justify-content: center;
  }

  .project {
    flex-basis: 80%;
  }

  /* ---------------------------------------- Footer ---------------------------------------- */
  #footer {
    margin-top: 50px;
    padding-top: 40px;
  }

  .footer-container {
    width: 90%;
  }

  .contact-info {
    margin-left: auto;
    margin-right: 10px;
  }

  nav {
    flex-basis: 20%;
    margin-left: 10px;
  }

  form {
    flex-basis: 100%;
    order: -1;
    margin-bottom: 40px;
  }
}