plebdevs/src/styles/globals.css

@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

body {
  @apply font-blinker;
}

h1 {
  @apply text-h1 font-blinker;
}

h2 {
  @apply text-h2 font-blinker;
}

h3 {
  @apply text-h3 font-blinker;
}

.p-tabmenu .p-tabmenu-nav {
  background-color: transparent !important;
  border: none !important;
}

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
  background-color: transparent !important;
  border: none !important;
}

.p-menubar-button .p-icon {
  display: none !important;
}

.p-button .pi.pi-bolt {
  color: yellow;
}

/* hero banner animation */
@keyframes flip {
  0%, 100% {
    transform: rotateX(0);
    opacity: 1;
  }
  45%, 60% { /* Adjusted for quicker opacity transition */
    transform: rotateX(180deg);
    opacity: 0;
  }
}

.flip-enter-active, .flip-exit-active {
  animation-name: flip;
  animation-duration: 800ms; /* Keep as is for smooth transition */
  animation-timing-function: ease-in-out;
  transform-origin: center center;
  animation-fill-mode: forwards; /* Ensures the end state of the animation is retained */
}

/* YT thumbnails */
.markdown-content iframe {
  max-width: 100vw;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}