:root {
  --primary-yellow: #FEE450;
}

/* Set Rubik as the default font for all text */
body {
  font-family: 'Rubik', sans-serif;
}

/* Style hyperlinks to match button color */
a {
  color: #2563eb !important; /* Same blue as bg-blue-600 */
  text-decoration: none !important;
}

a:hover {
  color: #1d4ed8 !important; /* Same blue as bg-blue-700 for hover */
}

/* Custom bullet points using Praatje logo */
.logo-bullets {
  list-style: none;
  padding-left: 0;
}

.logo-bullets li {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
}

.logo-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url('img/praatje_logo_yellow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Custom Tailwind utilities */
.bg-primary-yellow {
  background-color: var(--primary-yellow);
}

.text-primary-yellow {
  color: var(--primary-yellow);
}

.border-primary-yellow {
  border-color: var(--primary-yellow);
}

/* Fade arrow animation styles */
.fade-arrow {
  opacity: 1;
  transition: opacity 0.1s ease-out;
}



.big_underline.gradient span {
  background: linear-gradient(0deg, rgba(255,0,255,0) 0%, rgba(255,0,255,0) 16%, rgba(255,0,255,1) 16%, rgba(255,0,255,1) 41%, rgba(255,0,255,0) 41%) !important;
}

.big_underline.padding span {
  padding: 0 0.5em 0 0.1em !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}