body {
    font-family: 'Andika', sans-serif;
  }
  
  h1, h2, h3, h4 {
    font-family: 'Amaranth', sans-serif;
  }
  
  :root {
    --primary-color: #813191; /* Purple */
    --secondary-color: #201446; /* Dark blue */
    --dark-color: #1d1d27; /* Dark background */
    --light-color: #ffffff; /* Light text color */
  }
  
  a { /* Style all links */
    @apply text-primary-color transition-colors duration-300; /* Default link color (purple) */
  }
  
  a:hover {
    @apply text-secondary-color; /* Hover color (dark blue) */
  }
  
  a:active { 
    @apply text-secondary-color; /* Active color (dark blue) */
  }
  
  /* Navigation styles */
  .sidebar {
    @apply bg-[#201446] text-white; /* Dark blue background, white text */
    width: 280px;
    transition: all 0.3s ease;
  }
  
  .sidebar h2 { /* Sidebar heading */
    @apply text-white; /* White text */
    font-size: 1.5rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  #tab-buttons {
    padding: 1rem 0;
  }
  
  .tab-button {
    @apply text-white; /* White text */
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
  }
  
  .tab-button:hover {
    @apply bg-gray-800; /* Darker gray background on hover */
    border-left-color: var(--primary-color);
  }
  
  .tab-button.active {
    @apply bg-gray-900; /* Darkest gray background for active tab */
    border-left-color: var(--primary-color);
  }
  
  .tab-button .material-icons {
    margin-right: 0.75rem;
    font-size: 1.25rem;
  }
  
  .tab-button-text {
    font-family: 'Amaranth', sans-serif;
    font-size: 1rem;
  }
  
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .sidebar {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        height: auto;
    }
  
    #tab-buttons {
        display: flex;
        overflow-x: auto;
        padding: 0.5rem;
    }
  
    .tab-button {
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        border-left: none;
        border-bottom: 4px solid transparent;
    }
  
    .tab-button:hover,
    .tab-button.active {
        border-left-color: transparent;
        border-bottom-color: var(--primary-color);
    }
  
    .tab-button .material-icons {
        margin-right: 0;
        margin-bottom: 0.25rem;
    }
  
    .tab-button-text {
        font-size: 0.75rem;
        text-align: center;
    }
  }
  
  .decision-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .decision-button {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    font-weight: bold;
    transition: all 0.3s ease;
    text-align: left;
  }
  
  .decision-button[data-feedback-type="negative"] {
    background-color: #e53e3e;
    color: white;
  }
  
  .decision-button[data-feedback-type="neutral"] {
    background-color: #ed8936;
    color: white;
  }
  
  .decision-button[data-feedback-type="positive"] {
    background-color: #38a169;
    color: white;
  }
  
  .decision-button[data-feedback-type="blue"] {
    background-color: #813191;
    color: white;
  }
  
  .decision-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .decision-button.active {
    @apply border-[#201446] text-[#813191];
  }
  
  @media (min-width: 768px) {
    .decision-buttons {
        flex-direction: column;
    }
  
    .decision-button {
        flex: 1;
    }
  }
  
  .feedback-badge { 
    @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset;
  }
  
  .feedback-badge-negative {
    @apply bg-red-50 text-red-700 ring-red-600/10;
  }
  
  .feedback-badge-neutral {
    @apply bg-yellow-50 text-yellow-800 ring-yellow-600/20; 
  }
  
  .feedback-badge-positive {
    @apply bg-green-50 text-green-700 ring-green-600/20;
  }
  
  .feedback-badge-other {
    @apply bg-blue-50 text-blue-700 ring-blue-700/10; 
  }
  
  /* CodePen Menu Styles */
  html {
      box-sizing: border-box;
      --bgColorMenu: #0099B8;  /* Updated menu background color */
      --duration: 0.7s;    
  }
  
  html *,
  html *::before,
  html *::after {
      box-sizing: inherit;
  }
  
  body{
      margin: 0;
      display: block; /* Changed to block for layout */
      background-color: #dfdeddd0;
      -webkit-tap-highlight-color: transparent;
      transition: background-color var(--duration);
  }
  
  .menu {
    margin: 0;
    display: flex;
    width: 100%; 
    font-size: 1.5em;
    padding: 0 2.85em;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
    @apply rounded-b-lg; /* Add rounded bottom corners */

}
  .menu__item{
      all: unset;
      flex-grow: 1;
      z-index: 100;
      display: flex;
      cursor: pointer;
      position: relative;
      border-radius: 50%;
      align-items: center;
      will-change: transform;
      justify-content: center;
      padding: 0.55em 0 0.85em;
      transition: transform var(--timeOut , var(--duration));
      flex-direction: column;  /* Stack icon and text vertically */
  }
  .menu-text {  /* Style for the menu text */
    font-size: 15px;    /* Adjust font size as needed */
    color: rgb(15, 14, 14);         /* White text */
    font-weight: bold;
    line-height: 1.2;     /* Adjust line height for better readability */
    text-align: center;   /* Center the text */
}
  
  .menu__item::before{
      content: "";
      z-index: -1;
      width: 4.2em;
      height: 4.2em;
      border-radius: 50%;
      position: absolute;
      transform: scale(0);
      transition: background-color var(--duration), transform var(--duration); 
  }
  
  .menu__item.active {
      transform: translate3d(0, -.8em , 0);
  }
  
  .menu__item.active::before{ 

  }
  
  .icon{         
      width: 2.6em;
      height: 2.6em;
      stroke: white; /* Set icon color to white */
      fill: transparent;
      stroke-width: 1pt;
      stroke-miterlimit: 10;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 400; 
  }
  
  .menu__item.active .icon {
      animation: strok 1.5s reverse;   
  }
  
  @keyframes strok {
      100% {
          stroke-dashoffset: 400;
      }
  }
  .menu__border{
      left: 0;
      bottom: 99%;
      width: 10.9em;
      height: 2.4em;
      position: absolute;
      clip-path: url(#menu);
      will-change: transform;
      background-color: var(--bgColorMenu);
      transition: transform var(--timeOut , var(--duration));  
  }
  
  .svg-container {
      width: 0;
      height: 0;
  }
  
  @media screen and (max-width: 50em) {
      .menu{
          font-size: .8em;
      }
  }

  footer {
    @apply bg-gray-200 p-4 mt-12 rounded-lg border border-solid border-purple-600 drop-shadow-xl;
    text-align: center; /* Center the text content */
}

footer .grid {
    grid-template-columns: 1fr 2fr 1fr; /* Create three columns */
    gap: 2rem;
}

footer img {
    /* Adjust height as needed */
    @apply h-12;
}