@import url('animation.css');

/* profile.css */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.profile img {
    position: static;
    width: 8em; /* Tamanho relativo ao tamanho da fonte */
    height: 8em;
    border-radius: 50%;
    margin-top: -1em; /* Ajuste relativo ao tamanho da fonte */
    z-index: 1;
}

.profile {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 80vw;
    /* Percentual da largura da viewport */
    max-height: 80vh;
    /* Percentual da altura da viewport */
    border-radius: 20px;
    padding: 5%;/* Percentual baseado no contêiner pai */
    margin: 5% auto;/* Centrando horizontalmente e definindo a margem superior */
    margin-top: 120px;
    margin-bottom: 350px;

    background-color: #6e4d7f8c;
    border-radius: 65px;
    padding: 50px;
    max-width: 25%;
    text-align: center;
    
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(0.5em);
    backdrop-filter: blur(0.5em);
    background-color: #6e4d7f8c;
}

.profile p {
    font-size: 18px;
    margin: 40px 400;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
 
}

.profile .btn {
    background-color: #ff6b6b;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
}

.contact-container,
.resume-container,
.featured-projects,
.about-container,
.profile-container {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 650px;

    background: linear-gradient(to bottom, #ffbe9d, #f95959, #233142, #141c25);
    border-radius: 20px;
    padding: 75px;
    margin: 0 auto;
    text-align: center;
  
}

.profile-container{
    margin-top: -50px;
    height: 225px;
}

.about-container{
    margin-top: 50px;
}

.featured-projects {
    width: 650px;
    height: 250px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.resume-container {
}



/* Aplique a animação aos elementos necessários */
.about-container::after,
.about-container::before,
.resume-container::after,
.resume-container::before,
.profile-container::after,
.profile-container::before,
.contact-container::after,
.contact-container::before,
.featured-projects::after,
.featured-projects::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: -webkit-conic-gradient(from var(--angle), #ff3300, #0062ff, #0074d4, #ff0000);
    background-image: conic-gradient(from var(--angle), #ff3300, #0062ff, #0074d4, #ff0000);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    padding: 3px;
    border-radius: 20px;
    animation: spin 3s linear infinite;
}

.resume-container::before,
.profile-container::before,
.contact-container::before,
.featured-projects::before {
    filter: blur(1.5rem);
}

/* Media Queries para diferentes tamanhos de tela */

/* Telas grandes (desktops) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .profile img {
        width: 10vw;
        height: 10vw;
    }

    .profile {
        width: 40vw;
        max-width: 65vw;
        padding: 5vw;
        box-shadow: 0 0 3em rgb(0, 0, 0);
    }

    .profile p {
        font-size: 1.55vw;
    }

    .profile .btn {
        padding: 0.6em 1.2em;
    }

}

/* Telas médias (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    .profile img {
        width: 12vw;
        height: 12vw;
    }

    .profile {
        width: 40vw;
        max-width: 65vw;
        padding: 5vw;
        box-shadow: 0 0 3em rgb(0, 0, 0);
    }

    .profile p {
        font-size: 1.45vw;
    }

    .profile .btn {
        padding: 0.6em 1.2em;
    }
}

/* Telas pequenas (celulares) */
@media (max-width: 768px) {
    .profile img {
        width: 15vw;
        height: 15vw;
    }

    .profile {
        width: 80vw;
        max-width: 80vw;
        padding: 5vw;
        box-shadow: 0 0 3em rgb(0, 0, 0);
    }

    .profile p {
        font-size: 1.35vw;
    }

    .profile .btn {
        padding: 0.6em 1.2em;
    }
}