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

html,
body {
  @apply bg-denim-100 text-denim-700 font-open-sans overflow-x-hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

html[data-full], html[data-full] body {
  overscroll-behavior-y: none;
}

#root {
  padding: 0.05px;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}

body[data-no-select] {
  user-select: none;
}

.roll {
  animation: roll 1s;
}

@keyframes roll {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.line-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

google-cast-launcher {
  @apply pointer-events-auto m-2 text-white flex items-center justify-center p-2;
  @apply transition-[background-color,transform] duration-100 rounded-full bg-denim-600 bg-opacity-0 hover:bg-opacity-50 active:bg-denim-500 active:bg-opacity-100 active:scale-110;
}