footer {
  font-size: 14px;
  margin: 172px 0 0 0 0;
  height: 100vh;
  /* max-width: 100vw; */
  width: 100%;
  position: relative;
  z-index: 3;
  background-color: var(--offwhite);
}

footer h5 {
  text-transform: uppercase;
  position: relative;
  display: inline-block;
}

section.Boilerplate {
  padding-top: 256px;

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}

div.Square {
  width: 14px;
  height: 14px;
  background-color: var(--orange);

  grid-column-start: 1;
  grid-column-end: 2;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

div.Square {
  width: 14px;
  height: 14px;
  background-color: var(--orange);
  animation: blink 1s infinite steps(1);
}

div.links {
  grid-column-start: 2;
  grid-column-end: 4;
}

div.skills {
  grid-column-start: 4;
  grid-column-end: 6;
}

div.about {
  grid-column-start: 8;
  grid-column-end: 12;
}

div.about p {
  font-family: 'FT System Blank Book';
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 16px 0;
}

div.about h5.copyright {
  color: var(--grey-7);
}

div.links h5 a {
  color: var(--dark-color);
}

section.logo {
  width: 100%; /* Make the logo span the entire width of the footer */
  display: flex;
  justify-content: center; /* Center the logo horizontally */
  align-items: flex-end; /* Align the logo to the bottom of the footer */
  position: absolute;
  bottom: 10px;
  transform: translate(-50%, 0%);
  left: 50%;

  opacity: 20%;
}

footer h5.instagram::before,
footer h5.arena::before,
footer h5.linkedin::before,
footer h5.email::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--orange);
  z-index: -2;
  transition: width 0.3s ease;
}

footer h5.instagram:hover::before,
footer h5.arena:hover::before,
footer h5.linkedin:hover::before,
footer h5.email:hover::before {
  width: 100%;
}

footer h5.instagram:hover::before,
footer h5.arena:hover::before,
footer h5.linkedin:hover::before,
footer h5.email:hover::before {
  animation: slideIn 0.3s forwards;
}

footer div.links span img {
  width: 12px;
  height: 12px;
  rotate: -45deg;
}

section.breaker {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  margin: 144px 0 0 0; /* Adjust as needed */
  position: relative;
}

/* Container for plus icons */
.plus-container {
  grid-column: 2 / -2; /* Span the entire width of the grid */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  position: relative;
}

/* Plus icons styling */
.plus {
  width: 12px;
  height: 12px;
  position: absolute;
  color: var(--light-color);
}

/* .plus:nth-child(1) { */
  /* left: calc((100% / 12) * 1 - 6px); Adjust to place in the middle of gutter */
/* } */

.plus:nth-child(2) {
  left: 50%; /* Center of the grid */
  transform: translateX(-50%);
}

.plus:nth-child(3) {
  left: calc(
    (100% / 12) * 11 + (100% / 12) / 2 - 6px
  ); /* Adjust to place in the middle of gutter */
}

.jump {
  position: absolute;
  margin: 144px auto 0 auto;
  text-align: center;
  width: 100%;
}

.jump a {
  color: var(--dark-color);
}

@media (max-width: 860px) {
  section.Boilerplate {
    grid-template-columns: repeat(6, 1fr); /* Adjust grid columns for header */
    padding: 64px 0 0 0;
  }

  div.Square {
    grid-column-start: 1;
    grid-column-end: 7;
    margin: 0 0 32px 0;
  }
  div.links {
    grid-column-start: 1;
    grid-column-end: 3;
    margin: 0 0 32px 0;
  }
  div.skills {
    grid-column-start: 4;
    grid-column-end: 7;
  }
  div.about {
    grid-column-start: 1;
    grid-column-end: 7;
  }

  section.breaker {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 5px;
    margin: 54px 0 0 0; /* Adjust as needed */
  }

  .plus-container {
    grid-column: 1 / -1; /* Span the entire width of the grid */
    grid-template-columns: repeat(6, 1fr);
  }
  .jump {
    margin: 128px auto 0 auto;
  }
}

@media (max-width: 640px) {
  footer {
    font-size: 14px;
  }
  .jump {
    margin: 64px auto 0 auto;
  }

}

@media (max-width: 460px) {
  section.logo {
    width: 98%;
  }
}