/* footer stuff */
/* https://www.youtube.com/watch?v=RYImAil3lgo */


footer {
  position: relative;
  display: flex;
  justify-content: flex-end;
  justify-content: space-between;
  align-items: center;
  height: 10rem;
  margin-bottom: -1rem;
  padding: 1rem var(--rem-500) 3rem var(--rem-500);
  border-top: 1px solid var(--clr-border);
  background-color: var(--clr-background);
  z-index: 1;
}



footer button, footer p {
  font-size: var(--fs-200);
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;

}

footer button {
  font-weight: 600;
}
footer a {
  margin-right: 4rem;
  font-weight: 200;
  font-size: var(--fs-200);
  
}

footer button:hover {
  color: hsl(from var(--clr-dark) h s l / calc(4 / 7));
  cursor: pointer;
  }

.copyright {
  margin-right: auto;
  width: 100%;
}

.footer__links li a:hover {
  text-decoration: underline;
}

@media (max-width: 1111px) {
  footer {
    margin: 0;
    align-items: flex-start;
  }

}

@media (max-width: 768px) {
  .mobile_footer {
    display: flex;
    flex-direction: column-reverse;
    row-gap: 1rem;
    width: 100%;
  }

  footer a {
    margin-right: auto;
  }
  footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  footer {

  height: 10rem;

  padding: 1rem 0;

  z-index: 1;
}
}