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


*{
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    cursor: none;
    --bg-color: #121212;
    --text-color: #fff;
    --accent-color: #EA80FC;
}

body{
    font-family: 'Poppins', sans-serif;
    color: black;
    width: 100vw;
    overflow-x: hidden;
    background: var(--bg-color);
}

.circle {
    height: 32px;
    width: 32px;
    border-radius: 24px;
    /* background-color: black; */
    position: fixed; 
    /* backdrop-filter:brightness(1.07); */
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999999;
    color: #f35626;
	background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
	/* -webkit-background-clip: text;
    background-clip: text;
	-webkit-text-fill-color: transparent; */
	-webkit-animation: hue 8s infinite linear alternate;
    animation: hue 8s infinite linear alternate;
  }

section{
   margin-block: 30px;
   padding-block: 100px;
 

} 

h2{
    font-size: 3rem;
    font-weight: 400;
}

.heroSection{
    padding-top: 20vh;
}

.title{
    width: 100%;
    margin-block: 30px;
    text-align: center;
}

.title>p{
    line-height: 25vh;
    /* font-size: 16rem; */
    font-weight: 700;
    color: white;
}

#developer{
    /* width: 100%; */
    font-size: 15vw;

}
.imgAndName{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.imgAndName img{
    width: 35%;
}

.info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}
#marco{
    color: var(--text-color);
    font-size: 12rem;
    font-weight: 700;
}
.header {
	text-align: center;
	color: #f35626;
	background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
	-webkit-background-clip: text;
    background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 8s infinite linear alternate;
    animation: hue 8s infinite linear alternate;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-180deg);
  }
}
@keyframes hue {
    from {
      -webkit-filter: hue-rotate(0deg);
    }
    to {
      -webkit-filter: hue-rotate(-180deg);
    }
  }

#diaz{
    color: var(--accent-color);;
    font-size: 12rem;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 40px;
    margin-top: -50px;
}

#description{
    font-size: 2rem;
    /* text-shadow: 0 0 10px #00142774; */
    color: white;
    font-weight: 700;
}

.margintop{
    margin-top: 50px;
}

.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.center-column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.column{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.aboutMeContainer{
    background: var(--text-color);
}
#macbookSection{
    /* height: 130vh; */
    height: 100vh;
    width: 100vw;
    z-index: 10;
    /* position: relative; */
}
#macbookSection img{
    width: 100%;
    height: 100%;
}

#macScreen{
    width: 100%;
    height: 100vh;
}

#screenScroll{
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content: center;
  margin-top: -100vh;
  scroll-snap-type: y mandatory;
  /* overflow-y: scroll;
  overflow-x: hidden; */
  overflow: hidden;
  background: url('./img/macoswallpaper.jpg') no-repeat left center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 
}
.block1{
    width: 100%;
    height: 90vh;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 5rem;
    scroll-snap-align: center;
    
}
.block1 h1{
    width: 100%;
    font-size: auto;
}

.arrow{
    margin-top: 1rem;
    width: 6rem;
}

.img{
    width: 25%;
    border-radius: 30px;
}
.textBlock{
    /* color: rgb(28, 28, 28); */
    color: white;
    font-size: 1.2rem;
    border-radius: 20px;
    padding: 5rem;
    background: #001427;
    width: 20%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    font-weight: 400;
    text-align: left;
    
    

}
.textBlock span{
    font-size:3rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
}
.textBlock h2{
    color: white;
    font-weight: 600;
    padding-bottom: 20px;
}
#aboutMe{
    font-size: 15vw;
    color: var(--bg-color);
} 

#knowledgeSection{
    margin-top: 8rem;
}
#knowledge{
    font-size: 13vw;

}
#knowledgeImg{
    width: 50vw;
}

.knowledgeContainer{
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
}

.skills{
    width: 35%;
}

.skills>h1{
    color: var(--text-color);
    font-size: 6rem;
}

#frameworks{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
#frameworks img{
    width: 80%;
    height: 90%;
}

.element{
    border-radius: 30px;
    width: 100%;
    height: 100%;
    /* background-color: #A2B2F5; */
    background: white;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
}

.element:hover{
    border-radius: 10px;
    transition: 0.5s;
    filter: brightness(1.1);
}
.element img{
    height: 150px;
    width: 150px;
}



.element:nth-child(1){
    background-color: rgb(255, 155, 73);
} 
.element:nth-child(2){
    background-color: rgb(255, 110, 110);
} 
.element:nth-child(3){
    background-color: rgb(104, 187, 255);
} 
.element:nth-child(4){
    background-color: rgb(149, 255, 104);
} 
.element:nth-child(6){
    background-color: rgb(205, 164, 255);
} 

/* EDUCATION */

.educationBlock{
    background: var(--text-color);
}

#projectTitle{
    font-size: 15vw;
    color: var(--bg-color);
}

.glass{
    background: rgba(246, 246, 246, 0.1);
    box-shadow: 0 8px 32px 0 rgba(156, 156, 156, 0.35);
    backdrop-filter: blur( 6px );
    -webkit-backdrop-filter: blur( 4px );
}

.colorglass{
    background: rgba(246, 246, 246, 0.1);
    box-shadow: 0 8px 32px 0 rgba(156, 156, 156, 0.35);
    backdrop-filter: blur( 6px );
    -webkit-backdrop-filter: blur( 4px );
}

.projects{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    border-radius: 8rem;
    padding: 1rem;
}

.projectCard{
    width: 100%;
    /* height: 90%; */
    border-radius: 1rem;
    /* padding-inline: 1rem; */
    padding-bottom: 2rem;
    /* cursor: pointer; */
    justify-content: start;

}
.projectCard:hover{
    cursor: pointer;

}
.projectCard img{
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 1rem 1rem 0 0; 
    cursor: pointer;

}


.cardTitle{
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    color: #A2B2F5;
    margin-bottom: 1rem;    
    padding-top: 2rem;
    cursor: pointer;
}
.cardText{
    width: 80%;
    font-size: 1.3rem;
    text-align: center;
    cursor: pointer;
}

a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

#contactSection{
    margin-top: 10vh; 
}

#contactTitle{
    font-size: 15vw;

}

.codeForm{
    margin-top: 3em;
    margin-bottom: 5%;
    width: 60%;
    background: #383690;
    border: 8px solid var(--accent-color);
    border-right: 8px solid var(--accent-color);
    border-radius: 1.5em;
    position: relative;
    /* box-shadow: 20px 20px 0px rgb(165, 145, 255); */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 200px;
    /* flex-direction: column; */
}

.threeCircles{ 
    position: absolute;
    top: 3%;
    left: 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    /* width: 8rem; */
}
.circles{
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
   
}
#circle1{
    background: #ef233c;
}
#circle2{
    background: #faa307;
}
#circle3{
    background: #2dc653;
}

#contactContent{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
}

#contentInput{
    height: 20%;
}
#code{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
}
.codeLine{
    height: 2rem;
    width: 60%;
    border-radius: 2rem;
    background: aqua;
}
#line1{
    background: #06d6a0;
    width: 60%;
}
#line2{
    background: #fca311;
    width: 80%;
}
#line3{
    background: #b8c0ff;
    width: 70%;
}
#line4{
    background: #ef233c;
    width: 50%;
}
#line5{
    background: #48cae4;
    width: 60%;
}
#rrss{
    width: 100%;
}
.social{
    width: 4em;
    color: var(--text-color);
    fill: white;
    margin-inline: 1em;
    cursor: pointer;
   transition: 0.5s;

}

.social:hover{
    transition: 0.5s;

}
#rrssText{
    color: var(--text-color);
    font-size: 2em;
    font-weight: 500;
    width: 100%;
    margin-bottom: 2.5rem;
}
#rrss>a{
    cursor: pointer; 
}
#mail{
    margin-top: 1rem;
    font-size: 2rem;
    color: white;
    background-color: #ef4343;
    padding: 1rem;
    border-radius: 10px;
    
}

#downloadCV{
    font-family: Poppins;
    margin-top: 2rem;
    font-size: 2rem;
    width: 20rem;
    padding: 1rem;
    border-radius: 10px;
    border-style: none;
    background-color: rgb(199, 255, 251);
    font-weight: 500;
    color:#001427;
    box-shadow:6px 6px #06d6a0;
    cursor: pointer;
    transition: 0.5s;
}

#downloadCV:hover{
    width: 22rem;
    box-shadow: 10px 10px #06d6a0;
    transition: 0.5s;
}

@media (max-width: 600px){

    .heroSection{
        padding-top: 10vh;
    }
    .imgAndName{
        flex-direction: column;

    }
    .imgAndName>img{
        width: 80%;
    }
    .info{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 20px;
    }
    #marco{
        font-size: 18vw;
    }
    #diaz{
        font-size: 24vw;
    }

    #screenScroll{
        background: none; 
        width: 100vw;
    }
   #aboutMeImg{
    width: 90vw;
    display: none;
   }
   .block1{
    flex-direction: column;
    width: 100%;
   }
   .block1>.img{
    width: 90%;
   } 
   .block1>.textBlock{
    width: 75%;
    padding: 2rem;
    background: var(--bg-color);

   } 
   .block1:nth-child(2){
    flex-direction: column-reverse;
   }
   .knowledgeContainer{
    flex-direction: column;
   }

    #knowledgeImg{
     width: 90%;
    }
    .skills{
     width: 90%;
    }

   .title>p{
    line-height: normal;   
   }
   .skills>h1{
    font-size: 6vw;
   }

   .element{
    border-radius: 5px;
   }
   .projects{
    display: flex;
    padding: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }

   .projectCard{
    width: 80%;
   }
   #contactContent{
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;    
    align-items: center;
   }
   .codeForm{
    width: 95%;
    padding-block: 8rem;
    box-shadow: none;
   }
   #code{
    width: 100%;
    margin-top: 3rem;
    align-items: center;
   }
   .social{
    width: 20%;
   }
   #downloadCV{
    width: 100%;
    font-weight: 500;
    font-size: 1.2rem;
   }
   #downloadCV:hover{
    width: 100%;
   }

   .circle{
    display: none;
   }
}