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;
  background-color: #201c24;
}

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

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

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

p {
  @apply font-blinker;
}

div {
  @apply 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;
}

.p-overlaypanel-content {
  width: 100% !important;
  height: 100% !important;
}

.p-dropdown-items-wrapper {
  max-width: 80vw !important;
  max-height: 400px !important;
}

/* 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;
}

/* Hide scrollbars globally (need to be cautious with this approach) */
.p-tabmenu .p-tabmenu-nav {
  overflow-x: auto;
  scrollbar-width: none;
}

.p-tabmenu .p-tabmenu-nav::-webkit-scrollbar {
  display: none;
}

.w-md-editor-toolbar button > * {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

/* MarkdownDisplay styles */
pre {
  background-color: #1e1e1e;
  color: #d4d4d4;
  padding: 1em;
  border-radius: 5px;
  overflow-x: auto;
}

code {
  font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
  color: #569cd6;
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
  color: #ce9178;
}

@layer base {
  :root {
    --radius: 0.5rem;
  }
}

/* hide attribution */
div.react-flow__attribution {
  display: none !important;
}