/* app/globals.css */

@import "tailwindcss";

@layer base {

  html,
  body {
    line-height: normal;
  }
}

@font-face {
  font-family: 'Beachday';
  src: url('/fonts/Beachday.woff2') format('woff2'),
    url('/fonts/Beachday.woff') format('woff'),
    url('/fonts/Beachday.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 1. Add your exact keyframes from the old site */
@keyframes animateright {
  from {
    right: -300px;
    opacity: 0;
  }

  to {
    right: 0;
    opacity: 1;
  }
}

/* 2. Create a custom class to apply it */
.player-animation {
  position: relative;
  animation: animateright 1.5s;
}

:root {
  --font-beachday: 'Beachday', sans-serif;
  --font-sans: var(--font-montserrat), sans-serif;
}