@tailwind base;
@tailwind components;
@tailwind utilities;

.heading-font {
  font-family: "Playfair", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* colors */
.text-primary {
    color: #6e1a95;
}
.text-secondary {

}

.bg-primary {
    background-color: #9159a4;
}

.bg-primary:hover {
    background-color: #6c3f89; 
}
/* CSS for the navbar */

/* starts hamburger menu: changes the three lines to "X" */
.navbar-burger span {
    display: block;
    background-color: #334155;
    height: 2px;
    width: 18px;
    margin: 4px auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .navbar-burger.is-active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  
  .navbar-burger.is-active span:nth-child(2) {
    opacity: 0;
  }
  
  .navbar-burger.is-active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  /* ends hamburger menu: changes the three lines to "X" */
  
.hidden {
    display: none;
  
  }

  /* pagy start */
  .pagy {
    display: flex;
    font-family: sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: #6b7280;
  }
  .pagy > :not([hidden]) ~ :not([hidden]) {
    --space-reverse: 0;
    margin-right: calc(0.25rem * var(--space-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--space-reverse)));
  }
  .pagy a:not(.gap) {
    display: block;
    text-decoration: none;
    border-radius: 0.5rem;
    background-color: #e5e7eb;
    padding: 0.25rem 0.75rem;
    color: inherit;
  }
  .pagy a:not(.gap):hover {
    background-color: #d1d5db;
  }
  .pagy a:not(.gap):not([href]) { /* disabled links */
    cursor: default;
    background-color: #f3f4f6;
    color: #d1d5db;
  }
  .pagy a:not(.gap).current {
    background-color: #9ca3af;
    color: white;
  }
  .pagy label {
    white-space: nowrap;
    display: inline-block;
    border-radius: 0.5rem;
    background-color: #e5e7eb;
    padding: 0.125rem 0.75rem;
  }
  .pagy label input {
    line-height: 1.5rem;
    border-radius: 0.375rem;
    border-style: none;
    background-color: #f3f4f6;
  }
  /* pagy end*  */