@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@import '@fontsource/atkinson-hyperlegible';
@import '@fontsource/jersey-15';

@font-face {
  font-family: 'Daydream New';
  font-display: swap;
  src: url('/fonts/serif.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Daydream New';
  font-display: swap;
  src: url('/fonts/serif-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@theme {
  --font-sans: 'Atkinson Hyperlegible', ui-sans-serif, sans-serif;
  --font-serif: 'Daydream New', ui-serif, serif;
  --font-pixel: 'Jersey 15', monospace;
  --color-gradient-daydream: linear-gradient(to bottom, #487DAB, #3F709A);
  --color-daydream: #44DBC8;
  --color-daydream-hover: #3CC2AF;
  --color-dark: #4477A3;
  --color-light: #FCF7C4;
  --color-pink: #E472AB;
  --color-pink-dark: #A65A80;
  --color-pink-strong: #e64596;
}

.prose {
  --tw-prose-body: #15314a;
  --tw-prose-headings: #214769;
  --prose-border: rgba(47, 94, 136, 0.5);
  --tw-prose-links: var(--color-pink-strong);
  --tw-prose-bold: var(--tw-prose-body);
  --tw-prose-td-borders: var(--prose-border);
  --tw-prose-th-borders: var(--prose-border);
  --tw-prose-bullets: var(--color-pink)
}
.prose h1 {
  color: #2f5e88;
  position: relative;
  width: fit-content;
}
.prose h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5%;
  right: -5%;
  background: url(/underline.svg) no-repeat center;
  background-size: cover;
  height: 8px;
  z-index: -1;
}
.prose code::before, .prose code::after {
  display: none
}
.prose :not(.shiki) code {
  font-weight: normal;
  font-size: 0.89rem;
  background: #ffffff;
  padding: 0.5em 0.6rem;
  border-radius: 0.375rem;
  white-space: nowrap;
}
.prose blockquote p::before, .prose blockquote p::after {
  display: none;
}
.prose blockquote {
  font-style: normal;
  opacity: 0.7;
  border-color: var(--prose-border);
}

/* for the guide */
.notebook {
  @apply bg-white bg-clip-padding p-8 mt-8;
  border-top: 64px solid transparent;
  border-image: url('/guide/notebook-border.png') 72 round;
}
@media (width < 750px) or (1024px < width < 1250px) {
  .scroll-table {
    border: 1px solid var(--prose-border);
    border-radius: 4px;
    padding-inline: 1rem;
  }
}


@keyframes hover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(var(--hover));
  }
}

.animate-hover {
  --hover: -0.5rem;
  animation: hover 2s ease-in-out infinite alternate;
}