@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/Card/style.css" layer(components);
@import "../component/Desc_card/style.css" layer(components);
@import "../component/MovieCategory/style.css" layer(components);
@import "../component/footer/style.css" layer(components);
@import "../component/Hero/style.css" layer(components);
@import "../component/brands/style.css" layer(components);
@import "../component/footer/style.css" layer(components);


@font-face {
    font-family: 'metropolis';
    src: url('./font/metropolis.otf') format('opentype');
}

body{
    background-color: var(--color-dark);
    font-family: 'metropolis', sans-serif;
}

.movie-category{
    width: 100%;
    background-color: var(--color-dark);
    color: white;
}

#content{
    margin: 0 auto;
}