/* Footer CSS */

/* - */

#footer {
  background-color: green;
  padding: 48px 0 16px;
}

#footer-content {
  background-color: #222;
  display: grid;

  padding: 32px 16px;

  grid-gap: 32px;
}

@media (min-width: 768px) {
  #footer-content {
    grid-template-columns: repeat(3, auto);
  }
}

#footer-content .element {
  justify-self: center;
  width: 80%;
  justify-content: start;
  align-content: start;
}

@media (min-width: 768px) {
  #footer-content .element {
    width: 100%;
    justify-content: center;
    border-left: dashed #595959 1px;
  }
}

#footer-content .element:first-of-type {
  border: none;
}

/* - */

.footer-title-container {
  display: grid;
  grid-template-columns: max-content auto;
}

/* - */

#footer-content p,
#footer-content a {
  color: #e8ebec;
  text-decoration: none;
}

.footer-icon {
  background-color: green;
  justify-self: start;
  transition: background-color ease 0.2s;
  width: 32px;
  grid-row: 1;

  align-self: center;
  margin-right: 8px;
}

.footer-icon:hover {
  background-color: #fff;
  cursor: pointer;
}

.footer-txt {
  grid-row: 2;
  grid-column: 1 / span 2;
  justify-self: start;
}

.footer-title {
  grid-row: 1;
  height: 24px;
  align-self: center;
  color: green;
}

/* - */

#bottom-bar {
  background-color: #222;
  padding: 16px 0;
}

#bottom-bar p {
  color: #b0b0b0;
}

#bottom-bar a {
  text-decoration: none;
  color: green;
}

#bottom-bar .container {
  justify-self: center;
  align-self: center;
}

/* - */