/* ALL ABOUT PUSHING PPL's BUTTONS */

@layer base.buttons {

   section>button,
   div>button {
      max-width: 40%;
      min-width: 5%;
   }

   .btn {
      background-color: var(--moss-green);
      border: none;
      color: var(--color-black);
      font: normal var(--fs-sm)/var(--lh-body) var(--fontt);
      padding: 0.75rem 1.5rem;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
   }

   .btn:hover {
      background-color: transparent;
      color: var(--moss-green);
      border: 2px solid var(--color-accent);
   }

   @media (max-width: 37.5rem) {
      .btn {
         max-width: 180px;
         max-height: 50px;
         margin: 0 auto;
      }
   }

}