*{

    box-sizing: border-box;

}



html{

    scroll-behavior: smooth;

}



body{

    font-family: 'Roboto', sans-serif;

    margin: 0;

}



h1{ font-size: 2.5em;}

h2{ font-size: 2.7em;}

h3{ font-size: 2em;}

p{ font-size: 1.25em;}

ul{ list-style: none;}

li{ font-size: 1.25em;}



button{

    font-size: 1.25em;

    font-weight: bold;

    padding: 10px 30px;

    border-radius: 5px;

    border: 2px solid rgba(0,0,0,0.3);

    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);

    color: white;

    background-color: blueviolet;

}



button:hover{

    background-color: rgb(101, 33, 165);

}



.container{

    max-width: 1100px;

    margin: auto;

}


.color-acento{ color:blueviolet; }



header{

    background-color: rgb(245,245,245);  

}



header .logo{

    margin: 0;

    padding: 25px 30px;

    font-weight: bold;

    color: blueviolet;

    font-size: 1.6em;

}



header .container{

    display: flex;

    flex-direction: column;

    align-items: center;

}



header nav{

    display: flex;

    flex-direction: column;

    text-align: center;

    padding-bottom: 25px;

}



header a{

    padding: 5px 12px;

    text-decoration: none;

    font-weight: bold;

    color: black;

}



header a:hover{

    color: blueviolet;

}



#hero{

    display: flex;

    align-items: center;

    /* justify-content: center; */

    justify-content:flex-end;

    text-align: center;

    flex-direction: column;

    height: 90vh;

    background-image: linear-gradient(

        0deg,

        rgba(0,0,0,0.1),

        rgba(0,0,0,0.1)

    )

    ,url("../2022/mages22/padre2.jpg");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

}



#hero h3{

    color: rgb(255, 255, 255);

}



#hero button{

    font-size: 1.75em;

}



/* xxxxxxxxxxxxxxxxxxxxxxxxxx */

#evangelio .container{

    text-align: justify;

    padding: 200px 12px;

}

#diario .container{

    text-align: justify;

    padding: 200px 12px;

}

#caracteristicas .container{

    text-align: justify;

    padding: 200px 12px;

}
#caracteristicas2 .container{

    text-align: justify;

    padding: 200px 12px;

}





footer{

    margin-top: 10px;

    background-color: rgb(230,230,230);

}



footer p{

    margin: 0;
    
    padding: 12px;

    color: rgb(100,100,100);

}



footer .container{

    height: 50px;

    display: flex;

    justify-content: center;

    align-items: flex-end;

}









/* escritorio */

@media (min-width: 850px){

    header{

        position: fixed;

        width: 100%;

    }



    header .container{

        flex-direction: row;

        justify-content: space-between;

    }



    header nav{

        flex-direction: row;

        padding-bottom: 0;

        padding-right: 20px;

    }



    #hero h1{

        font-size: 5em;

    }



    #evangelio .container{

        display: flex;

        justify-content: space-evenly;

        /* justify-content: center; */

    }

    #diario .container{

        display: flex;

        justify-content: space-evenly;

        /* justify-content: center; */

        background-color:rgb(252, 250, 244);

    }
    #caracteristicas .container{

        display: flex;

        justify-content: space-evenly;

        /* justify-content: center; */

        background-color:rgb(223, 223, 223);

    }
    #caracteristicas2 .container{

        display: flex;

        justify-content: space-evenly;

        /* justify-content: center; */

        background-color:rgb(145, 131, 131);

    }



    #evangelio .texto{

        width: 50%;

        max-width: 600px;

        text-align: initial;

        padding-left: 30px;

        display: flex;

        flex-direction: column;

        justify-content: center;

      
    }

    #diario .texto{

        width: 50%;

        max-width: 600px;

        text-align: initial;

        padding-left: 30px;

        display: flex;

        flex-direction: column;

        justify-content: center;

    }
    #caracteristicas .texto{

        width: 50%;

        max-width: 600px;

        text-align: initial;

        padding-left: 30px;

        display: flex;

        flex-direction: column;

        justify-content: center;

    }
    #caracteristicas2 .texto{

        width: 50%;

        max-width: 600px;

        text-align: initial;

        padding-left: 30px;

        display: flex;

        flex-direction: column;

        justify-content: center;

    }



    #evangelio h2{

        margin-top: 0px;

    }

    #diario h2{

        margin-top: 0px;

    }
    #caracteristicas h2{

        margin-top: 0px;

    }
    #caracteristicas2 h2{

        margin-top: 0px;

    }



    #evangelio .img-container{

        background-image: url("../2022/mages22/biblia2.jpg");

        background-size: cover;

        background-position: center center;

        height: 500px; 

        /* height: auto; */

        width: 400px; 

        /* width: auto;  */

    }


    /* #diario .img-container{

        background-image: url("../2022/mages22/santa_rita_de_casia.jpg");

        background-size: cover;

        background-position: center center;

        height: 600px; 

        /* height: auto; */

        /* width: 400px;  */

        /* width: auto;  */

    /* } */ 
    /* #caracteristicas .img-container{

        background-image: url("../2022/mages22/gif_pentecoste.gif");

        background-size:auto;
        background-repeat: no-repeat;
        /* background-size: cover; */

        /* background-position: center center;

        height: 600px;  */

        /* height: auto; */

        /* width: 400px;  */

        /* width: auto;  */

    /* } */
    /* #caracteristicas2 .img-container{

        background-image: url("../2022/mages22/gif_josegregorio.gif");

        background-size:auto;
        background-repeat: no-repeat;
        /* background-size: cover; */

        background-position: center center;

        /* height: 600px;  */

        /* height: auto; */

        /* width: 400px;  */

        /* width: auto;  */

    /* } */


    footer .container{

        justify-content: flex-end;

    }

}