/* 

Anotações:
Cores hexadecimal do site
#ad2f44   ,    #B20710

O " . " no CSS serve pra CLASS e o " # " serve pra ID

*/


/* MENU DE NAVEGAÇÃO */

.ff-logo_grande{ 
    display: block; 
    width: 105px; 
    height: 40px;
} 

.menu-principal{
    background-color: black;
    margin-top: 10px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
} 

.navbar{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.navbar .navbar-nav .nav-link{
    color: white;
}

.navbar .navbar-nav .nav-link:hover{ 
    color: rgb(228, 219, 219);
}

.bg-black{ 
    background-color: black;
}

.dropdown-menu {
    background-color: black;
}

.dropdown-item {
    color: white;
}

.dropdown-item:hover {
    background-color: black;
    color: rgb(228, 219, 219);
}

.navbar-toggler{ 
    background-color: red; 
}


#section_home{
    background: url(../img/fakeflix/ff-logo_grande.png) center; /* Serve para colocar a imagem, o "center" serve para centralizar e o no-repeat; serve para deixar */
    text-align: center;
    color: white;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* CARDs */

.card_titulo, .card-p, .link_card{
    color: white;
    text-decoration: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.cards{
    display: flex; 
    justify-content: center;
    gap: 100px;
    margin: auto;
}    

.cards_home{
    background: rgb(136, 124, 124);
    padding: 15px;
    border-radius: 25px;
    width: 300px;
    text-align: center;
}

.cards_home:hover{
    background-color: rgb(109, 106, 106);
}

.logo_card{
    width: 200px;
    display: flex;
    margin: auto;
}


/* TOP10 */

.color_top{
    color: white;
}

.top_filme, .top1{
    color: white;
    text-align: center;
    background-color: gray;
    border-radius: 10px;
    list-style-position: inside; /* Coloca o número dentro do conteúdo */
}


/* RODAPÉ */


.rodape{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.rodape-div{
    text-align: center;
    border-radius: 20px;
    background-color: rgb(70, 69, 69);
    padding: 28px;
}

.rodape-ul {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
}

.color-rodape {
    color: white; 
}

.links_rodape {
    color: white; 
    text-decoration: none;
    display: inline-block;
}


/* BOTÃO */
button{
    background-color: rgb(177, 81, 81);
    color: whitesmoke;
    text-decoration: none;
    width: 200px;
}

button:hover{ /* SERVE PARA PASSAR O MOUSE E MUDAR A COR DO ELEMENTO */
    background-color: #B20710;
}


.video-ap{
    text-align: center;
    color: white;
}

.video{
    display: flex;
    margin: auto;
    border-radius: 15px;
}

.svg{
    display: flex;
    gap: 10px;
    justify-content: center;
}

.svg-img{
    width: 45px;
}


hr{
    background-color: #B20710;
    border: none;
    height: 1px;
}

body{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: black;
}

html{
    scrollbar-color: #B20710 black; /* MUDA A COR DA SCROLL BAR */
}