/* || Footer */
footer {
  margin: 2vw -1.8vw 0 -1.8vw;
  background-color: var(--inbetween-blue);
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.footerBar ul {
  list-style: none;
  display: flex;
  padding-left: 0;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 20px;
}

.footerBar ul > li {
  width: 80px;
  height: 68px;
  margin: 20px;
}

.footerBar ul li:last-child {
  width: 68px;
}

.footerBar ul img {
  max-width: 100%;
  filter: grayscale(1);
  transition: all 0.2s;
}

.footerBar li:hover img {
  filter: grayscale(0);
}

footer .credits {
  border-radius: 0 50px 0 0;
  position: absolute;
  color: #97bf7a;
  bottom: 0;
  left: 0;
  background-color: #202020;
  margin: 0;
  padding: 15px;
  text-align: center;

  transition: all 0.2s;
}

.credits a {
  font-size: 1rem;
  transition: all 0.2s;
}

.credits a:link,
.credits a:visited {
  color: #97bf7a;
}

.credits a:hover {
  font-size: 1.2rem;
}

.credits a:hover::after {
  content: "👋🏼😄";
}

.credits a:active {
  color: white;
}

footer .credits:hover {
  padding: 30px;
  border-radius: 0 30px 0 0;
}

footer > p:last-child {
  border-radius: 50px 0 0 0;
  position: absolute;
  color: white;
  bottom: 0;
  right: 0;
  background-color: black;
  margin: 0;
  padding: 20px;

  transition: all 0.2s;
}

footer > p:last-child:hover {
  padding: 30px;
  border-radius: 30px 0 0 0;
}

footer h2,
footer h3 {
  margin-bottom: 0;
}

footer h2 {
  font-size: calc(2vw + 2vh);
  color: var(--inbetween-yellow);
}

footer h2 span {
  font-family: Brandon, sans-serif;
}

footer h3 {
  font-size: calc(1.5vw + 1.5vh);
  color: var(--inbetween-yellow);
}

@media screen and (max-width: 990px) {
  .footerBar ul img {
    filter: grayscale(0);
  }
  footer {
    height: 50vh;
  }
}