/*https://lucide.dev/icons/*/
/*https://codesandbox.io/p/sandbox/dp47s3?file=%2Findex.html%3A54%2C17*/
/*Colors
Black neutral-950 #0A0A0A
Gray  neutral-500 #737373
Gray  neutral-400 #A3A3A3
Gray  neutral-200 #E5E5E5
Red   red-600     #DC2626
Red   red-500     #EF4444
Red   red-900     #7F1D1D
*/

@font-face {
  font-family: 'ethnocentric';
  src: url('./fonts/EthnocentricRg.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.font-ethnocentric {
  font-family: 'ethnocentric', sans-serif;
}

@font-face {
  font-family: 'coolvetica';
  src: url('./fonts/CoolveticaRg.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.font-coolvetica {
  font-family: 'coolvetica', sans-serif;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
  animation-delay: 1s;
}

/*tried to make delays for each number but it's not working cause java script only loads the shits after Ay what if i hang myself*/
.fade-in-days {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
  animation-delay: 1.5s; 
}

.fade-in-hours {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
  animation-delay: 1.7s; 
}

.fade-in-minutes {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
  animation-delay: 1.9s; 
}

.fade-in-seconds {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
  animation-delay: 2.1s; 
}
@keyframes fadeIn {
  from {
    opacity: 0;

  }
  to {
    opacity: 1;

  }
}


@keyframes infinite-scroll-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(-200%);
  }
}

.infinite-scroll-left {
  animation: infinite-scroll-left 25s linear infinite;
}

@keyframes infinite-scroll-right {
  from {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(-100%);
  }
}

.infinite-scroll-right {
  animation: infinite-scroll-right 25s linear infinite;
}

.menu-btn {
  margin-left: 1rem; /* ml-4 */
  display: inline-block;
  transform: skewX(-9deg); /* -skew-x-9 */
  padding: 0.25rem 0.25rem; /* px-1 py-1 */
  color: white;
  cursor: pointer;
  background: linear-gradient(135deg, #dc2626, #7f1d1d); /* approximate from-red-600 to-red-900 */
  border-radius: 0; /* adjust if needed */
}