@charset "UTF-8";

* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}
html, body {
    background-color: black;
    height: 100vh;
    width: 100vw;
}
body {
    background: url(../imagens/fundo-ceu.jpg) no-repeat top center;
    background-attachment: fixed;
    background-size: cover;
}
main {
    height: 100vh;
    position: relative;
}
section#telefone {
    background: url(../imagens/frame-iphone.png) no-repeat;
    height: 627px;
    width: 311px;
    /* As declarações a seguir posicionam o telefone no centro da página*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
iframe#tela {
    position: relative;
    top: 80px;
    left: 22px;
    height: 471px;
    width: 267px;
}
section#redes-sociais {
    text-align: right;
}
section#redes-sociais img {
    width: 75px;
    margin: 20px 20px 0px 0px;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.345);
    box-sizing: border-box; /*borda faz parte da caixa*/
}
section#redes-sociais img:hover {
    border: 2px solid rgba(255, 255, 255, 0.614);
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.499);
    transition: transform .2s;
} 
@media (max-width: 580px) {

    section#redes-sociais {
        position: fixed;
        right: 5px;   /* traz os botões para dentro da tela */
        top: 50%;
        transform: translateY(-50%);
    }

    section#redes-sociais img {
        width: 45px;  /* diminui os botões no celular */
        margin: 10px 10px 0px 0px;
    }
}