:root {
  --c-footer: #aaa;
  --c-footer-text: #ccc;
  --a-footer-border: 1px solid #111;
}

:root[color-theme=light] {
  --c-footer: #ccc;
  --c-footer-text: #000;
  --a-footer-border: 1px solid #111;
}

:root[color-theme=dark] {
  --c-footer: #10101a;
  --c-footer-text: #fff;
  --a-footer-border: 1px solid #eee;
}

footer {
  width: 100%;
  min-width: 380px;
}

#footer-container {
  min-width: 380px;
  max-width: 2560px;
  margin: 0 auto;
  background-color: var(--c-footer);
  border-top: var(--a-footer-border);
}
#footer-container #footer-contact-icon {
  width: 100%;
  display: flex;
  justify-content: center;
}
#footer-container #footer-contact-icon a {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 30px 50px;
}
#footer-container #footer-contact-icon a img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
#footer-container p {
  margin: 10px 0;
  margin: 10px;
  font-size: 1.5em;
  text-align: center;
  color: var(--c-footer-text);
}

/* ---------- media ---------- */
@media (max-width: 780px) {
  #footer-container {
    height: 170px;
  }
  #footer-container #footer-contact-icon a {
    width: 70px;
    height: 70px;
    margin: 20px 20px;
  }
  #footer-container p {
    font-size: 1em;
    text-align: center;
  }
}
@media (min-width: 780px) and (max-width: 1080px) {
  #footer-container {
    height: 200px;
  }
  #footer-container #footer-contact-icon a {
    width: 90px;
    height: 90px;
    margin: 20px 30px;
  }
  #footer-container p {
    font-size: 1.2em;
    text-align: center;
  }
}
@media (min-width: 1080px) {
  #footer-container {
    height: 300px;
  }
}

/*# sourceMappingURL=footer.css.map */