/* Variáveis */
:root {
    --header-background-color: #00000065;
    --image-hover-effect: #f0f8ff74;
}

/* Estilos Gerais */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

::-webkit-scrollbar {
    display: none;
}

body {
    scroll-behavior: smooth;
    background-image: url("assets/images/fundo-madeira.jpg");
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100vh;
}

header {
    display: flex;
    justify-content: center;
    margin: 5px;
}

header nav {
    background-color: var(--header-background-color);
    box-shadow: 0px 0px 15px var(--header-background-color);
    width: fit-content;
    border-radius: 75px;
}

header nav img {
    border-radius: 50%;
    margin: 5px 1em;
    height: 50px;
    transition: box-shadow 0.5s ease-in-out;
}

header nav img:hover {
    box-shadow: 0 0 15px var(--image-hover-effect);
}


main {
    margin: auto;
    width: 311px;
}

main div#celular {
    background-image: url("assets/images/frame-iphone.png");
    background-repeat: no-repeat;
    background-size: 311px 627px;
    height: 627px;

    text-align: center;
}


main div#celular iframe {
    width: 270px;
    height: 472px;
    margin-top: 80px;
}


@media (max-width: 768px) {
    header nav img {
        margin: 5px 0.5em;
        height: 35px;
    }
}