@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
}
:root {
    font-size: 16px;
}
body{
    background: #000 url(pacote-d013/imagens/fundo-madeira.jpg) bottom center no-repeat fixed;
    background-size:cover;
    height: 100vh;
    width: 100vw;
}
ul {
    display: flex;
    list-style: none;
    flex-direction: column;
    gap: 1.5rem;
    position: absolute;
    right: 15px;
    top: 5px;
}
button {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    box-shadow: 2px 2px 2px rgba(66, 66, 66, 0.151);
}
button:hover{
    border:2px solid rgba(255, 255, 255, 0.651);
    transform: translate(-3px, -3px);
    transition: 0.8s, border 1s;
}
#github {
    background: #fff url(pacote-d013/imagens/logo-github.jpg) center center no-repeat fixed;
    background-size:cover;
    scale: 100%;
}
#facebook {
    background: #fff url(pacote-d013/imagens/logo-facebook.jpg) center center no-repeat fixed;
    background-size:cover;
    scale: 100%;
}
#instagram {
    background: #fff url(pacote-d013/imagens/logo-instagram.jpg) center center no-repeat fixed;
    background-size:cover;
    scale: 100%;
}
#home {
    background: #fff url(pacote-d013/imagens/logo-home.jpg) center center no-repeat fixed;
    background-size:cover;
    scale: 100%;
}
#linkedin {
    background: #fff url(pacote-d013/imagens/logo-linkedin.png) center center no-repeat fixed;
    background-size:cover;
    scale: 100%;
}
main{
    position: relative;
}
div{
    background:url(pacote-d013/imagens/frame-iphone.png) center center no-repeat fixed;
    background-size:cover;
    height: 627px;
    width: 311px;
    position: absolute;
    transform: translate(-50%, 10%);
    left: 48%;
    border-radius: 45px;
}
iframe{
    display: block;
    height: 472px;
    width: 267px;
    position: relative;
    transform: translate(-50%, 17%);
    left: 9.8rem;
    top: -0.4px;
}