/**************************
PADRÕES DO SITE
**************************/


/*** ANIMAÇÃO DE TRANSIÇÃO ***/

main {
    animation: transitionIn 0.75s;
}

@keyframes transitionIn {
    from {
        opacity: 0;
        transform: rotateX(-10deg);
    }
    to {
        opacity: 1;
        transform: rotateX(0);
    }
}


/*** TIPOGRAFIA ***/

html,
body {
    font-family: 'Poppins', sans-serif;
}

.playfair {
    font-family: 'Playfair Display', serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: #777777;
}

.text-azul {
    color: #233142;
}

.text-cinza {
    color: #777777;
}

.navbar-light .navbar-brand {
    color: #233142;
}


/*** BOTÕES ***/

.btn-primary {
    font-family: 'Playfair Display', serif;
    padding: .5rem 1rem;
    letter-spacing: .075em;
    color: #fff;
    background-color: #233142;
    border-color: #233142;
}


/**************************
PÁGINA INICIAL
**************************/

#hero-home {
    background-color: #233142;
    color: #ECEDD8;
    min-height: 100vh;
}

#hero-home .img-riella {
    height: 80vw;
    background-image: url(../img/home-riella.webp);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right -3rem center;
}

#hero-home h2 {
    color: #ECEDD8;
}

#hero-home p {
    color: #ECEDD8;
}

#hero-home a {
    text-decoration: none;
    transition: .4s ease all;
    color: #ECEDD8;
    letter-spacing: 0em;
}

#hero-home a:hover {
    color: #ffffff;
    letter-spacing: .08em;
}

@media (min-width: 992px) {
    #hero-home .img-riella {
        height: 80vh;
        background-image: url(../img/home-riella.webp);
        background-size: 105% auto;
        background-position: right -3rem center;
        margin-top: 10vh;
    }
    #hero-home .titulo {
        margin-top: 10vh;
    }
    #hero-home .menu {
        margin: 22vh 0;
    }
}


/**************************
PÁGINA BIOGRAFIA
**************************/

#bio .info {
    background-image: url(../img/biografia-bg.svg);
    background-repeat: no-repeat;
    background-position: top 4rem center;
    background-size: 100% auto;
}

#bio .img-riella {
    height: 80vw;
    background-image: url(../img/biografia-riella.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

@media (min-width: 992px) {
    #bio .img-riella {
        height: 24vw;
    }
}


/**************************
PÁGINA LIVROS
**************************/

#livros .livro-1 {
    background-image: url(../img/livro-1-bg.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 100% auto;
}

#livros .livro-2 {
    margin: 4rem 0;
    background-image: url(../img/livro-2-bg.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 100% auto;
}

@media (min-width: 992px) {
    #livros .livro-1 {
        background-position: top left;
        background-size: 36% auto;
    }
    #livros .livro-2 {
        background-position: top right;
        background-size: 36% auto;
    }
}


/**************************
PÁGINA PESQUISAS
**************************/

#pesquisas .bg {
    height: 100vh;
    width: 100vw;
    position: fixed;
    background-image: url(../img/pesquisas-bg.svg);
    background-repeat: no-repeat;
    background-position: bottom 30vh left 10vw;
}

#pesquisas .card-pubmed {
    background: #FFFFFF;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
    margin: 1rem;
    padding: 1rem;
}

@media (min-width: 992px) {
    #pesquisas .bg {
        background-position: bottom 30vh left 36vw;
    }
    #pesquisas .info {
        position: fixed;
    }
    #pesquisas .card-pubmed {
        margin: 2rem 0 2rem;
        padding: 2rem;
    }
}


/**************************
PÁGINA CONTATO
**************************/

#contato form {
    background: #FFFFFF;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
    padding: 1rem;
}

#contato textarea {
    resize: none;
}

@media (min-width: 992px) {
    #contato form {
        padding: 2rem;
    }
}