new-codex.storage/@global/custom-footer.css

.footer {
  background-image: url(/img/codex.svg);
  background-repeat: no-repeat;
  background-size: auto 325px;
  background-color: var(--dark-10);
  /* padding: var(--padding-section); */
  /* position: fixed;
    bottom: 0px; */
  z-index: 0;
  width: 100%;
  padding: 6em 0;
  position: relative;
  top: 1px;

  &.reveal {
    bottom: 0;
  }

  @media (min-width: 1401px) {
    background-position: center bottom;
  }

  @media (max-width: 1400px) {
    background-position: left bottom;
  }

  > div:first-child {
    max-width: var(--max-width);
    margin: auto;
    padding: var(--padding-section);

    a {
      transition: border-color 0.5s;
      border-bottom: 1px solid transparent;
      display: inline-flex;

      &:hover {
        border-color: var(--green-10);
      }
    }

    > div:first-child {
      display: flex;
      justify-content: space-between;

      @media (max-width: 800px) {
        flex-direction: column;
        gap: 2em;
      }

      span {
        color: var(--light-10);
        font-size: 2em;
        font-weight: 400;
        align-self: flex-start;
        z-index: 1;
      }

      nav {
        z-index: 1;
        position: relative;
      }

      nav:first-child {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      nav + nav {
        margin-top: 3em;

        a {
          margin-right: 3em;
          position: relative;
        }

        a:first-child::after {
          content: "/";
          margin-right: 1.5em;
          margin-left: 1.8em;
          color: var(--grey-10);
          position: absolute;
          right: -45px;
        }
      }

      a {
        font-weight: 600;
        color: var(--light-20);
        line-height: 2em;
        display: inline-block;
        transition: 0.5s color;

        &:hover {
          color: #fff;
        }
      }
    }

    > div:nth-child(2) {
      margin-top: 3em;

      h5 {
        font-size: 2.5em;
        line-height: 1.07em;
        font-weight: 300;
        color: var(--light-10);
        max-width: 350px;
        margin: 0;
        z-index: 1;
        position: relative;

        &::after {
          content: " ";
          border-bottom: 2px solid var(--green-10);
          width: 27px;
          margin-top: 0.5em;
          display: block;
        }
      }

      p {
        color: var(--grey-20);
        z-index: 1;
        position: relative;
      }
    }

    > div:nth-child(3) {
      display: flex;
      justify-content: space-between;
      margin-top: 2em;

      > * {
        position: relative;
        z-index: 1;
      }

      @media (max-width: 800px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
      }

      p,
      a {
        color: var(--light-20);
        margin: 0;
        display: inline-block;
        transition: 0.5s color;

        &:hover {
          color: #fff;
        }
      }

      p:last-child {
        font-size: 1.2em;
        color: var(--light-10);

        u {
          font-weight: bold;
        }
      }
    }
  }

  footer {
    input.error {
      border-color: red;
      color: red;
    }
  }

  canvas {
    position: absolute;
    top: 0;
  }
}