/*
Arquivo:	MEGA-ESTILOS.CSS
Sistema:	Sistema Mega Músicas
Data:		02/09/2023
*/

/* ESTILO GERAL */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Poppins', sans-serif;  */
    text-decoration: none;
} 

body, html {
    height: 100%;
    width: 100%;
    background-color: var(--cor1);
    color: var(--cor2);
}

:root {
    --cor1: #000000;        /* preto */
    --cor2: #ffffff;        /* branco */
    --cor3: #ffff00;        /* amarelo */
    --cor4: #008000;        /* verde escuro */
    --cor5: #000080;        /* azul escuro */
    --cor6: #80ffff;        /* azul claro */
    --cor7: #ff0000;        /* vermelho */
}

.m77777ax-width {
    max-width: 1300px;
    padding: 0 10px;
    margin: auto;
}

.titulo {
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: var(--cor3);
}

.conteudo {
    /*   position: relative;
    z-index: 1;
     indice menor que elemento das 3 barrinhas para que menu de musicas seja exibido por inteiro  */

    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-style: italic;
    text-align: left;
    background-color: var(--cor2);
    color: var(--cor4);
    padding: 0 5px 0 5px;
}

.bt-menu-verde {
    display: flex;
    justify-content: center;
}

.img-capa {
    text-align: center;
    /*   height: 100vh;     Preenche a altura da tela */
    width: 100%;           /* Preenche a largura da tela */
    object-fit: cover;     /* Corta e ajusta sem distorcer a imagem */





    /*  background-color: var(--cor2); 
     
    width: 100%;       Faz a imagem ocupar 100% da largura da tela 
    height: auto;      Mantém a proporção original 

    width: 100%;
    object-fit: cover;         Faz com que a imagem preencha o espaço */
}


/* INDEX */

.port {
    background-color: var(--cor2);
    font-family: arial, verdana;
    font-size: 24px;
    font-weight: bold;
    color: var(--cor5);
    text-align: center;
}

.ing {
    background-color: var(--cor2);
    font-family: arial, verdana;
    font-size: 16px;
    font-weight: bold;
    color: var(--cor7);
    text-align: center;
}

.img-cantar {
    background-color: var(--cor2);
    text-align: center;
}

.quadro {
    border-color: var(--cor1);
    border-style: solid;
    border-width: 1px;
    color: var(--cor1);
    font-family: arial, verdana;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
}

.aviso-port {
    background-color: var(--cor3);
    text-align: center;
    padding: 5px 0 5px 0;
}

.aviso-ing {
    background-color: var(--cor6);
    text-align: center;
    padding: 5px 0 5px 0;
}




/* INICIO */
.navbar {
    width: 100%;
    z-index: 999;
    padding: 20px 0;
    font-family: 'Ubuntu', sans-serif;
    background-color: var(--cor1);
    /* border-bottom: solid var(--cor3) 1px;  */
}

.navbar .max-width {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo a {
    padding: 30px 0 0 0;
}

.navbar .menu li {
    list-style: none;
    /*  display: inline-block;    ... na mesma linha */
}

.navbar .menu li a {
    display: block;
    color: var(--cor2);
    font-size: 1rem;
    /* 16 px */
    font-weight: 400;
    margin-left: 25px;
}

.navebar .menu li a:hover {
    /* background-color: var(--cor4); */
    color: var(--cor3);
    /* amarelo */
}

.listar-musicas {
    /*   position: relative;
    z-index: 1;
     indice menor que elemento das 3 barrinhas para que menu de musicas seja exibido por inteiro  */
    font-family: 'Ubuntu', sans-serif;
    font-size: 10px;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    /*  background-color: var(--cor2);  */
    /* fundo branco */
    /* color: var(--cor4); */
    /* cor da fonte - verde escuro */
    /*  padding: 0 5px 0 5px;  */
}

.menu-btn {
    color: var(--cor2);
    font-size: 1.5rem;
    /* 24 px */
    cursor: pointer;
    display: none;
}

.tit-pequeno {
    color: var(--cor2);
    font-size: 0.75rem;
    /* 16 x 0,75 = 12 px */
    text-align: center;
}

.frase {
    font-size: 16px;
    font-weight: bold;
    color: var(--cor3);
    text-align: center;
}

.botao {
    width: 150px;
    height: 30px;
    line-height: 15px;
    border: none;
    background-color: var(--cor4);
    color: var(--cor3);
    font-weight: bold;
    cursor: pointer;
    padding: 0 20px 0 20px;
    border-radius: 15px;
}

.botao:hover {
    transform: scale(1.08);
}


/* ESTILO DO RESPONSIVO */
@media screen and (max-width: 1020px) {
    .flex {
        flex-direction: column;
    }
    
    /* 1200px para exibir no tablet como responsivo */
    /* @media screen and (max-width: 1200px) */

    /* INDEX */
    .img-capa {
        /*   max-width: 100%;  */

        text-align: center; 
        width: 100%;      /* Faz a imagem ocupar 100% da largura da tela */
        height: auto;     /* Mantém a proporção original */
        background-color: var(--cor1);
    }
    
    /* INICIO */
    .menu-btn {
        display: block;
        z-index: 999;
    }
    
    #menu-icon.active::before {
        content: "\f00d";
    }
    
    navbar .menu {
        background-color: var(--cor1);
        position: absolute;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
    }
    
    #menu-site.active {
        left: 0;
    }
    
    .navbar .menu li {
        display: block;
    }
    
    .navbar .menu li a {
        /*  display: inline-block;   .... na mesma linha  */
        /*  position: relative;
        z-index: 2;
        indice maior que classe conteudo p/se sobrepor aos textos desta classe */
        margin: 13px 0;
        font-size: 1.2rem;
        /* era 1.5rem  24 px  passei para 1rem-16px  */
    }
    
    .navbar .menu li a:hover {
        /* text-decoration: overline underline;  */
        text-decoration: underline;
        color: var(--cor3);
        /* background-color: #00000080;
        color: #C78C19;
        color: #990606; ........... */
    }
    
    .endereco {
        font-size: 14px;
        text-align: center;
        color: var(--cor3);
    }



   

    .na77vbar {
        width: 100%;
        position: relative;
        z-index: 999;
        padding: 20px 0;
        font-family: 'Ubuntu', sans-serif;
        background-color: var(--cor1);
        /* border-bottom: solid var(--cor3) 1px;  */
    }
    
    .m77ax-width {
        max-width: 1300px;
        padding: 0 10px;
        margin: auto;
    }


    .l77ogo {
        padding: 22px 0 0 0;
        text-align: center;
    }

    .na77vbar .menu {
        background-color: var(--cor1);
        position: absolute;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
    }

    .na77vbar .menu li {
        display: block;
    }

    .na77vbar .menu li a {
        /*  display: inline-block;   .... na mesma linha  */
        /*  position: relative;
        z-index: 2;
        indice maior que classe conteudo p/se sobrepor aos textos desta classe */
        margin: 13px 0;
        font-size: 16px;
    }

    .na77vbar .menu li a:hover {
        /* text-decoration: overline underline;  */
        text-decoration: underline;
        color: var(--cor3);
        /* background-color: #00000080;
        color: #C78C19;
        color: #990606; ........... */
    }

    .li77star-musicas {
        /*   position: relative;
        z-index: 1;
         indice menor que elemento das 3 barrinhas para que menu de musicas seja exibido por inteiro  */
        font-family: 'Ubuntu', sans-serif;
        font-size: 10px;
        font-weight: 600;
        font-style: normal;
        text-align: center;
        /*  background-color: var(--cor2);  */
        /* fundo branco */
        /* color: var(--cor4); */
        /* cor da fonte - verde escuro */
        /*  padding: 0 5px 0 5px;  */
    }

    .m77enu-btn {
        display: block;
        position: relative;
        z-index: 999;
    }

    .t77it-pequeno {
        font-size: 12px;
        text-align: center;
        color: var(--cor3);           /* cor da fonte - amarelo */
    }
}    






/*
.navbar .max-width {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo a {
    padding: 30px 0 0 0;
}




.menu-btn {
    color: var(--cor2);
    font-size: 24px;
    cursor: pointer;
    display: none;
}

*/