/* APRESENTAÇÃO */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: kanit;
    color: white;
    overflow-x: hidden;
}
h1, h2,h3,h4,h5, p{
    overflow: hidden;
}
.present-section{
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(#a6ecf491,#002e92), url('../public/backgrounds/home.jpeg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.name-presentation{
    font-weight: bold;
    font-size: 65px;
    white-space: 20px;
    letter-spacing: 5px;
    background-color: #15151515;
    font-family: Inconsolata;
    backdrop-filter: blur(1px);

}

.stack-presentation{
    margin-top: -8px;
    background-color: #15151515;
    font-family: Inconsolata;

}

.header-section{
    background-color: #141413;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}
.header-section > a{
    text-decoration: none;
    color: white;
    font-weight: 300;
    transition: 0.3s;
}
.header-section > a:hover{
    color: #d6edff;
}
.footer-section{
    height: 40px;
    overflow: hidden;
    text-align: center;
}
.arrow-down{
    width: 100px;
}


/* SOBRE MIM */

.about-section{
    background-image: linear-gradient(to top,#a6ecf491,#002e92), url('../public/backgrounds/home.jpeg');
    background-size: 220%;
    background-position: left;
    min-height: 100vh;
}
.about-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #141414f1;
}

.about-text-content{
    max-width: 620px;
    overflow: hidden;
}

.hi-about{
    font-size: 35px;
    margin-bottom: 15px;
}
.paragraph-about{
    font-weight: lighter;
    margin: 10px auto;
}
.paragraph-techs-about{
    margin-top: 30px;
}
.techs{
    margin-top: 10px;
    margin-left: 20px;
    background-color: #21249110;
    padding: 10px 5px;
    border-radius: 10px;
}
.tech-icon{
    width: 25px;
    height: 25px;
    margin:7px;
}

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

.my-pic{
    max-width: 450px;
    margin: 15px;
    border-radius: 50%;
    box-shadow: 20px 15px 20px 5px rgba(19, 26, 67, 0.219);
}

/* PROJETOS */

.projects-section{
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(#a6ecf491,#002e92), url('../public/backgrounds/projects.jpeg');
    background-size: 200%;
    min-height: 100vh;
}

.header-projects{
    background-color: #141414f1;
    padding: 20px;
    text-align: center;
}

.projects-cards{
    display: flex;
    justify-content: center;
    gap: 75px;
    flex-grow: 1;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px auto;
}

.project-card{
    background-color: #1d1d22 !important;
    width: 320px;
    display: flex;
    flex-direction: column;
    padding: 13px;
    border-radius: 7px;
    gap: 25px;
    height: 400px;
    transition: 0.4s;

} 
.project-card > p{
    font-weight: 300;
}
.projects-cards > a{
    overflow: hidden;
    text-decoration: none;
    transition: 0.4s;
    border-radius: 7px;
    box-shadow: -7px 5px 25px 5px #11112e6d;
}
.projects-cards > a:focus{
    outline: none;
}


.project-card:hover {
    background-color: #0e0f1d !important;
    transform: scale(1.03);
    cursor: pointer;
}

.project-card:hover > h3, .project-card:hover > p{
    color: rgb(206, 242, 255);
}

.projects-cards > a:hover{
    padding: 6px 5px;
    margin-bottom: 20px;
}


/* Onebitflix  e Organizador*/

.logoImg{
   /*  width: 230px; */
   height: 50px;
}

.onebitflix-section{
    background-image: linear-gradient(to top,#2f0000e1,#141414), url('../public/backgrounds/home.jpeg');
    min-height: 100vh;

}

.presentation-project{
    background-color: #1515156e;
    margin: 0 85px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 93vh;
}

.text-project-presentation{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto 30.3px;
}
.div-project-presentation{
    overflow-y: hidden;
}

.project-about-title{
    font-size: 40px;
    }



.ul >li{
    font-size: 25px;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.886);
    margin-top: 10px;
}

.ul >li > a{
    font-size: 20px;
    padding: 10px 20px;
    margin: 5px 0;
    
}

.login-project-img{
    height: 100%;
}

.row-project-imgs{
    padding: 30px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.img-pc{
    max-width: 550px;
}
.img-mobile{
    max-width: 150px;
}
/* Organizador */

.organizador-section{
    background-image: linear-gradient(to top,#0e2f00e1,#141414), url('../public/backgrounds/home.jpeg');
    min-height: 100vh;

}
.global-footer{
    gap: 10%;
}
.link-ctt{
    text-decoration: 1px transparent;
    color: #c9c9c9;
    transition: 0.4s;
}

.link-ctt:hover{
    text-decoration: underline;
}

@media (max-width: 1154px){
    /* Onebitflix  e Organizador*/

.logoImg{
    /*  width: 230px; */
    height: 50px;
 }
 
 
 .presentation-project{
    text-align: center;
 }
 
 .project-about-title{
     font-size: 25px;
     }
 
 .text-project-presentation{
    margin: auto 50px;
 }
 
 .ul >li{
    margin-left: -30px;
   
 }
 
 .ul >li > a{
     font-size: 20px;
     padding: 10px 20px;
     margin: 5px 0;
     
 }
 
 .login-project-img{
     height: 100%;
 }
 
 .row-project-imgs{
     padding: 30px 0;
     display: flex;
     justify-content: center;
     gap: 15px;
     flex-wrap: wrap;
 }
 
 .img-pc{
     max-width: 550px;
 }
 .img-mobile{
     max-width: 150px;
 }
}

@media (max-width:767px){  

    
    /* HOME */

    .header-section{
        background-color: #141413;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    .projects-section{
        background-size: cover;
    }
    /* sobre mim */

    .about-section{
        background-size: cover;
    }

    /* organizador e onebitflix */
    
    .text-project-presentation{
        
        margin: auto;
    }
    .project-about-title{
        font-size: 20px;
        }
    .ul >li{
        font-size: 18px;
       
     }
     .ul >li > a{
        font-size: 18px;
        padding: 5px 10px;
     }
     .logoImg{
        height: 5vw;
     }
     .login-project-img{
        width: 75%;
     }
}

@media (max-width: 660px){
    
    .name-presentation{
        font-size: 55px;
    
    }
    
    .header-section{
        gap: 10px;
    }
    .header-section > a{
        font-size: 14px;
    }
   
    .arrow-down{
        width: 80px;
    }
    
}

@media (max-width: 500px){
    /* HOME */
    
    .name-presentation{
        font-weight: bold;
        font-size: 45px;
 
    }
    
    .stack-presentation{
        font-size: 16px;
    
    }
    
    .header-section{
        gap: 5px;
    }
    .header-section > a{
    font-size: 12px;
    }
   .arrow-down{
    width: 60px;
   }

/* SOBRE MIM */

.hi-about{
    font-size: 25px;
}
.paragraph-about{
    font-size: 16px;
}
.paragraph-techs-about{
   font-size: 25px;
}
.techs{
    margin-left: 0px;
}
.tech-icon{
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

    .my-pic{
        width: 50%;
    }
/* Meus projetos */
    .header-projects{
        padding: 10px;
    }
    .my-projects-title{
        font-size: 5vw;
    }

    /* Organizador e onebitflix */
    .project-about-title{
        font-size: 15px;
        }
    .ul >li, .ul >li > a{
        font-size: 12px;
       
     }
     .presentation-project{
        margin: 0;
        padding: 0;
     }
}



@media (max-width: 420px){
    .header-section, .footer-section{
        display: none;
    }
    .name-presentation{
        font-size: 10vw;
    }
    .present-section{
        font-size: 3vw;
    }

/* SOBRE MIM */

.hi-about{
    font-size: 15px;
}
.paragraph-techs-about{
    font-size: 15px;
 }
.paragraph-about{
    font-size: 12px;
}


.tech-icon{
    width: 15px;
    height: 15px;

}

/* Meus projetos */
.header-projects{
    padding: 5px auto;
}

.project-card{
    width: 80vw;
    gap: 10px;
    height: auto;

} 

}

@media (max-width: 320px){
    .project-card > p{
        font-size: 14px;
    }
}