*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --main-bg-color: #071a37;
    /* --main-bg-color: #071a37;  #0a192f #A5B5A7*/
    --secondary-bg-color: #0a192f;
    /* --secondary-bg-color: #071a37; */
    --main-font-color: #ec4444;
    --secondary-font-color: #e3dbd1;
    --desc-bg-color: #0a192fdb;
    --border-color: #3b282f;
}



html{
	scroll-behavior: smooth;
}

body{
    position: relative;
}

::-webkit-scrollbar{
    width: 8px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: var(--main-font-color);
}

body {
    font-family: 'Sansita', sans-serif;
    background: var(--secondary-bg-color);
    line-height: 1.3;
}

.menu-cover {
    display: none;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    position: absolute;
    background-color: var(--main-bg-color);
    z-index: 2000;
    
}

.menu-cover ul {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 2.5em;
    list-style: none;
}

.menu-cover ul li {
    
    padding: 1em 0;
}

.menu-cover ul li a {
    text-decoration: none;
    color: var(--main-font-color);
}

.section-index{
    display: flex;
    height: 100vh;
}

.left {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    background: var(--main-bg-color);
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.right {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    height: 100%;
    width: 35%;
}

.svg-mini {
    width: 100%;
    padding: 1em 0;
    display: none;
}

/*NAVBAR SECTION*/

nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 10vh;
    background-color: transparent;
    padding: 0 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.5s;
    z-index: 1000;
}

.ul-nav{
    margin: 0;
    padding: 0 3em 0 0;
    display: flex;
}

nav ul li {
    list-style: none;
}

 nav ul li a{
    display: block;
    position: relative;
    text-decoration: none;
    color: var(--secondary-font-color);
    font-size: 1.2em;
    transition: all 300ms ease-in;
    padding: 0 1em;
}

nav ul li a:hover{
    color: var(--secondary-font-color);
}

nav ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0.15rem;
    left: 0;
    bottom: -8px;
    background: var(--secondary-font-color);
    transform: scale(0,1);
    transition: transform 0.3s ease;
    transform-origin: 0 100%;
    
}

nav ul li a:hover::after {
    transform: scale(1,1);
}

.brand {
    font-weight: bold;
    color: var(--main-font-color);
    text-decoration: none;
    font-size: 1.5em;
    padding: 0 0 0 3em;
}

 .menu-btn  {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all .5s ease-in-out;
}

#menu-burger {
    display: none;
    z-index: 2001;
}

 .menu-btn__burger{
    width: 28px;
    height: 3px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255,101,47,.2);
    transition: all .3s ease-in-out;
}

 .menu-btn__burger::before{
    content: '';
    position: absolute;
    width: 33px;
    height: 3px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255,101,47,.2);
    transition: all .3s ease-in-out;
}


 .menu-btn__burger::after{
    content: '';
    position: absolute;
    width: 23px;
    height: 3px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255,101,47,.2);
    transition: all .3s ease-in-out;
}

 .menu-btn__burger::before{
    transform: translateY(-8px);
}

 .menu-btn__burger::after {
    transform: translateY(8px);
}

/*ANIM BURGER*/
.menu-btn.open .menu-btn__burger {
    transform: translateX(-20px);
    background: transparent;
    box-shadow: none;
}


.menu-btn.open .menu-btn__burger::before {
    transform: rotate(45deg) translate(18px, -18px);
    width: 23px;
}

.menu-btn.open .menu-btn__burger::after {
    transform: rotate(-45deg) translate(18px, 18px);
    background-color: #e3dbd1;
}

/*INFO SECTION*/
.info-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-items: center;
    align-items: center;
    padding: 3em;
}

.projects-link-2 {
    display: none;
}

.description span {
    color: var(--main-font-color);
    font-weight: 600;
}

.info {
    display: flex;
    flex-direction: column;
    padding: 4em;
}

.info h1 {
    font-size: 3em;
    line-height: 0.9em;
    color: var(--main-font-color);
}


.info .description {
    margin: 0.3em 0;
    font-size: 22.5px;
    color: var(--secondary-font-color);
    padding-right: 2em;
}

.info p{
    margin: 0.3em 0;
    font-size: 22.5px;
    color: var(--secondary-font-color);
    padding-right: 2em;
}


.info-container a{
    text-align: center;
    font-weight: bold;
    width: 200px;
    cursor: pointer;
    border: none;
    font-size: 1.3em;
    color: var(--secondary-font-color);
    border: 2px solid var(--secondary-font-color);
    padding: 8px 25px 8px 25px;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.info-container a:hover{
    color: var(--main-bg-color);
    background-color: var(--secondary-font-color);
}

.info .projects-link-1 {
    margin-top: 0.3em;
}

/*SVG SECTION*/


.image{
    /* position: absolute; */
    margin-left: -75%;
    /* margin-top: 9%; */
    width: 100%;
    height: 100vh;
    display: flex;
    justify-items: flex-start;
    align-items: center;
    padding: 0 3em 3em 0;
}

/*SKILLS*/

.section-skills {
    padding: 100px 2em;
    background-color: var(--secondary-bg-color);
    
}

.skills-container {
    display: flex;
    margin: 0 auto;
    max-width: 1000px;
}

.person-sitting {
    width: 100%;
}

.skills-left {
    width: 55%;
    order: 2;
    font-size: .95em;
    line-height: 1.8em;
}




.skills-desc, .skills-title {
    color: var(--secondary-font-color);
    font-size: .95em;
    line-height: 1.8em;
    font-weight: 400;
    padding: 25px;
    background: var(--secondary-bg-color);
    border-radius: 4px;
    border: 2px solid var(--border-color);
}

.skills-title {
    font-size: 2.3em;
    color: var(--main-font-color);
    text-align: center;
    line-height: 1em;
    
}

.skills-desc p {
    margin-bottom: 0.7em;
}

.skills-desc span {
    text-align: center;
    border: 1px solid var(--border-color);
    padding: 3px 0px;
    border-radius: 4px;
    margin-bottom: 7px;
    color: var(--main-font-color);
}

.skills-desc span span {
    color: var(--main-font-color);
    margin-right: 0.5em;
}

.techs {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 140px));
    gap: 0px 10px;
    overflow: hidden;
}

.skills-right {
    width: 45%;
    order: 1;
    text-align: center; 
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

}


.social-icons img{
    width: 40px;
    height: 40px;
    margin: 0 0.4rem;
}

#ground {
    fill: var(--secondary-font-color);
}

/*PROJECTS*/
.section-projects{
    background: var(--main-bg-color);
    padding: 6em 2em;
    text-align: center;
    border-top-left-radius: 1000px 300px;
    border-bottom-right-radius: 1000px 300px;
}

.projects-container, .projects-title {
    margin: 0 auto;
    max-width: 1000px;
    margin-bottom: 4em;
}

.projects-title {
    margin-bottom: 2em;
}

.projects-title h1 {
    text-align: start;
    padding-left: 1em;
    color: var(--main-font-color);
    font-size: 2.3em;
}

.projects-left {
    display: grid;
    place-content: center;
}

.projects-left p span a {
    color: var(--main-font-color);
    text-decoration: none;
}

.subtitle span, .skills-title span {
    border-bottom: 3px solid;
    padding-bottom: 4px;
}


.section-projects a img{
    border-radius: 0.2em;
}

.subtitle {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--main-font-color);
    letter-spacing: .25em;
    padding-bottom: 1.5em;
    padding-left: 3em;
}

.subtitle a {
    text-decoration: none;
    color: var(--main-font-color);
}

.featured-title {
    color: var(--main-font-color);
    font-size: 1.3em;
    margin-top: -.4em;
    display: block;
    margin-bottom: .4em;
}

.featured-desc {
    color: var(--secondary-font-color);
    font-size: .95em;
    line-height: 1.8em;
    font-weight: 400;
    padding: 25px;
    position: relative;
    left: 16%;
    background: var(--desc-bg-color);
    border-radius: 4px;
    width: 500px;
    border: 2px solid rgb(255 101 47 / 20%);
    z-index: 2;
}

.featured-title, .projects-container {
    text-align: left;
    display: grid;
    grid-template-columns: 45% auto;
}

.projects-right {
    position: relative;
}

.projects-right img {
    width: 100%;
    height: 100%;
}

.project-techs {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 0.8em;
    color: var(--secondary-font-color);
    background-color: var(--desc-bg-color);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 2px solid rgb(255 101 47 / 20%);
}

 .project-techs ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 1em;
    height: 100%;
}

.users {
    color: var(--main-font-color);
}

.clear{
    clear: both;
    float: none;
}








/*QUOTE SECTION*/
.section-quote {
    padding: 100px 2em;
    background-color: var(--main-secondary-color);
}

.section-quote .quote-container {
    margin: 0 auto;
    max-width: 1000px;
}

.section-quote .quote-label {
    margin: 0 auto;
    width: 50%;
    height: 500px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: -3;
}


.section-quote p {
    font-size: 2.3em;
    font-weight: 600;
    color: var(--main-font-color);    
    width: 100%;
    padding: 0 1em;
}

.section-quote p:nth-child(1) {
    text-align: start;
    color: var(--secondary-bg-color);
}

.section-quote p:nth-child(1) {
    text-align: start;
}

.section-quote p:nth-child(2) {
    text-align: end;
}


/*CONTACT SECTION*/
.section-contact-me {
    padding: 100px 2em;
    background-color: var(--main-bg-color);
    border-top-left-radius: 1000px 300px;
}

.contact-container {
    margin: 0 auto;
    max-width: 1000px;
    margin-bottom: 4em;
    margin-top: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    /* display: grid;
    grid-template-columns: 1fr 1fr; */
}

.contact-left {
    max-width: 400px;
    margin: 0 auto;
}

.contact-left svg{
    border-bottom-right-radius: 30%;
    /* padding: 2em; */
    border-top-left-radius: 1000px 500px;
    /* background-color: var(--main-font-color); */
    
}

.contact-right a {
    text-decoration: none;
    color: var(--main-font-color);
}


.contact-right h1 {
    font-size: 3em;
    color: var(--main-font-color);
}


.contact-right .send {
    font-size: 1.4em;
    color: var(--secondary-font-color);
}

.contact-right .email {
    font-size: 1.4em;
    color: var(--main-font-color);
}

#paper {
    animation: hand-move 3s infinite alternate;
    transform-origin: center;
    
}

@keyframes hand-move {
    100%{
        /* transform: rotateX(45deg); */
        transform: translateY(11%);
        opacity: 0.5;
        z-index: -1;
    }

    0% {
        transform: translateY(0%);
        opacity: 1;
    }
    /* from{
        transform: rotateX(20deg);
    }
    to{
        transform: rotateX(-20deg);
    } */
}



#person {
    animation: person 2s ease-in-out infinite alternate;
    
}

#person #pants {
    fill: var(--secondary-font-color);
}

#brownBall {
    fill: none;
}


#cube {
    animation: cube 4s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
    fill: var(--main-font-color);
}

#top-1, #top-left, #top-right, #top-left-down, #top-right-down, #top-mid-left, #top-mid-right{
    fill: var(--main-font-color);
}

#foot-right, #foot-left{
    fill: var(--secondary-font-color);
}

#link-ball, #git-ball {
    fill: var(--secondary-font-color);
}

#circle, #line {
    fill: var(--secondary-font-color);
}

#git-ball {
    position: relative;
}

@keyframes cube {
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }
}

@keyframes person {
    from{
        transform: rotateX(10deg);
    }
    to{
        transform: rotateX(20deg);
    }
}

@media (max-width: 1600px) {
    .info h1 {
        font-size: 3em;
        color: var(--main-font-color);
    }

    .info .description p{
        padding-right: 0;
    }

    .image {
        padding-right: 0;
    }


}

@media (max-width: 1220px) {
    .info h1 {
        font-size: 2.3em;
        color: var(--main-font-color);
    }

    .info-container a {
        font-size: 1em;
    }

    .info .description {
        font-size: 1.2em;
    }

    .info .button{
        font-size: 1.2em;
    }

    .brand {
        padding-left: 3em;
    }

    .brand, nav ul li a {
        font-size: 1.1em;
    }


    .projects-right {
        padding-right: 0;
    }

    .person-sitting {
        height: 200px;
    }


}

@media (max-width: 1024px) and (min-width: 768px) {

    .info .description, .info p{
        padding-right: 0;
    }

    nav {
        padding: 0 2em;
    }

    .brand {
        padding: 0;
    }


    .section-projects {
        padding: 50px 2em;
    }

    .projects-title{
        padding-left: 0;
    }

    .projects-title h1 {
        font-size: 2.3em;
        padding-left: 0;
    }

    .projects-title {
        padding: 0 2em;
    }

    .projects-left {
        padding: 0 0 0 5em;
    }

    .skills-container {
        padding: 100px 0;
    }

    .right, nav .ul-nav {
        display: none;
    }

    #menu-burger {
        display: block;
    }

    .left {
        width: 100%;
    }

    .info {
        padding: 2em 2em 0 2em;
    }

    .logo {
        padding-left: 2em;
    }

    .info-container {
        padding: 0;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .info-container a {
        width: 400px;
    }

    .info-container .subtitle {
        padding-bottom: 1.5em 0;
    }

    .projects-title {
        padding: 0;
    }

    .projects-link-2 {
        display: block;
    }

    .projects-link-1 {
        display: none;
    }

    .svg-mini {
        display: block;
    }


    
    .section-quote .quote-label {
        width: 500px;
        height: 500px;
    }

    .contact-container {
        flex-direction: column;
    }

    .contact-right {
        text-align: center;
    }

    .contact-left svg {
        width: 100%;
    }

}
@media (max-width: 767px) {
    .featured-title, .projects-container {
        text-align: left;
        display: grid;
        grid-template-columns: auto;
    }

    .featured-desc, .skills-desc {
        margin-bottom: 1.5em;
        text-align: start;
        left: 0;
        width: 100%;
    }

    .projects-title h1 {
        text-align: center;
        padding-left: 0;
        font-size: 2.3em;
    }

    .projects-title {
        padding: 0;
    }

    .projects-left, .featured-title {
        text-align: center;
    }

    .projects-left, .section-skills {
        padding: 0;
    }

    .section-projects, .skills-container{
        padding:100px 2em;
        /* border-top-left-radius: 0; */
    }

    .skills-container {
        flex-direction: column;
    }

    .skills-left, .skills-right{
        width: 100%;
        text-align: center;
        padding-left: 0;
    }

    .skills-left {
        order: 1;
    }

    .skills-right {
        order: 2;
        padding-top: 2em;
    }

    .right, nav .ul-nav {
        display: none;
    }


    #menu-burger {
        display: block;
    }

    .left {
        width: 100%;
        border-top-right-radius: 0;
    }

    .info {
        padding: 2em 2em 0 2em;
    }

    nav {
        padding: 0 2em;
    }

    .brand {
        padding-left: 0;
    }

    .info h1 {
        font-size: 1.8em;
    }

    .info .description, .info p{
        padding-right: 0;
        font-size: 1em;
    }

    .info-container {
        padding: 0;
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .info-container a {
        width: 85%;
    }

    .subtitle {
        padding-left: 0;
    }

    .projects-right {
        margin-left: 0;
        margin-top: 0;
    }

    .projects-link-2 {
        display: block;
    }

    .projects-link-1 {
        display: none;
    }

    .svg-mini {
        display: block;
    }
 

    .techs {
        grid-template-columns: repeat(2, minmax(100px, 140px));
    }

    .section-quote .quote-label {
        width: 300px;
        height: 300px;
    }

    .section-quote .quote-label p {
        font-size: 1.5em;
    }

    .contact-container {
        flex-direction: column;
    }

    .contact-right {
        text-align: center;
    }

    .contact-right h1 {
        font-size: 2.3em;
    }

    .contact-right p {
        font-size: 2em;
    }

    .email{
        font-size: 0.7em;
    }

    .svg-mini {
        height: 350px;
    }

    .contact-left svg {
        width: 100%;
    }

    .menu-cover ul {
        
        font-size: 1.7em;
        
    }

    .hid{
        display: none;
    }
}

@media (max-width: 350px) {

    
    nav {
        padding: 0 2em;
    }

    .brand {
        padding-left: 0;
    }

    .social-icons img {
        width: 30px;
        height: 30px;
    }

    .svg-mini {
        height: 280px;
    }

    .techs {
        grid-template-columns: repeat(1, minmax(100px, 100%));
    }

    .section-quote .quote-label {
        width: 250px;
        height: 250px;
    }

    .section-quote .quote-label p {
        font-size: 1.3em;
    }

    .contact-container {
        flex-direction: column;
    }

    .right, nav .ul-nav {
        display: none;
    }

    #menu-burger {
        display: block;
    }


}

@keyframes circle {
    100% { clip-path: inset(0% round 0%); }
    0% { clip-path: inset(50% round 50%); }
  }

  @keyframes circles {
    0% { clip-path: inset(0% round 0%); }
    100% { clip-path: inset(50% round 50%); }
  }


  .ul-nav li a, .brand, .menu-btn, .link-cover a{
    opacity: 0;
    animation: dropIn 2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: calc(var(--order) * 200ms);
  }

  @keyframes dropIn {
    20% {
      opacity: 0;
      transform: translateY(20%);
    }

    30%, 100% {
      opacity: 1;
      transform: translateY(0);
    }

  }