header.flex {
  color: var(--white);
  padding-block: 0.6rem;

  & .fa-solid {
    color: var(--white);
  }

  & .sign-in:hover,
  & .register:hover {
    border: 1px solid rgb(152, 154, 189);
    padding: 0.5rem 1.1rem;
  }

  & .cart:hover {
    border: 1px solid rgb(152, 154, 189);
    padding: 0.5rem 1.1rem 0.5rem 0.7rem;
  }

  & .logo:hover {
    scale: 0.95;
  }
}

body {
  background-color: var(--footer-bg);
  color: var(--white);
  text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
  & .main1 {
    max-width: 500px;
    margin-inline: auto;
    text-align: left;
    & .main-form {
      & .userifo {
        & input {
          width: 30rem;
          height: 2rem;
          border-radius: 5px;
          margin-bottom: 0.9rem;
          margin-top: 0.4rem;
          font-size: 17px;
        }
        & label.l1 {
          font-size: 14px;
        }
      }
    }

    & .button {
      all: unset;
      background-color: var(--blue-button);
      color: #fff;
      border-radius: 8px;
      font-size: 1rem;
      display: inline-block;
      transition: 0.2s;
      padding: 8px 13px;
      margin-top: 0.6rem;
    }
    & .button:active {
      scale: 0.9;
    }

    & .button:hover {
      cursor: pointer;
    }
  }
}

@media (width < 500px) {
  body {
    & .main1 {
      & .main-form {
        & .userifo {
          & input {
            width: 20rem;
          }
        }
      }
    }
  }
}

footer {
  background-color: transparent;
}