/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap'); */
/* black, bold, regular */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");

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

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
/* .hero * {
  transition: color .2s, background-color .2s;
} */
@layer utilities {
  .scroll-snap-none {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x mandatory;
  }
  .scroll-snap-y {
    scroll-snap-type: y mandatory;
  }
  .scroll-snap-start {
    scroll-snap-align: start;
  }
  .scroll-padding-6 {
    scroll-padding: theme("spacing.6");
  }
  .cursor-zoom-in {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }
  .cursor-zoom-out {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
  }
  @supports (backdrop-filter: none) {
    .blurred-or-opaque-bg-1 {
      @apply bg-opacity-50 backdrop-filter backdrop-blur-lg;
    }
    .blurred-or-opaque-bg-2 {
      @apply bg-opacity-60 backdrop-filter backdrop-blur;
    }
  }
  @supports not (backdrop-filter: none) {
    .blurred-or-opaque-bg-1 {
      @apply bg-opacity-60;
    }
    .blurred-or-opaque-bg-2 {
      @apply bg-opacity-70;
    }
  }
  .cool-border-big {
    border: 1px solid rgb(var(--dark-vibrant));
    background: rgb(var(--light-vibrant));
    box-shadow: 10px 10px 0px 0px rgb(var(--dark-vibrant));
  }
  .cool-border-small {
    color: rgb(var(--dark-vibrant));
    border: 1px solid rgb(var(--dark-vibrant));
    background: rgb(var(--light-vibrant));
    box-shadow: 3px 3px 0px 0px rgb(var(--dark-vibrant));
  }
  .cool-border-small:hover {
    box-shadow: 6px 6px 0px 0px rgb(var(--dark-vibrant));
  }
  .cool-border-small-light {
    border: 1px solid rgb(var(--light-vibrant));
    box-shadow: 3px 3px 0px 0px rgb(var(--light-vibrant));
  }
  .text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    & kbd {
      text-shadow: none;
    }
  }
  .text-outline {
    text-shadow: -1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff,
      -1px -1px 0 #fff;
  }
  .gradient {
    background-image: linear-gradient(
      180deg,
      hsla(0deg, 0%, 0%, 0%) 95%,
      hsla(0deg, 0%, 0%, 10%) 100%
    );
  }
}

body {
  @apply bg-gray-100;
  overflow: auto;
  /* @apply bg-black; */
  /* @apply text-white; */
}

h1 {
  @apply text-2xl;
}
h2 {
  @apply text-xl;
}
h3 {
  @apply text-lg;
}
a {
  @apply text-blue-600;
}

kbd {
  @apply bg-gray-300 text-black border border-gray-700 rounded p-1;
}

button {
  @apply cursor-auto;
}