@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url("/assets/header-c3c232b0.css");
@import url("/assets/sidebar-eaf7778a.css");
@import url("/assets/links-26fee4dd.css");
@import url("/assets/radio-c2a2a910.css");
@import url("/assets/trix-32c81550.css");
@import url("/assets/buttons-a4ee9e58.css");
@import url("/assets/flash_cards-42e6926f.css");
@import url("/assets/quizzes-91a4d3b9.css");
@import url("/assets/recording-0f034786.css");
@import url("/assets/recording_preferences-b62baae7.css");
@import url("/assets/tour-3a14fed7.css");
@import url("/assets/scrollbar-a4a5074b.css");
@import url("/assets/ai_tutor-3169eca7.css");
@import url("/assets/brainrots-0733cbbe.css");

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

@layer utilities {
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .container {
      max-width: 100% !important;
      width: 100% !important;
    }
  }
}

summary::-webkit-details-marker {
  display: none;
}

a.disabled {
  @apply cursor-not-allowed bg-gray-400 dark:bg-haiti-600 !important;
}

@layer base {
  .wrapper {
    @apply px-2;
  }
  .section {
    @apply rounded-[2rem] bg-white p-6 dark:bg-zeus-700;
  }

  .section-sm {
    @apply p-4;
  }

  .section-background {
    @apply bg-stone-100 dark:bg-zeus-700 cloudy:bg-coffee-300;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(60px);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(130px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

/* main {
  view-transition-name: main;
} */

.vignette {
  mask-image: radial-gradient(rgb(255, 255, 255) 30%, transparent 70%);
}

.vignette-s {
  mask-image: radial-gradient(rgb(255, 255, 255) 30%, transparent 90%);
}

.vignette-l {
  mask-image: radial-gradient(rgb(255, 255, 255) 0%, transparent 70%);
}

/* ::view-transition-old(main) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(main) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
} */