* {

    margin: 0;
    box-sizing: border-box;

}




@font-face {
    font-family: Garamond;
    src: url(fontes/GaramondPremrPro.otf);
    font-weight: normal;
}

@font-face {
    font-family: Garamond;
    src: url(fontes/GaramondPremrPro-Bd.otf);
    font-weight: bold;
}


h1 {
    font-family: Garamond, serif;
    color: darkblue;
    font-size: 80px;
    font-weight: normal;

}

h4 {
    font-family: Garamond, serif;
    color: rgb(55, 55, 255);
    font-size: 20px;
    font-weight: bold;
}

h3 {

    font-family: Garamond, serif;
    color: rgb(12, 12, 209);
    font-size: 30px;
    font-weight: bold;

}



img {

    width: 100%;

}


#aplicaflex {

    display: flex;

}


#texto {

    width: 70%;

}

#imagem {

    width: 50%;

}

#destaque {

    color: hsl(240, 100%, 25%);

}


#contentor {

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

    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-right: 50px;
    padding-left: 50px;
    padding-top: 25px;
    padding-bottom: 25px;

}

#cabecalho {


    border-bottom-style: solid;
    border-color: blue;


    background-color: white;

    padding-right: 20px;
    padding-left: 20px;
    padding-top: 10px;

}

#rodape {

    img {

        width: 15%;

    }

    border-top-style: solid;
    border-color: blue;

    background-color: white;

    padding-right: 20px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;

}



#garamondex {
    width: 70%;
    display: block;
    margin: auto;

}

#tipog {

    display: block;
    margin: auto;
    width: 70%;
}

#fontsgaralde {

    width: 100%;

    display: block;
    margin: auto;

}

.pipi {

    background-color: white;

    margin-top: 20px;
    margin-bottom: 20px;

    padding-right: 20px;
    padding-left: 20px;
    padding-top: 25px;
    padding-bottom: 10px;

    #garamondcoiso {

        width: 40%;
        display: block;
        margin: auto;

    }

}



@media (max-width:500px) {

    #contentor {

        width: 90%;
        padding-right: 15px;
        padding-left: 15px;

    }

    #aplicaflex {
        flex-direction: column;
    }

    #imagem {

        width: 100%;

    }

    #texto {

        width: 100%;

    }

    h1 {

        font-size: 60px;

    }

}