@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "Manrope";
    src: local("Manrope"), url("assets/fonts/Manrope/Manrope-Variable.ttf");
  }
}

@layer utilities {
  .center {
    @apply flex items-center justify-center;
  }
}

html {
  overflow-x: hidden;
  font-family:
    Manrope,
    Open Sans;
}

#root {
  @apply center h-screen w-screen min-h-0 transitional overflow-x-hidden;
}

.resp-title {
  @apply text-sm xl:text-base xxl:text-lg font-bold;
}

.resp-text {
  @apply text-sm md:text-base xxl:text-xl;
}

.resp-gap {
  @apply gap-2 xxl:gap-4;
}

.resp-btn {
  @apply btn-xs xl:btn-sm xxl:btn-md;
}

.resp-icon {
  @apply size-4 xxl:size-6;
}

.netflix-rating {
  -webkit-text-stroke: 2px oklch(var(--nc));
}

.transitional {
  @apply transition-all duration-300 ease-out;
}

.route-card {
  @apply size-full center p-4 xxl:p-6 text-2xl md:text-3xl font-semibold;
}

/* Bluesky specific */
#bluesky {
  --content-width: 40rem;
  @layer utilities {
    .bluesky-content {
      min-width: var(--content-width);
      width: var(--content-width);
    }
    .bluesky-panel {
      max-width: calc((100vw - var(--content-width)) / 2);
      width: calc((100vw - var(--content-width)) / 2);
    }
  }
}
