html {
  font-size: 18px;
}

body {
  font-family: 'Avenir';
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 100%
    ),
    linear-gradient(
      135deg,
      #ebf666 0%,
      rgba(79, 254, 243, 0.57) 25%,
      rgba(109, 41, 197, 0.41) 50%,
      rgba(134, 255, 77, 0.44) 75%,
      rgba(246, 97, 97, 0.56) 100%
    );
  color: #000;
  margin: 0;
  transition: background-color 1.5s ease-in, color .8s;
}

body.main__theme--dark {
  background: #000;
  color: #fff;
  transition: background-color 1s, color 1s;
}

header {
  display: flex;
  justify-content: space-between;
  padding: var(--base-padding);
  padding-bottom: 0 !important;
}

#header__logo {
  cursor: pointer;
}

footer {
  padding: var(--base-padding);
}

#footer__upper {
  display: flex;
  flex-direction: column;
}

#footer__lower {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rem;
}

#footer__upper a {
  font-size: 2.25rem;
}

main {
  padding: var(--base-padding);
}

body a {
  color: #000;
  text-decoration: none;
  font-family: 'Avenir';
  font-weight: 800;
}

body.main__theme--dark a:hover {
  color: #f7b4b4;
}

body.main__theme--dark a,
body a:hover {
  color: #fff;
}

h1, h2 {
  font-family: 'AvenirBold';
  font-size: 2.5rem;
  line-height: 105%; /* 5.90625rem */
  letter-spacing: -0.05rem;
  margin-bottom: 2rem;
}

p {
  line-height: 150%; /* 2.25rem */
  letter-spacing: -0.045rem;
}

@media (min-width: 576px) {
  html {
    font-size: 20px;
  }

  h1, h2 {
    font-size: 2.75rem;
  }

  main,
  header,
  footer {
    padding: var(--small-padding);
    max-width: 1320px;
    margin: 0 auto;
  }


  footer {
    padding-bottom: 1rem;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 22px;
  }

  h1, h2 {
    font-size: 3rem;
  }

  main,
  header,
  footer {
    padding: var(--medium-padding);
  }
}

@media (min-width: 992px) {
  html {
    font-size: 24px;
  }

  h1, h2 {
    font-size: 3.25rem;
  }

  main,
  header,
  footer {
    padding: var(--large-padding);
  }

}

@media (min-width: 1200px) {
  h1, h2 {
    font-size: 3.5rem;
  }

  main,
  header,
  footer {
    padding: var(--xlarge-padding);
  }

}

@media (min-width: 1400px) {
  h1, h2 {
    font-size: 3.75rem;
  }

  main,
  header,
  footer {
    padding: var(--xxlarge-padding);
  }
}