@import url('https://fonts.googleapis.com/css2?family=Jacquarda+Bastarda+9+Charted&family=Jersey+25&family=Lobster&family=Pixelify+Sans:wght@400..700&family=Roboto+Slab:wght@100..900&display=swap');
html
{
scroll-behavior: smooth;
}


body {
    margin: 0%;
    padding: 0%;
    background-color: rgba(0, 0, 0, 0.024);
    background: rgb(99, 99, 99);
    background: radial-gradient(49% 81% at 45% 47%, #E2E2E2E6 0%, #B5B2B2E6 100%), radial-gradient(113% 91% at 17% -2%, #535353E6 1%, #FF000000 99%), radial-gradient(142% 91% at 83% 7%, #FFFFFFE6 1%, #130101E6 99%);
    background-size:contain;
    background-repeat: repeat;
    background-attachment: fixed;
}

header
{
    animation-name: InitPagOne;
    animation-duration: 0.8s;
    animation-timing-function: linear;
    margin: 0%;
}

#conteinerSections
{
   margin: 0%;
   padding: 0%;
   position: relative;
   padding: 35px;
   animation-name: InitPagOne;
   animation-duration: 0.8s;
   animation-timing-function: linear;
}

.xd
{
    margin-top: 150px;
}

#conteinerSections section
{
    display:flex;
    flex-flow: row wrap ;
    margin: 0%;
    padding: 0%;
    font-family: "Jersey 25", sans-serif;
}

#imageConteinerSection
{
    position: relative;
    height: 100%;
    width: 27%;
    margin-right: 5%;

}

#imageConteinerSection div
{
    display: flex;
    padding: 11px;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#botCv
{
    position: relative;
    display: flex;
    background: rgb(230, 230, 230);
    color: transparent;
    width: 100%;
    height: 100%;
    margin-top: 30px;
    margin-left: 5px;
    padding: 10px;
    border-radius: 15%;
    font-size: 28px;
    text-align: center;
    font-family: "Jersey 25", sans-serif;
    cursor: pointer;
}
#botCv a
{
    position: absolute;
    margin: -10px 0px 0px -12px;
    opacity: 0%;
    height: 100%;
    width: 100%;
    z-index: 3;
    background-color: aliceblue;
}

#botCv::after
{
    content: 'DESCARGA MI CV';
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    height: 100%;
    width: 100%;
    background: rgb(31, 31, 31);
    color: rgb(230, 230, 230);
    margin-top: -20px;
    margin-left: -20px;
    padding: 10px;
    border-radius: 15%;
    transition: 0.5s ease-out;
}

#botCv:hover::after
{
    color: transparent;
    width: 0%;
    opacity: 0;
}

#botCv::before
{
    content: 'DESCARGA MI CV';
    display: flex;
    position:absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    opacity: 0%;
    margin-top: -18px;
    margin-left: -20px;
    padding: 10px;
    border-radius: 15%;
    transition: 0.3s ease-in;
}

#botCv:hover::before
{
    width: 100%;
    color:rgb(31, 31, 31) ;
    opacity: 100%;
    
}

#imageConteinerSection img
{
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

#infoConteinerPanelSection
{
    position: relative;
    height: 100%;
    width: 66%;
}

#infoConteinerAlanName
{
font-size: 65px;
background: linear-gradient(90deg, rgba(73,73,73,1) 0%, rgba(253,29,29,1) 48%, rgba(42,25,1,1) 100%); 
display: inline-block; 
background-clip: text; 
color: transparent; 
}

#infoConteinerAlanInfo
{
    font-size: 32px;
    margin-top: -70px;
}

#infoConteinerPanelSection div
{
   height: 100%;
   width: 100%;
   padding: 12px;
   margin-bottom: 80px;

}  

.textColor
{
    background: rgb(24,24,24);
    background: linear-gradient(90deg, rgba(24,24,24,1) 94%, rgba(113,113,113,1) 100%);
    background-clip: text;
    color: transparent;
}


#adicionalTextUl
{
    font-size: 22px;
    margin-bottom: 60px;
}

.spaceTextConteiner
{
  user-select: none;
  background-color: rgba(167, 165, 165, 0.688);
  padding: 3px;
  color: rgba(240, 248, 255, 0);
}

#divSkills
{
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    margin-top: -20px;
}

#divSkills ul
{
    
    display: flex;
    flex-flow: column wrap;
    list-style:circle;
    height: 33%;
    width: 33%;
    text-align: start;
    margin: 0%;
    padding: 0%;
    font-size: 18px;
}

.spacingli
{
    margin-top: 8px;
}

#conteinerBallsInformations
{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    height: 100%;
    width: 100%;
    margin: 0%;
    padding: 0%;
}
#conteinerBallsInformations li
{ 
    display: flex;
    height: 25%;
    width: 25%;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0%;
}   

#conteinerBallsInformations li button
{
    text-align: center;
    height: 100%;
    width: 70%;
    padding: 0%;
    border-radius:50%;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#conteinerBallsInformations li button img
{
    height: 60%;
    width: 60%;
    margin-top: 20%;
    margin-bottom: 20%;
    user-select: none;
}

.adicionalSpaceList
{
    
}


#firstBallColor
{
    background-color: var(--ballColorOne,rgb(230, 230, 230));
}

#secondBallColor
{
    background-color:var(--ballColorTwo,rgb(255, 255, 255));
}

#treBallColor
{
    background-color: var(--ballColorTre,rgb(31, 31, 31));
}

#fourBallCollor 
{
    background-color: var(--ballColorForur,rgb(62, 62, 62));
}

.blackStyle
{
    color: rgb(255, 255, 255);
    transition: 0.15s ease-in-out;
    cursor:pointer;
    user-select: none;
    font-size: 33px;
}

.blackStyle .blackImgBall
{
 display: var(--ballDisableBlackStyle,none);
}

.blackStyle .writeImgBall
{
 display: var(--ballActiveBlackStyle,auto);
}

.blackStyle:hover
{
    color: rgb(31, 31, 31);
    --ballColorForur:rgb(186,186,186);
    --ballColorTre:rgb(255, 255, 255);
    font-size: 30px;
    --ballDisableBlackStyle:auto;
    --ballActiveBlackStyle:none;
}

.writeStyle
{
    color: rgb(31, 31, 31);
    transition: 0.15s ease-in-out;
    cursor:pointer;
    user-select: none;
    font-size: 33px;
}

.writeStyle .writeImgBall
{
    display: var(--ballDisableWriteStyle,none);
}

.writeStyle .blackImgBall
{
    display: var(--ballActiveWriteStyle,auto);
}

.writeStyle:hover
{
    --ballColorTwo:rgb(62, 62, 62);
    --ballColorOne:rgb(31, 31, 31);
    color:rgb(255, 255, 255);
    font-size: 30px;
    --ballDisableWriteStyle:auto;
    --ballActiveWriteStyle:none;
}



@keyframes InitPagOne
{
    from
    {
        opacity: 0%;
        margin-top: -50px;
    }

    to
    {
        opacity: 100%;
        margin-top: 0%;
    }
}

@media screen and (max-width:1410px)
{
    #conteinerBallsInformations li div
    {
    font-size: 20px;
    }
}

@media screen and (max-width:1068px)
{
    #imageConteinerSection
    {
    width: 65%;
    margin: 0%;
    margin-bottom: -50px;
    }
    #imageConteinerSection div
    {
    padding: 8px;
    }

    #conteinerSections section
    {
    display: flex;
    flex-flow: column wrap ;
    align-items: center;
    }
    #infoConteinerPanelSection
    {
        width: 100%;
        text-align: center;
    }
    #infoConteinerPanelSection div
    {
        padding-left: 0px;
    }

    #divSkills ul
    {
        padding-left: 20px;
    }
}

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

    #adicionalTextUl
    {
    text-align: center;
    }

    #conteinerBallsInformations li
    { 
        display: flex;
        height: 50%;
        width: 50%;
    }   

    #conteinerBallsInformations li div
    {
    font-size: 20px;
    }

    .adicionalSpaceList
    {
        margin-bottom: 50px;
    }


}


@media screen and (max-width:500px)
{
    #imageConteinerSection
    {
    width: 90%;
    }
}

@media screen and (max-width:344px)
{
    #infoConteinerAlanName
    {
    margin-top: 60px;
    font-size: 45px;
    }

    #infoConteinerAlanInfo
    {
    font-size: 25px;
    margin-top: -50px;
    }
}