@layer reset, variables, components, utilities;

@import "./reset.css" layer(reset);
@import "./variables.css" layer(variables);
@import "./utilities.css" layer(utilities);

@import "../component/NavBar/style.css" layer(components);
@import "../component/FilmCard/style.css" layer(components);
@import "../component/FilmInfo/style.css" layer(components);
@import "../component/FilmCategory/style.css" layer(components);

body {
  background-color: var(--color-black);
}

header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-top: 5rem;
  background-color: var(--color-hover-2);
  z-index: 1500;
}