:root {
    --film-purple: #7231FF;
    --film-black: #06060B;
    --film-yellow: #FFC01D;
}

/*Styles des fonds*/
.bg-film-purple {background-color: var(--film-purple);}
.bg-film-black {background-color: var(--film-black);}
.bg-film-yellow {background-color: var(--film-yellow);}

/*Styles des bordures*/
.border-film-purple { border-color: var(--film-purple) !important; }
.border-film-black { border-color: var(--film-black) !important; }
.border-film-yellow { border-color: var(--film-yellow) !important; }

/*Styles des boutons*/
.btn-film-purple {
    background-color: var(--film-purple);
    color: #7231FF;
}

.btn-film-black {
    background-color: var(--film-black);
    color: #FFC01D;
}

.btn-film-yellow {
    background-color: var(--film-yellow);
    color: black;
}
  
.btn-film-purple:hover {
    border: 2px solid var(--film-purple);
    color: #7231FF;
}
.btn-bat-blue:hover {
    border: 2px solid var(--bat-blue);
    color: white;
}
.btn-joker-green:hover {
    border: 2px solid var(--joker-green);
    color: white;
}

/*Styles des textes */
.text-film-purple { color: var(--film-purple) !important; }
.text-film-black { color: var(--film-black) !important; }
.text-film-yellow { color: var(--film-yellow) !important; }

/* Styles pour les headers de card */
.card-header-film-purple {
    background-color: var(--film-purple);
    color: white;
    border-bottom: 2px solid var(--film-purple);
}

.card-header-film-black {
    background-color: var(--film-black);
    color: var(--film-yellow);
    border-bottom: 2px solid var(--film-black);
}

.card-header-film-yellow {
    background-color: var(--film-yellow);
    color: black;
    border-bottom: 2px solid var(--film-yellow);
}

.link-hoover {
    text-decoration: none;
}

.link-hoover:hover {
    text-decoration: underline;
}

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

main {
    grid-row: 2;
}

.film-poster {
    width: 300px !important;
    height: 450px !important;
    object-fit: cover !important;
    margin: 0 auto !important;
    display: block !important;
}