css

html{
    font-size: 1.2rem;
    overflow-x: hidden;
}
header{
    position: relative;
}
.siga{
    background-color: #3C1D3D;
    color: white;
    padding: 1em 3em;
    border: .3em solid black;
    box-sizing: border-box;
    width: 15em;
    height: 4rem;
    text-align: center;
    font-size: 1rem;
    font-family: "Open Sans Condensed", sans-serif;
    text-decoration: none;
    position: absolute;
    top:0;
    right:0;
    transform-origin: 0 0;
    transform: translate(7.2218254069479772315907120168467em, -2.8284271247461900976033774484194em) rotate(45deg);

}

header ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 6px;
}
.palavra-home{
    position: absolute;
    font-family: 'Shadows Into Light', cursive;
    color: #D5447E;
    font-weight: bold;

}

.eficiencia{
    top:20%;
    left: 25%;
     transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px);
}
.boas-praticas{
    top: 40%;
    left: 15%;
    transform: translate(-50%, -50%) rotate(-15deg) translateZ(1px);
}
.codigo-limpo{
    top: 75%;
    left: 30%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px);
}
.css3{
    top: 20%;
    left: 15%;
    transform-origin: 0 0;
    transform: translate(-50%, -50%) rotate(-15deg) translateZ(1px);
}
.html5{
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%) rotate(15deg) translateZ(3px);

}
.javascript{
    top: 85%;
    left: 15%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(1px);
}

.acessibilidade{
    top: 30%;
    right: 30%;
    transform: translate(-50%, -50%) rotate(-20deg) translateZ(2px);
}

.responsivo{
    top:30%;
    right: 20%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px);
}

.otimizacoes{
    top: 60%;
    right: 35%;
    transform: translate(-50%, -50%) rotate(15deg) translateZ(2px);
}

.agilidade{
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px);
}

.design{
    top: 80%;
    right: 20%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(1px);
}

.foto-home {
    height: 200px;
    -webkit-border-radius: 50%;
}
.saudacao p {
    margin: 4rem;
    color: #99A;
    line-height: 1;
}
.saudacao-inicio {
    font-size: 4rem;
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    color: #000;
    font-size: 3rem;
}
.saudacao em {
    color: #851944;
    font-size: 5rem;
    display: inline-block;
    transform: rotate(-5deg) skew(-10deg);
}
.botao-index {
    background-color: #851944;
    color: #FFF;
    border: .2em solid black;
    width: 20rem;
    display: block;
    text-align: center;
    padding: .5rem 0;
    margin: 3rem auto;
}
.secao-inicio, footer{
    padding: 2.5rem 2rem;
}
.secao-inicio h2, footer h2 {
    text-transform: uppercase;
    font-size: 2.5rem;
    text-shadow: 0.1rem 0.1rem #333;
}
.trabalhos{
    background-color: #3C1D3D;
    border-top: .5rem solid #000;
    border-bottom: .5rem solid #000;
}
.trabalhos h2 {
    color: #FFF;
}
.trabalhos ul {
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
    border: .5rem solid black;
    border-radius: 1rem;
}
.trabalhos li {

    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;

}
.blog {
    background-color: #999;
    color: #FFF;
    border-bottom: 10px solid #851944;
    position: relative;
}

.inicio-post{
    background-color: #F2FFFC;
    color: black;
    padding: 1rem;
    position: absolute;
    top: 4.5rem;
    right: 4rem;
    height: 7rem;
    width: 60%;
    border-radius: 1em;

}
.mais-recente{
    background-color: #F2FFFC;
    width: 50%;
    padding: .5rem;
    border-radius: 1rem;
}

.blog li{
    margin: 1.5rem 1rem;
}
.blog li a {
    color: #FCF;
}
footer {
    background-color: #000;
    color: #FFF;
}
footer a {
    color: #F99;
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}