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

@font-face {
    font-family: Clarendon;
    src: url(fontes/ClarendonLTStd-Bold.otf);
    font-weight: bold;
}

@font-face {
    font-family: Clarendon;
    src: url(imagens/Imagem\ da\ letra\ .png);
    font-weight: 100;
}


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

}

h1 {
    color: #4A2F24;
    font-size: 20px;
    font-family: Clarendon;
    font-weight: normal;
}

h2 {
    color: #000000;
    font-size: 50px;
    font-family: Clarendon;
    font-weight: normal;
}



h4 {
    color: #4A2F24;
    font-family: Clarendon;
    font-weight: normal;
}


img {
    width: 100%;
    background-color: #ffffff;
    margin-top: 20px;
    margin-bottom: 20px;
}

#texto {

    width: 50%;

}

#imagem {

    width: 50%;

}

#tipografia {

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

}

#caracteristicas {

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

}

#aplicaflex {

    display: flex;

}

#roberto {

    background-color: #ffffff;

    img {
        width: 100px;
    }

    border-top-style: solid;
    border-color: #35221a;
    padding-left: 10px;
    padding-bottom: 5px;
}


#cabecalho {

    background-color: #ffffff;

    img {
        width: 100px;
    }

    border-bottom-style: solid;
    border-color: #35221a;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 5px
}


#contentor {
    background-color: oklch(43.095% 0.03091 45.437);
    width: 60%;
    margin-left: auto;
    margin-right: auto;




    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 50px;
    padding-left: 50px;
}


#conteudo {

    background-color: #ffffff;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-top: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}




.seccoes {
    background-color: #ffffff;
    padding: 30px;
    margin-bottom: 50px;
}

body {
    background-color: #ffffff;

}



@media (max-width: 500px) {

    #aplicaflex {

        flex-direction: column;

    }

    #texto {

        width: 100%;

    }

    #imagem {

        width: 100%;

    }

        #contentor {
            
            width: 95%;
            
        }

}