main{
    width: 100vw;
    height: auto;

    display: flex;
    align-items: center;
    flex-direction: column;

    margin-top: 10vh;
}

.area{
    width: 100vw;
    height: auto;
    position: relative;
    border-bottom: 2px solid var(--color-background-t);
    height: 100vh;
}


.degradePreto{
    width: 100px;
    height: 100px;
    background-color: var(--cor-fundo);
}

/*Hora do SHOW*/

/*Apresetção*/
#Apresent{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    
}

.Apresentleft{
    display: flex;
    align-items: center;
    
}

#maoAberta{
    width: 70px;
    height: 70px;
    fill: var(--cor-letra);
    transform: rotateZ(330deg);
    

    animation: shake 3s infinite ease-in-out;
}

@keyframes shake {
    50%{
        transform: rotateZ(320deg);
    }
}

#handMove{
    width: 70px;
    height: 70px;
    fill: var(--cor-letra);
    transform: rotateZ(330deg);
    animation: move 20s;
}

@keyframes move {
    100%{
        transform: translateX(-10000px) rotateZ(330deg);
    }
}



.ApresentRight{
    display: flex;
    align-items: center;
    justify-content: center;
    
}



#sun{
    width: 100px;
    height: 100px;
    background-color: var(--color-destaque);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    color: red;
    font-size: 200%;

    box-shadow: 0 0 20px yellow;
    transition: 0.5s;

    animation: shrine 4s infinite;
    z-index: 1;
}



#sun:hover{
    transform: scale(1.2);
    cursor: pointer;

    font-size: 500%;
}

@keyframes shrine {
    50%{
        box-shadow: 0 0 50px yellow;;
    }
}

@keyframes Explodes {
    30%{
      transform: scale(0.1);  
    }

    99%{
        z-index: 0;
    }
    100%{
        transform: scale(9999);
        z-index: 9999;
    }
}


.maoSol{
    display: none;
}


#maoSusto{
    width: 200px;
    height: 200px;
    fill: var(--cor-letra);
    position: absolute;

    transform: scale(0.01) translateY(-6000px);

    animation: venha 5s forwards;
}

@keyframes venha {
    100%{
        transform: scale(1) translateY(0px);
    }
}


#maoGiro{
    width: 200px;
    height: 200px;
    fill: var(--cor-letra);
    position: absolute;

    animation: giro 1s forwards linear;
}

@keyframes giro {
    10%{
        transform: translateX(-10px);
    }

    20%{
        transform: translate(-20px) rotateY(10deg);
    }

    30%{
        transform: translate(-30px) rotateY(30deg);
    }

    40%{
        transform: translate(-40px) rotateY(50deg);
    }

    50%{
        transform: translate(-50px) rotateY(70deg);
    }

    60%{
        transform: translate(-40px) rotateY(100deg);
    }

    70%{
        transform: translate(-30px) rotateY(120deg);
        z-index: 2;
    }

    80%{
        transform: translate(-20px) rotateY(140deg);
        z-index: 2;
    }

    90%{
        transform: translate(-10px) rotateY(160deg);
        z-index: 2;
    }

    100%{
        transform: rotateY(180deg);
        z-index: 2;
    }
}

.pegada{
    display: none;
}

#pegadaSol{
    width: 200px;
    height: 200px;
    fill: var(--cor-letra);
    backdrop-filter: blur(30px);

    z-index: 2;
    position: absolute;

    animation: tremendo 0.3s infinite;
}
@keyframes tremendo {

    25%{
        transform: translateX(-2px) translateY(-2px) translateZ(-2px);
    }

    75%{
        transform: translateX(2px) translateY(2px) translateZ(-2px);
    }
}

/*colocar no body*/
.allTremelique{
    animation: tremendo 0.1s infinite;
}



/*New apresent*/





.SolarSystem{
    display: none;
    justify-content: center;
    align-items: center;
}


#newSun {
    width: 20vw;
    height: 20vw;
    background-color: var(--color-destaque);
    border-radius: 100%;
    box-shadow: 0 0 25px var(--color-destaque);
    position: relative;
}

.Desesplosion{
    transform: scale(9999);
    z-index: 9999;
    animation: Desesplosion 5s forwards;
}

@keyframes Desesplosion {
    100%{
        transform: scale(1);
        z-index: 1;
    }
}



.orbit-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    
    transform-origin: center;
    animation: orbit 5s infinite linear; 
}

#htmlPlanet {
  
    top: 4vw;
    left: -1.5vw;
    transform: translateY(-50%);
}

#cssPlanet{
    
    top: 5vw;
    left: 22vw;
    transform: translateY(-50%);
}

#javaScriptPlanet{
    
    top: 26vw;
    left: 7vw;
    transform: translateY(-50%);
}


@keyframes orbit {
    to {
        transform: rotate(360deg);
    }
}

#javaScriptPlanet, #cssPlanet, #htmlPlanet{
    border-radius: 50%;
    width: 3vw;
    height: 3vw;
    position: absolute;
}


.orbit-trail {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--color-background-t);
    box-shadow: 0 0 5px var(--color-background-t);
    pointer-events: none;
}



#HTMLOrbit {
    width: 24vw;
    height: 24vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#CSSOrbit {
    width: 28vw;
    height: 28vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#javaScriptOrbit {
    width: 32vw;
    height: 32vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.explosionSolar1{
    width: 16vw;
    height: 16vw;
    background-color: var(--color-destaque);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    animation: explo1 2s infinite;
}

.explosionSolar2{
    width: 16vw;
    height: 16vw;
    background-color: var(--color-destaque);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);

    animation: explo2 2s infinite;
}

@keyframes explo1 {
    50%{
        transform: translate(-50%, -50%) scale(0.8);
    }
    
}


@keyframes explo2 {
    50%{
        transform: translate(-50%, -50%) rotate(45deg) scale(0.8);
    }
    
}



@media screen and (max-width: 630px){
    #Apresent{
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
    }

    #newSun{
        width: 50vw;
        height: 50vw;
    }

    .explosionSolar1{
        width: 40vw;
        height: 40vw;
        background-color: var(--color-destaque);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    
        animation: explo1 2s infinite;
    }
    
    .explosionSolar2{
        width: 40vw;
        height: 40vw;
        background-color: var(--color-destaque);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    
        animation: explo2 2s infinite;
    }

    @keyframes explo1 {
        50%{
            transform: translate(-50%, -50%) scale(0.8);
        }
        
    }
    
    @keyframes explo2 {
        50%{
            transform: translate(-50%, -50%) rotate(45deg) scale(0.8);
        }
        
    }


    #javaScriptPlanet, #cssPlanet, #htmlPlanet{
        border-radius: 50%;
        width: 10vw;
        height: 10vw;
        position: absolute;
    }


    #htmlPlanet {
  
        top: 4vw;
        left: -2.5vw;
        transform: translateY(-50%);
    }
    
    #cssPlanet{
        
        top: 5vw;
        left: 52vw;
        transform: translateY(-50%);
    }
    
    #javaScriptPlanet{
        
        top: 67vw;
        left: 7vw;
        transform: translateY(-50%);
    }
    


    
    #HTMLOrbit {
    width: 65vw;
    height: 65vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }   


    #CSSOrbit {
    width: 75vw;
    height: 75vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }


    #javaScriptOrbit {
    width: 85vw;
    height: 85vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

}


.Universe {
    font-weight: bold;
    background: linear-gradient(to right, #000428, #004e92, #6a0572, #a4508b, #ffcc70);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    background-size: 300% 100%; /* Aumenta o tamanho do gradiente */
  
    animation: universe 6s ease-in-out infinite;  /* Transição suave com easing */
}

@keyframes universe {
    0% {
        background-position-x: 0%;
    }
    50% {
        background-position-x: 100%; /* Gradiente atinge o meio */
    }
    100% {
        background-position-x: 0%; /* Volta ao início */
    }
}



/*Sobre Mim*/

#SobreMim{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 10vh;
    padding-bottom: 10vh;
}


.SobreMimLeft, .fotoPerfil{
    display: flex;
    align-items: center;
    justify-content: center;
}



#photoMe{
    width: 25vw;
    z-index: 1;
    border-radius: 100% 100% 100% 100%;
    transition: 0.3s;
}

#photoMe:hover{
    cursor: pointer;

    transform: scale(1.1);
}




.SobreMimRigth{
    width: 30em;
    text-align: left;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align:left;
    gap: 2vh;
}




@media screen and (max-width: 730px){
    #SobreMim{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: none;
        gap: 40px;

    }

    #photoMe{
         height: 50vh;
        width: auto;
    }

    .SobreMimText{
        font-size: 2.5vw;
        width: 80vw;
    }

    .SobreMimRigth{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        
    }
    
}


/*Conhsecimentos*/

#Conhecimentos{
    display: flex;
    justify-content: center;
    align-items: center;
    
    flex-direction: column;

    height: auto;
}

#Conhecimentos h1{
    margin-top: 7vh;
    margin-bottom: 7vh;
}

.contentConhecimentos{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    padding-bottom: 10vw;
    padding-left: 10vw;
    padding-right: 10vw;
    gap: 30px;
}

.cardC{
    width: 16em;
    height: 20em;
    border: 3px solid var(--cor-letra);
    border-radius: 10px;

    filter: contrast(0.01) brightness(0.5);
    transition: 0.5s;
}

.cardC:hover{
    filter: contrast(1) brightness(1);
    cursor: pointer;
    transform: scale(1.1);
    background-color: var(--color-background-t);
}

.contentC{
    display: flex;
    align-items: center;
    flex-direction: column;

    height: 100%;
    width: 100%;

    justify-content: space-evenly;

}


.logoC img{
    width: 150px;
    height: 150px;
}

.textoC{

    display: flex;
    align-items: center;
    flex-direction: column;
   
}

.descricaoC{
    text-align: center;
    padding: 5px;
    
}