body {

    font-family: Bebas, Arial, sans-serif;

    background-color: #f4f4f9;

    color: #f4f4f9;

    position: relative;

    margin: 0;

    padding: 0;

    height: 100vh;

}



/* Aplique o fundo na imagem e o overlay */

.background {

    background-image: url("https://linktree.toptech.pt/img/toptech_arte.png");

    background-position: center;

    background-size: cover;

    background-repeat: repeat-y;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 300vh; /* Usa a altura total da viewport */

    z-index: -1; /* Garante que o overlay fique atr�s do conte�do */

}



/* O overlay escuro */

.overlay {

    background-color: rgba(0, 0, 0, 0.5); /* Cor preta com transpar�ncia */

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: -1; /* Fica atr�s do conte�do */

}

.share-btn {

    text-align: center;

    margin-top: 20px;

}

#shareButton {

    padding: 10px 20px;

    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.3s;

}

.profile {

    color: #047dff;

    text-align: center;

    padding-top: 50px;

}

.profile img:hover {

    transform: rotateY(180deg); /* Gira a imagem no eixo Y */

}



@keyframes flipOnLoad {

    0% {

        transform: rotateY(90deg);

    }

    100% {

        transform: rotateY(0deg);

    }

}

.profile img {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    object-fit: cover;

    box-shadow: 0 0 120px rgba(250, 250, 250, 0.477);

    transition: transform 0.8s ease; /* Anima��o suave no hover */

    transform-style: preserve-3d; /* Ativa o efeito 3D */

    animation: flipOnLoad 0.8s ease;

}

@media screen and (min-width: 768px){

    .profile img {

        width: 240px;

        height: 240px;

        border-radius: 50%;

        object-fit: cover;

        box-shadow: 0 0 120px rgba(250, 250, 250, 0.477);

    }



    .topo h6 {

        font-size: xx-large;

    }

}

@media screen and (max-width: 768px) {

    .background {

        height: 200vh; /* Mant�m altura total da viewport */

        background-position: center center; /* Garante centraliza��o em telas menores */

        background-attachment: scroll; /* Permite rolagem em dispositivos m�veis */

        background-size: contain;

        background-repeat: repeat-y;

    }

}

.titulo {

    color: #f4f4f9;

}

.titulo:hover {

    color: #04bcff !important;

}

.descritivo {

    font-family: Poppins, Arial, sans-serif;

    color: #04bcff;

    font-size: 18px;

}

.descritivo2 {

    font-family: Poppins, Arial, sans-serif;

    color: #f4f4f9;

    font-size: 24px;

}

.links {

    margin-top: 30px;

}

.links a {

    display: block;

    text-decoration: none;

    color: #f4f4f9;

    background-color: #007bff18;

    padding: 15px;

    margin: 10px 0;

    border-radius: 8px;

    text-align: center;

    transition: background-color 0.3s;

}

.links a:hover {

    background-color: #04bcff;

}

.link-icon {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-right: 10px;

    vertical-align: middle;

    object-fit: cover;

}

.center-image {

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

}