@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,600;1,900&family=Lobsterfamily=Roboto&display=swap");
@import url("https://rsms.me/inter/inter.css");
@import url("/fonts/stylesheet.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0");

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

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}
body {
  background-color: black;
}

html {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Open Sans",
    "Helvetica Neue", sans-serif;
  scroll-behavior: smooth;
}

#loginPass::-ms-reveal {
  filter: invert(100%);
}
#search::-webkit-search-cancel-button {
  filter: invert(100%);
}

#loader {
  background-image: linear-gradient(
    to left,
    transparent 40%,
    #b4b4b4 60%,
    transparent
  );
  transform: translateX(0%);
  animation: load 1s linear infinite;
}

.player-wrapper {
  overflow: hidden;
  transform: scale(1.5);
}

.scrollItem {
  height: 9em;
}
.scrollTopItem {
  height: auto;
}

#lang {
}

.scrollNav::-webkit-scrollbar {
  display: none;
}

.movieModal {
  /* Foreground, Background */
  scrollbar-color: #999 #333;
}
.movieModal::-webkit-scrollbar {
  width: 10px; /* Mostly for vertical movieModal */
  height: 10px; /* Mostly for horizontal movieModal */
}
.movieModal::-webkit-scrollbar-thumb {
  /* Foreground */
  background: #999;
}
.movieModal::-webkit-scrollbar-track {
  /* Background */
  background: #333;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}

@media only screen and (max-width: 1920px) {
  .scrollItem {
    height: 9em;
  }
}

@media only screen and (max-width: 1440px) {
  .scrollItem {
    height: 8em;
  }
}

@media only screen and (max-width: 1280px) {
  .scrollItem {
    height: 7em;
  }
}

@media only screen and (max-width: 1024px) {
  .scrollItem {
    height: 5em;
  }
}

@media only screen and (max-width: 980px) {
  .player-wrapper {
    transform: scale(1.6);
  }
  .scrollItem {
    height: 5em;
  }
}

@media only screen and (max-width: 680px) {
  .player-wrapper {
    transform: scale(1.6);
  }
}
@media only screen and (max-width: 380px) {
  .player-wrapper {
    transform: scale(1.4);
  }
}

@media only screen and (max-width: 400px) {
  #hero {
    height: 55vh;
  }
}

@media only screen and (max-width: 380px) {
  #hero {
    height: 65vh;
  }
}

@keyframes load {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
