@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
body{
    background-color: rgba(12, 27, 62, 0.852);
}
*{
        margin: 0px;
        padding: 0px;
        border: 0px;
    }
    header{
        -webkit-box-shadow: inset 2px 27px 75px -7px rgba(0,0,0,0.59);
    -moz-box-shadow: inset 2px 27px 75px -7px rgba(0,0,0,0.59);
    box-shadow: inset 2px 27px 75px -7px rgba(0,0,0,0.59);
        background-image: url(ImagensHTML/GlauberRochaFilhos.jpg);
        display: inline-block;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        width: 100%;
        height: 380px;
    }
    h1{ 
        font-family: 'Bebas Neue', sans-serif;
        color: white;
        text-align: center;
        padding-top: 80px;
        padding-bottom: 156px;
    }
    menu{
        padding-top: 84px;
        text-align: center;
    }
    li{
        background-color: rgba(0, 0, 0, 0.533);
        text-align: center;
        width: 120px;
        display: inline-block;
        padding: 0px 10px 0px 16px;
    }
    li > a{
        color: white;
        text-decoration: none;
        font: normal bolder 14px serif; 
    }
    li > a:hover{
        color:black;
    }
    li#lium:hover{
     transition-duration: 0.5s;
     background-image: url(ImagensHTML/HorizontalGlauber.jpg);
     background-position: bottom center;
     display: inline-block;
     background-repeat: no-repeat;
     background-size: cover;
     padding-bottom: 15px;
     color:black;
     border-radius: 10px;
    }
    li#lidois:hover{
        transition-duration: 0.5s;
        background-image: url(ImagensHTML/Corisco.jpg);
        background-position: center center;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 15px;
        color:black;
        border-radius: 10px;
    }
    li#litres:hover{
        transition-duration: 0.5s;
        background-image: url(ImagensHTML/Curiana.jpg);
        background-position: center center;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 15px;
        color:black;
        border-radius: 10px;
    }
    li#liquatro:hover{
        transition-duration: 0.5s;
        background-image: url(ImagensHTML/AntonioMortes.jpg);
        background-position: center center;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 15px;
        color:black;
        border-radius: 10px;
    }
    h2{
        text-decoration: underline;
        padding: 10px 12px 14px 12px;
    }
    main{
        -webkit-box-shadow: 0px 20px 54px -16px rgba(0,0,0,0.83);
    -moz-box-shadow: 0px 20px 54px -16px rgba(0,0,0,0.83);
    box-shadow: 0px 20px 54px -16px rgba(0,0,0,0.83);
        margin:0px 170px 0px 170px;
        padding: 25px 100px 30px 100px;
        text-align: center;
        background-attachment: fixed;
        background-color: rgba(141, 205, 115, 0.677);
    }
    div > p{
        color: transparent;
    }
    div#imagemtexto01{
        display: inline-block;
        background-image: url(ImagensHTML/posterGlauberRocha.jpg);
        width:200px;
        height: 200px;
        background-size: cover;
        margin: 10px 0px 10px 0px;
    }
    div#imagemtexto02{
        display: inline-block;
        background-image: url(ImagensHTML/CasamentoIgnes.jpg);
        width:240px;
        height: 170px;
        background-size: cover;
        margin: 10px 0px 10px 0px;
        background-position: center center;
    }
    div#imagemtexto03{
        display: inline-block;
        background-image: url(ImagensHTML/GlauberRochaParis1971.jpg);
        width:240px;
        height: 170px;
        background-size: cover;
        margin: 10px 0px 10px 0px;
        background-position: center center;
    }
    div#imagemtexto04{
        display: inline-block;
        background-image: url(ImagensHTML/TerraEmTranseLegado.jpg);
        width:240px;
        height: 170px;
        background-size: cover;
        margin: 10px 0px 10px 0px;
        background-position: center center;
    }
    div#imagemtexto05{
        display: inline-block;
        background-image: url(ImagensHTML/ChicoCience.jpg);
        width:220px;
        height: 170px;
        background-size: cover;
        margin: 10px 0px 10px 0px;
        background-position: center center;
    }
    div:hover{
        transition-duration: 0.5s;
        -webkit-box-shadow: inset 0px -87px 104px -4px rgba(0,0,0,0.83);
    -moz-box-shadow: inset 0px -87px 104px -4px rgba(0,0,0,0.83);
    box-shadow: inset 0px -87px 104px -4px rgba(0,0,0,0.83);
    display: inline-block;
    }
    div > p:hover{
        display: inline-block;
        font-size: 13px;
        color: white;
        font-weight: lighter;
        font-style: italic;
        padding-top: 140px;
    }
    footer{
        background-color: black;
        padding-top: 25px;
        padding-bottom: 25px;
        text-align: center;
        color: rgba(159, 159, 159, 0.581);
    }