@charset "UTF-8";
*{
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}
html, body{
    height: 100vh;
    width: 100vw;
    
}
body{
    /*url da imagem no-repeat para não repetir e alinhamento no topo e centro*/
    background: url(midia/fundo-madeira.jpg) no-repeat top center;
    /*tamanho da imagem para cobrir a tela inteira*/
    background-size: cover;
    /*para evitar rolagem na página*/
    background-attachment: fixed;
}

main{
    height: 100vh;
    position: relative;

}
section#telefone{
    height: 627px;
    width:311px;
    /* posicianamento no meio da tela */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background:  url(midia/frame-iphone.png) no-repeat ;
}
iframe#tela{
    position: relative;
    top: 80px;
    left: 22px;
    width: 267px;
    height: 471px;
}

section#redes-sociais{
    /*para deixar os botões do lado direito*/
    text-align: right;

}

section#redes-sociais img{
    width: 50px;
    margin: 10px;
    /*transformando os "botões" quadrados em redondos--> 50% transforma eles em redondo*/
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.412);
    /*para que as imagens não fiquem se mexendo ao passar o mouse por cima*/
    box-sizing: border-box;
}

/*para quando passar o mouse destacar o botão*/
section#redes-sociais img:hover{
    border: 2px solid white;
    /*para que o botão "de uma afastada"*/
    transform: translate(-3px, -3px);
    /*tempo para que o botão se mexa*/
    transition: transform 0.5s;
}