:root {
    --corNivel1: #2B1B14;
    --corNivel2: #5A3B2E;
    --corNivel3: #8B6A55;
    --corNivel4: #C9B19C;
    --corNivel5: #F3E7D6;
}

* {
    font-family: 'Averta', sans-serif;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {scroll-behavior: smooth;}

body {font-size: 18px; margin: 0;}

p {line-height: 1.5; margin-bottom: 20px; text-align: justify;}

a {text-decoration: none; color: var(--corNivel1);}

small {text-align: center; color: white; margin: auto;}

h1 {text-align: center; color: var(--corNivel1);}

button {
    background-color: var(--corNivel1); padding: 10px 15px; border-radius: 8px; color: white; font-size: 18px; border: 0px; cursor: pointer; width: auto;
}
button:hover {background-color: var(--corNivel2);}

input, textarea {
    border: 1px solid var(--corNivel1); border-radius: 8px; padding: 10px 15px; font-size: 18px; width: 100%;
}
textarea {max-width: 100%;}

.btnCor5 {background-color: var(--corNivel5); color: var(--corNivel1);}
.btnCor5:hover {background-color: var(--corNivel3);}
.btnCor4 {background-color: var(--corNivel4); color: var(--corNivel1);}
.btnCor4:hover {background-color: var(--corNivel3);}

.btnSemCor {background-color: transparent; border: 0px;}


body#login {background-color: var(--corNivel1);}
.divLogin {
    width: 400px; height: auto; padding: 20px; border-radius: 8px; border: 1px solid var(--corNivel5); color: white; margin: auto;
}
.divLogin > div > img {width: 250px;}

#resultado {background-color: red; color: white; text-align: center; padding: 5px; border-radius: 8px; display: none;}


#mascaraComClick {width: 100%; height: 100%; position: fixed; z-index: 999999; background-color: var(--corNivel1); opacity: 0.8; display: none;}

.conteudoDentroDiv {
    width: 80%; margin: auto; 
}

.barraSuperior {
    color: white; background-color: var(--corNivel1); width: 100%; position: sticky; top: 0; z-index: 999999;
}

.imgSimbolo {height: 40px;}

.divsUltimasRezenhas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    border-radius: 8px;
    font-size: 16px;
}
.divsUltimasRezenhas > a > div {
    border: 1px solid var(--corNivel4); border-radius: 8px; cursor: pointer;
}
.divsUltimasRezenhas > a > div:hover {
    background-color: var(--corNivel4);
}
.divsUltimasRezenhas .divImg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 280px;
    border-radius: 8px 8px 0px 0px;
}
.divsUltimasRezenhas .pequenoTexto, .divsUltimasRezenhas .divDataPub {
    opacity: 0.6; font-size: 14px;
}


.divsIndicacoesLivros {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.divsIndicacoesLivros .cadaLivro {
    background-color: var(--corNivel5); padding: 10px; border-radius: 8px;
}
.divsIndicacoesLivros .cadaLivro:hover {
    background-color: var(--corNivel3);
}
.divsIndicacoesLivros img {
    height: 150px;
}
.cadaLivro {position: relative;}
.desconto {
    background-color: orange; color: black; border-radius: 48%; position: absolute; padding: 5px; top: 10px; right: 10px;
}

.divFormPesquisa input {width: 500px;}


.barraCorNivel1 {background-color: var(--corNivel1);}
.barraCorNivel2 {background-color: var(--corNivel2);}
.barraCorNivel3 {background-color: var(--corNivel3);}
.barraCorNivel4 {background-color: var(--corNivel4);}
.barraCorNivel5 {background-color: var(--corNivel5);}

.cursorMao {cursor: pointer;}

.corBranco {color: white;}

.textoCentro {text-align: center;}

#divIconeMenu {cursor: pointer; display: none;}
#divMenu nav {margin: auto;}
#divMenu nav ul {
    display: flex; justify-content: center; align-items: center;
}
#divMenu nav ul li {
    color: white; padding: 10px; cursor: pointer; margin: auto; list-style: none; border-radius: 8px;
}
#divMenu nav ul li:hover {
    background-color: var(--corNivel5); color: var(--corNivel1);
}
#divMenu nav ul li:hover img {
    filter: invert(0%) sepia(4%) saturate(20%) hue-rotate(334deg) brightness(104%) contrast(100%);
}

#divMenu .divMenuSimbolo {display: none; text-align: center; padding: 5px; border-bottom: 1px solid var(--corNivel4);}


.voltarTopo {
    background-color: var(--corNivel1); border-radius: 48%; border: 1px solid var(--corNivel5); position: fixed; bottom: 10px; right: 10px; padding: 10px;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.voltarTopo.visivel {
    opacity: 1;
    visibility: visible;
}
.voltarTopo:hover {background-color: var(--corNivel2);}


#resenha .divAutor, #resenha .divDataPub {
    text-align: right;
}

#resenha article .imgPostagem {
    width: 25%;
}
#resenha article .imgPostagem > img {
    width: 100%; border-radius: 8px;
}


.barraBanner {
    height: 400px; background-color: var(--corNivel2); 
    background-image: url('../img/banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.barraBanner img {
    margin-top: 50px; width: 400px;
}
.barraBanner .bannerTexto1 {
    color: white; font-size: 30px; margin-top: 30px; width: 400px;
}
.barraBanner .bannerTexto2 {
    color: white; font-size: 20px; margin-top: 30px; width: 350px;
}

.linhaVerticalCor1 {
    column-rule: 1px solid var(--corNivel1);
}
.linhaCor3 {border: 1px solid var(--corNivel3);}
.linhaCor4 {border: 1px solid var(--corNivel4);}
.linhaCor5 {border: 1px solid var(--corNivel5);}

.padding5 {padding: 5px;}
.padding10 {padding: 10px;}
.padding15 {padding: 15px;}
.padding20 {padding: 20px;}

.margem5-0 {margin: 5px 0px;}

.negrito {font-weight: bold;}


.displayFlex {display: flex;}
.displayFlexCentro {align-items: center;}
.displayFlexJustCentro {justify-content: center;}
.displayFlexSpaceBetween {justify-content: space-between;}
.displayFlexSpaceAround {justify-content: space-around;}
.flex1 {flex: 1;}
.gap5 {gap: 5px;}
.gap10 {gap: 10px;}
.gap20 {gap: 20px;}
.gap30 {gap: 30px;}
.gap50 {gap: 50px;}


.comentario {
    margin-bottom: 15px; background-color: var(--corNivel4); border-left: 3px solid var(--corNivel2); border-radius: 8px;
}
.comentario p {
    margin: 5px; padding: 10px 10px 10px 20px;
}
.autorComentario {background-color: var(--corNivel2); color: var(--corNivel5); padding: 5px 10px; border-radius: 5px 0px 8px 0px;}
.dataComentario {background-color: var(--corNivel2); color: var(--corNivel5); padding: 5px 10px; border-radius: 0px 8px 0px 8px;}

.respostasComentarios {padding-left: 50px;}
.respostaComentario {background-color: var(--corNivel5); margin: 10px; border-radius: 8px}
.respostaComentario p {
    margin: 5px; padding: 10px 10px 10px 20px;
}
.autorRespostaComentario {background-color: var(--corNivel3); color: var(--corNivel1); padding: 5px 10px; border-radius: 8px 0px 8px 0px;}
.dataRespostaComentario {background-color: var(--corNivel3); color: var(--corNivel1); padding: 5px 10px; border-radius: 0px 8px 0px 8px;}

.totalComentarios {background-color: var(--corNivel1); color: var(--corNivel5); padding: 4px 8px; border-radius: 50%; font-size: 14px;}

.formResposta {display: none;}



.svg20 { height: 20px; width: 20px; text-align: center; vertical-align: top; }
.svg25 { height: 25px; width: 25px; text-align: center; vertical-align: top; }
.svg30 { height: 30px; width: 30px; text-align: center; vertical-align: top; }
.svg50 { height: 50px; width: 50px; text-align: center; vertical-align: top; }
.svg100 { height: 100px; width: 100px; text-align: center; vertical-align: top; }
.svgBranco { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
.svgPreto { filter: invert(0%) sepia(4%) saturate(20%) hue-rotate(334deg) brightness(104%) contrast(100%); }




.textoDuasColunas {
    column-count: 2;
    column-gap: 50px;
    
    column-rule: 1px solid #ccc; 
}



/* Extra extra large (telas enormes) */
@media (min-width: 1201px) {
    
}

/* Extra large (desktops grandes) */
@media (max-width: 1200px) {
    .conteudoDentroDiv {width: 92%;}
    .divsUltimasRezenhas .divImg {
        height: 180px;
    }
    .barraBanner {height: 350px;}
}

/* Large (laptops) */
@media (max-width: 992px) {
    .divsUltimasRezenhas {
        grid-template-columns: repeat(2, 1fr);
    }
    .divsUltimasRezenhas .divImg {
        height: 250px;
    }
    .barraBanner {height: 300px;}
    .barraBanner img {margin-top: 40px; width: 300px;}
    .barraBanner .bannerTexto1 {font-size: 20px; margin-top: 15px;}
    .barraBanner .bannerTexto2 {font-size: 16px; margin-top: 15px;}

    #divIconeMenu {display: block;}
    #divMenu {display: none; width: 250px; position: fixed; height: 100%; right: 0; top: 0; background-color: var(--corNivel1); border-left: 1px solid var(--corNivel4);}
    #divMenu nav ul {display: block; gap: 5px;}
    .divMenuSimbolo {display: block;}

    .divsIndicacoesLivros {
        grid-template-columns: repeat(3, 1fr);
    }

    .divFormPesquisa input {width: 400px;}

    #resenha article .imgPostagem {
        width: 25%;
    }
}

/* Medium (tablets) */
@media (max-width: 768px) {
    .textoDuasColunas {
        column-count: 1;
    }
    .divsUltimasRezenhas {
        display: block;
    }
    .divsUltimasRezenhas > a > div {
        margin-bottom: 20px;
    }
    .divsUltimasRezenhas .divImg {
        height: 300px;
    }
    .barraBanner {height: 230px;}
    .barraBanner img {margin-top: 30px; width: 250px;}
    .barraBanner .bannerTexto1 {font-size: 20px; margin-top: 10px; width: 250px;}
    .barraBanner .bannerTexto2 {font-size: 16px; margin-top: 10px;}

    .divContato {display: block;}

    .divsIndicacoesLivros {
        grid-template-columns: repeat(2, 1fr);
    }

    .divFormPesquisa input {width: 300px;}

    #resenha .divArtigo {
        display: block;
    }

    #resenha article .imgPostagem {
        width: 100%;
    }

    .divLogin {width: 90%;}

    .divRedesSocaisEAutor {display: block;}
}

/* Small (landscape phones) */
@media (max-width: 576px) {
    .divsUltimasRezenhas .divImg {
        height: 200px;
    }
    .barraBanner {height: 190px;}
    .barraBanner .bannerTexto2 {display: none;}

    .divsIndicacoesLivros {
        grid-template-columns: repeat(1, 1fr);
    }

    .divFormPesquisa input {width: 250px;}
    .divFormPesquisa button span {display: none;}
}