@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url("/assets/header-bce233dd.css");
@import url("/assets/sidebar-eaf7778a.css");
@import url("/assets/links-4f068461.css");
@import url("/assets/radio-c2a2a910.css");
@import url("/assets/trix-5cd36368.css");
@import url("/assets/buttons-0723fa1e.css");
@import url("/assets/flash_cards-79feb3a6.css");
@import url("/assets/quizzes-f03f05aa.css");
@import url("/assets/recording-020e0c0d.css");
@import url("/assets/recording_preferences-8c86c902.css");
@import url("/assets/tour-23b3815c.css");

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

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-haiti-900;
  }

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

@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;
}