/* GENERAL STYLING */

  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Poppins', sans-serif;
    height: 100%;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

html{
    scroll-behavior: smooth;
}

p{
    color: rgb(85, 85, 85);
}

/* TRANSITION */

a, 
.btn{
    transition: all 300ms ease;
}

/* DESKTOP NAV */

nav, 
.nav-links{
    display: flex;
}

nav{
    justify-content: space-around;
    align-items: center;
    height: 17vh;
}

.nav-links{
    gap: 2rem;
    list-style: none;
    font-size: 1.5rem;
}

a{  
    color: black;
    text-decoration: none;
    text-decoration-color: white;
}

.b:hover{
    color: grey;
    text-decoration: none;
}

a:hover {
    color: grey;
    text-decoration: underline;
    text-underline-offset: 1rem;
    text-decoration-color: rgb(181, 181, 181);
}


.logo {
font-size: 2rem;
}

/* .logo:hover{
    cursor: default;
} */

/* HAMBURGER MENU */

#hamburger-nav{
    display: none;
}

.hamburger-menu{
    position: relative;
    display: inline-block;
}

.hamburger-icon{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 24px;
    width: 30px;
    cursor: pointer;
}

.hamburger-icon span{
    width: 100%;
    height: 2px;
    background-color: black;
    transition: all 0.3 ease-in-out;
}

.menu-links {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    width: fit-content;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3 ease-in-out;
}

.menu-links a {
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 1.5rem;
    color: black;
    text-decoration: none;
    transition: all 0.3 ease-in-out;
}

.menu-links li{
    list-style: none;
}

.menu-links.open{
    max-height: 300px;
}

.hamburger-icon.open span:first-child{
    transform: rotate(45deg) translate(10px, 5px);
}
.hamburger-icon.open span:nth-child(2){
    opacity: 0;
}
.hamburger-icon.open span:last-child{
    transform: rotate(-45deg) translate(10px, -5px);
}


.hamburger-icon span:first-child{
    transform: none;
}
.hamburger-icon span:first-child{
    opacity: 1;
}
.hamburger-icon span:first-child{
    transform: none;
}

/* SECTIONS */

section{
    padding: 4vh;
    height: 96vh;
    margin: 0 10rem;
    box-sizing: border-box;
    min-height: fit-content;
}

.section2{
    padding: 10vh;
    height: 60vh;
    margin: 0 12rem;
    box-sizing: border-box;
    width: fit-content;
}

.section-container{
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: aqua; */
}

/* PROFILE SECTION */

#profile{
    display: flex;
    justify-content: center;
    gap: 8rem;
    height: 80vh;
    flex-wrap: wrap;

}


.section__pic-container{
    display: flex;
    position: relative;
    /* background-color: black; */
    /* height: 400px;
    width: 400px; */
    margin: auto 0;
}
.section__pic-container3{
    display: flex;
    justify-content: center;
    z-index: -100;
    height: 300px;
    width: 400px;
    background-color: aqua;
    margin: auto 0;
    /* margin: auto 0; */
}

.section__pic-container2{
    display: flex;
    height: 400px;
    width: 400px;
    /* margin: auto auto; */
}

.section__vid-container{
    display: flex;
    height: 250px;
    width: 400px;
    margin: auto 0;
}


.section__text{
    align-self: center;
    text-align: center;
    text-justify: distribute;
    /* background-image: url(./assets/Recurso\ 10.svg); */
    background-size: 70%;
    background-position-x: center;
    background-repeat: no-repeat;
    /* animation: rotate 10s linear infinite; */
    
}

.section__text p{
    font-weight: 600;
}
.section__text__p1{
    text-align: center;
}
.section__text__p2{
    text-align: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.title{
    font-size: 3rem;
    text-align: center;
}

.title2{
    font-size: 2rem;
    text-align: center;
}

#socials-container{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem;
}

/* ICONS */

.icon{
    cursor: pointer;
    height: 2rem;
}

.flag {
    cursor: pointer;
    height: 1.5rem;
    justify-self: center;
    margin-left: 0;
    
}

.sw-icon {
    height: 3rem;
}

.arduino-icon {
    height: 2rem;
}

/* BUTTONS */

.btn-container{
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn {
    font-size: 600;
    transition: all 300ms ease;
    padding: 1rem;
    width: 8rem;
    border-radius: 2rem;
}

.btn2 {
    font-size: 600;
    transition: all 300ms ease;
    padding: 1rem;
    width: 12rem;
    border-radius: 2rem;
}

.btn-color-1, .btn-color-2{
    border: rgb(53, 53, 53) 0.1rem solid; 
}

.btn-color-1:hover, 
.btn-color-2:hover{
    cursor: pointer;
}

.btn-color-1, 
.btn-color-2:hover{
   background: rgb(53, 53, 53);
   color: white;
}

.btn-color-1:hover{
   background: rgb(0, 0, 0);
}

.btn-color-2{
   background: none;
}

.btn-color-2:hover{
  border: rgb( 255, 255, 255) 0.1rem solid;
}

.btn-container{
    gap: 1rem;
}

/* ABOUT SECTION */

#about{
    position: relative;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-containers{
    gap: 2rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.about-details-container{
    justify-content: center;
    flex-direction: column;
}

.about-containers,
.about-details-container{
    display: flex;
}

.about-pic{
    border-radius: 2rem;
}

.about-pic2{
    border-radius: 0rem;
    scale: 0.75;
    margin-top: -150px;
}

.about-pic3{
    border-radius: 2rem;
    scale: 0.7;
    margin-left: -5rem;
}

.arrow{
    position: absolute;
    right: -5rem;
    bottom: 2.5rem;
}

.details-container{
    padding: 1.5rem;
    flex: 1;
    background: white;
    border-radius: 2rem;
    border: rgb(53, 53, 53) 0.1rem solid;
    border-color: rgb(163, 163, 163);
    text-align: center;
    
    /* font-size: small; */
}

.details-container2{
    padding: 1.5rem;
    flex: 1;
    background: white;
    border-radius: 2rem;
    border: rgb(53, 53, 53) 0.1rem solid;
    border-color: rgb(163, 163, 163);
    text-align: center;
    /* font-size: small; */
}

.text-container {
    text-align: justify;
}

.text-container2 {
    text-align: justify;
    margin-top: 1.5rem;

}

.text-container3 {
    text-align: justify;
    margin-top: 0.25 rem;
}


.text-container4 {
    text-align: justify;
    /* width: 5rem; */
}


.section-container{
    gap: 2rem;
    height: 80%;
    width: 90%;
}


.section__pic-container{
    display: flex;
    justify-content: center;
    height: 400px;
    width: 400px;
    margin: 2rem 1rem;
    /* background-color: aqua; */
}

/* EXPERIENCE SECTION*/

#experience{
    position: relative;
}


.experience-sub-title{
    color: rgb(85, 85, 85);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.experience-details-container{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.k {
    gap: 2rem;
    width: 90%;
    display: flex;
    justify-content: space-around;
    flex-direction: column; /* Update this line to set flex-direction to column */
    /* background-color: aqua; */
}
/* prueba */
/* .about-containers-know{
    gap: 2rem;
    margin-bottom: 5rem;
    margin-top: 2rem;
    margin: 2rem;
    
}

.about-containers-k{
    display: flex;
    flex-direction: row;
} */
/* fin prueba */

.article-container{
    display: flex;
    text-align: initial;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 2.5rem;
    justify-content: space-around;
}


article{
    display: flex;
    width: 10rem;
    justify-content: space-around;
    gap: 0.25rem;
    text-align: left;
}

article p {
    text-align: left;
}

article .icon{
    cursor: default;
}

/* PROJECTS SECTION */

#projects{
    position: relative;
}

.color-container {
    border-color: rgb(163, 163, 163);
    background: rgb( 255, 255, 255);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-img{
    border-radius: 2rem;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.project-img:hover{
    transform: scale(1.05);
}

.video1, .video2{
    height: 90%;
    width: 100%;
    border-radius: 2.5rem;
    margin-top: 1rem;
}


.pimg{
    border-radius: 2rem;
    width: 90%;
    height: 80%;
}

.project-title {
    margin: 1rem;
    color: black;
}

.project-btn {
 color: black;
 border-color: rgb(163, 163, 163);
}


/* CONTACT */
#contact {
    position: relative;
}
#contact {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 70vh;
}

.contact-info-upper-container {
    display: flex;
    justify-content: center;
    border-radius: 2rem;
    border: rgb(53, 53, 53);
    border-color: rgb(163, 163, 163);
    background: rgb(250 ,250 ,250);
    margin: 2rem auto;
    padding: 0.5rem;
}

.contact-info-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem;
}

.contact-info-container p {
    font-size: larger;
}

.contact-icon {
    cursor: default;
}

.email-icon {
    height: 2.5rem;
}

/* FOOTER SECTION */

footer p{
    text-align: center;
}

/* animation styling */


.profile__animation, .prof-pic, .neck, .text-container-anim{
    position: absolute;
}

.text-container-anim{
    display: flex;
    flex-direction:  column;
    text-align: left;
    text-indent: 1rem;
    background-color: white;
    border-radius: 2rem 2rem 0 2rem;
    font-size: large;
    font-size: 550%;
    height: fit-content;
    width: max-content;
    transform: translate(-115%,-300%);
    border: 10px solid  grey;
    box-sizing: border-box;
    /* transition: all 1s  0s ease-in ; */
    /* transition: opacity 0.1s ease-out; */
    /* transition: all 0.1s ease-out; */
}

/* span{
    transition: all 3s ease;
} */

#angleDisplay{
    margin: 0 3rem;
} 



.profile__animation {
    /* display: flex; */
    z-index: 2;
    /* top: -22%;
    left: -12%; */
    top: 35%;
    left: 38%;
    /* background-color: blanchedalmond; */
    /* height: 100px;
    width: 100px; */
    border-radius: 50%;
    /* rotate: -50deg; */
    box-sizing: border-box;
    image-resolution: 200%;
    background-image: var(--tl-1);
    transition: transform 0.6s ease;

/* 
    top: 110%;
    left: 110%; */
    /* image-rendering: pixelated; */
    /* background-image: url(./assets/animations/avatar5.svg); */
    /* background-image: var(--tl-1); */
    /* background-color: blueviolet; */
    height: 475px;
    width: 400px;
    margin: -200px -150px;
    /* background-position: center; */
    /* background-size:contain; */
    scale: 0.25;
    /* display: block; */
}
.profile__animation-draw{
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 0;
    display: block;
    background:rgb(196,152,105);
    border-radius: 60%;
    transition: transform 0.6s ease;

/* 
    top: 110%;
    left: 110%; */
    /* image-rendering: pixelated; */
    /* background-image: url(./assets/animations/avatar5.svg); */
    /* background-image: var(--tl-1); */
    /* background-color: blueviolet; */
    height: 325px;
    width: 275px;
    margin: 20px 65px;
    /* background-position: center; */
    /* background-size:contain; */
    scale: 0.25;
    /* display: block; */
}


.profile__animation-draw::before{
    content: '';
    position: absolute;
    top: 50%;
    margin: auto 1rem;
    transform: translate(-2%, -160%);
    height: 115px;
    width: 250px;
    border-radius: 40px 40px 5px 5px;
    background-color: rgb(0, 0, 0);
    /* border: 4px solid rgb(163, 68, 5); */
    box-sizing: border-box;

}
.profile__animation-draw::after{
    content: '';
    position: absolute;
    top: 50%;
    margin: auto 1rem;
    transform: translate(65%, 275%);
    height: 30px;
    width: 105px;
    border-radius: 0px 0px 40px 40px;
    background-color: rgb(255, 255, 255);
    /* border: 4px solid rgb(163, 68, 5); */
    box-sizing: border-box;

}

.prof-pic {
    z-index: 1;
    height: 400px;
    width: 400px;
    cursor: pointer;
    border-radius: 50%;
}



/* #profile__animation__img{
    top: 110%;
    left: 110%;
    image-rendering: pixelated;
    background-image: url(./assets/animations/avatar5.svg);
    background-image: var(--tl-1);
    background-color: blueviolet; 
    height: 475px;
    width: 400px;
    margin: -200px -150px;
    background-position: center; 
    background-size:contain;
    scale: 0.25;
    display: block; 
}

.profile__animation__img{
    justify-content: center;
    height: 110%; 
} 

*/
/* EYES */

#eyebox{
    display: flex;
    position: relative;
    /* margin: 0px 20px; */
    flex-direction: row;
    justify-content: center;
    /* background-color: blueviolet; */
    
}
#eyebrows{
    display: flex;
    position: relative;
    margin: -225px;
    /* background-color: blue; */
    flex-direction: row;
    justify-content: center;
    z-index: 3;
}
#nose{
    display: flex;
    position: relative;
    margin: -80px;
    /* background-color: blue; */
    flex-direction: row;
    justify-content: center;
}
#ears{
    display: flex;
    position: relative;
    margin: auto;
    /* background-color: blue; */
    flex-direction: row;
    justify-content: center;
}

.eye{
    height: 40px;
    width: 40px;
    display: block;
    background:rgb(255, 255, 255);
    margin: 150px 45px;
    border-radius: 50%;
    scale: 1.25;
    
    /* box-shadow: 0px 5px 45px rgba(170, 96, 0, 0.2); */
}
.eyebrow{
    z-index: 3;
    height: 10px;
    width: 75px;
    display: block;
    background:rgb(0, 0, 0);
    margin:10px 20px;
    border-radius: 10%;
    transform: rotate(0deg); 
    
    /* box-shadow: 0px 5px 45px rgba(170, 96, 0, 0.2); */
}


.neck{
    z-index: 4;
    height: 120px;
    width: 130px;
    display: block;
    background:rgb(196,152,105);
    transform: translate(55%,250%);
    border-radius: 0 0 10% 10%;
    /* transform: rotate(180deg);  */
    
    /* box-shadow: 0px 5px 45px rgba(170, 96, 0, 0.2); */
}

.neck::before{
    content: '';
    height: 150px;
    width: 300px;
    display: block;
    background:rgb(158, 146, 134);
    transform: translate(-28%,20%);
    border-radius: 50% 50% 0 0;
    /* transform: rotate(180deg);  */
    
    /* box-shadow: 0px 5px 45px rgba(170, 96, 0, 0.2); */
}
.ear{
    z-index: 5;
    height: 65px;
    width: 60px;
    display: block;
    background:rgb(196,152,105);
    margin: auto 50px;
    transform: translate(-180%, 350%);
    border-radius: 50%;
    /* transform: rotate(180deg);  */
    
    /* box-shadow: 0px 5px 45px rgba(170, 96, 0, 0.2); */
}

.ear:last-child{
    transform: rotate(180deg);
    transform: translate(180%, 350%);
}
.nose{
    z-index: 3;
    height: 50px;
    width: 70px;
    display: block;
    background:rgb(0, 0, 0);
    margin:275px;
    border-radius: 50%;
    scale: 0.75;
}
.nose::before{
    content: '';
    height: 50px;
    width: 70px;
    display: block;
    background:rgb(196,152,105);
    margin:5px;
    border-radius: 50%;
}





.eye::before{
    content: '';
    position: absolute;
    top: 50%;
    margin: auto 1rem;
    transform: translate(-50%,-50%);
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    border: 4px solid rgb(163, 68, 5);
    box-sizing: border-box;
}
/* .eyebrow::before{
    content: '';
    position: absolute;
    top: 50%;
    margin: auto 0rem;
    transform: translate(200%,25%);
    height: 80px;
    width: 50px;
    border-radius: 50%;
    background:rgb(196,152,105);
    box-sizing: border-box;
} */


#profile{

    border-radius: 3rem;
}

.earth{
    width: 6rem;
    height: 6rem;
    position: absolute;
    left: 10rem;
    top: 15rem;
    background: url(./assets/Recurso\ 6.svg);
    animation: orbit 8s infinite ease-in-out;
    z-index: 1;
}

.mars{
    width: 3rem;
    height: 3rem;
    left: 15rem;
    top: 13rem;
    position: absolute;
    background: url(./assets/Recurso\ 7.svg);
    animation: orbit 6s infinite ease-in-out;
    z-index: 1;
}

.moon-container{
    width: 6rem;
    height: 6rem;
    position: absolute;
    left: 10rem;
    top: 15rem;
    animation: orbit3 8s infinite ease-in-out;
    z-index: 1;
    /* background-color: blueviolet; */
}
.moon{
    width: 3rem;
    height: 3rem;
    left: -3.5rem;
    top: 0rem;
    position: relative;
    background: url(./assets/Recurso\ 8.svg);
    animation: orbit2 6s infinite ease-in-out;
}

/* .earth, .mars{
    border-radius: 50%;
    background-repeat: repeat;
    background-size: 200% 100%;
} */



/* Recomendations */


.recom{
    position: relative;
    display: flex;
    justify-content: space-evenly;
    /* flex-direction: column; */
    /* background-color: rgb(26, 68, 159); */
    /* height: 10vh; */
    height: 10%;
}


.dav{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    /* background-color: aqua; */
    width: 40%;



}



.davlund{
    aspect-ratio: 1;
    width: 50%;
    height: 50%;
    z-index: 1;
    height: 100px;
    width: 100px;
    cursor:default;
    border-radius: 50%;
    
}

.dd{
    padding: 0 1rem;
    position: relative;
    /* background-color: blueviolet; */
    display: flex;
    /* flex-direction: column; */
    justify-content: space-evenly;
    align-items: center;

    gap: 3rem;
    margin: 2rem 1rem;
}


.df{
    margin-bottom: 2rem;
}

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