/* Header */
header {
  margin-top: var(--space-sides);
  margin-bottom: var(--space-medium);
  width: 100%;

  .header-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    svg {
      fill: var(--neutral-950);
    }
  }

  #sidebar {
    padding-top: 25px;
    padding-bottom: 25px;
    width: 100%;
    height: 100dvh;
    z-index: 99;
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    transition: 0.3s ease-out;
    background-color: var(--neutral-50);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &:target {
      transform: translateY(0);
    }

    .sidebar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: var(--space-medium);

      ul li {
        margin: auto;
      }
    }
    .sidebar-footer {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}

/* Page title */
.page-title {
  margin-bottom: var(--space-sections);

  .page-title-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-tiny);

    h1 {
      width: 80%;
    }

    p {
    }
  }

  .plus-icon {
    display: block;
    text-align: right;
    font-size: 5em;
    font-weight: 500;
    opacity: 50%;
    /* color: var(--primary-color); */
  }
}

/* Footer */
footer {
  margin-bottom: var(--space-sides);

  .footer-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
  }

  .footer-menus {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);

    .footer-col-01,
    .footer-col-02 {
      padding: 0;
    }
  }

  .footer-cta {
    width: fit-content;
    margin: auto;

    span {
      font-size: 5rem;
      font-weight: 500;
      color: var(--neutral-950);
      svg {
        width: 1.5em;
        height: 1.5em;
        transform: rotate(-40deg);
        fill: currentColor;
      }
    }
  }

  .copyright {
    margin-top: var(--space-sections);
    padding: 0;
    text-align: center;
  }
}