@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Iceland&display=swap');

.iceland-regular {
    font-family: "Iceland", serif;
    font-weight: 400;
    font-style: normal;
}
.audiowide-regular {
    font-family: "Audiowide", serif;
    font-weight: 400;
    font-style: normal;
}
  
  
html {
    scroll-behavior: smooth;
}

*{
    padding: 0;
    margin: 0;
    transition: 0.25s;
}

/* ScrollBar */
::-webkit-scrollbar {
    width: 5px; /* Largura da scrollbar */
    height: 5px; /* Altura da scrollbar para barras horizontais */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(241, 26, 30, 0.781); /* Cor do "thumb" da scrollbar */
    border-radius: 6px; /* Borda arredondada */
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(241, 26, 30); 
}

::-webkit-scrollbar-track {
    background: #000000c0; /* Cor de fundo da barra de rolagem */
}



body{
    overflow-x: hidden;
}

header{
    background: rgb(241,26,30);
    background: linear-gradient(123deg, rgba(241,26,30,1) 0%, rgba(139,15,17,1) 100%);
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

header nav{
    padding: 4cqmin;
    height: 6vh;
    display: flex;
    align-items: center;
}
header nav button:hover{
    filter: invert(100%);
    scale: 120%;
}
header nav a:hover{
    filter: invert(100%);
    scale: 120%;
}
#githubLink{
    height: 100%;
    aspect-ratio: 1/1;
    background: url(img/githubDark.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
#language{
    background: none;
    border: none;
    font-size:6vh;
    margin-left: auto;
}
#lightMode{
    margin-left: 3vh;
    background: url(img/sun.png);
    height: 90%;
    aspect-ratio: 1/1;
    background-position: center;
    background-size: 100%;
    border: 0;
}
#menuBar{
    margin-left: 3vh;
    background: rgba(180, 138, 138, 0);
    height: 110%;
    aspect-ratio: 1/1;
    border: 0;
}
#menuBarFix{
    background: url(img/menu.png);
    aspect-ratio: 1/1;
    background-position: center;
    background-size: 100%;
    border: 0;
    top: 3.6cqmin;
    right: 3.2cqmin;
    height: 6.6vh;
    position: fixed;
}
header h1{
    color: white;
    margin-top: 15vh;
    text-align: center;
    font-size: clamp(15px, 11cqmin, 80px);
}
header h2{
    color: white;
    text-align: center;
    text-align:center;
    margin: 0 auto;
    margin-top: 5px;
    width: 80cqmin;
    font-size: clamp(30px, 4cqmin, 40px);
}
.headerShortCuts{
    max-width:60cqmin;
    margin: 0 auto;
    margin-top: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 2vw;
    column-gap:4vw;
}
.headerShortCuts a{
    text-decoration: none;
    color: white;
    font-size: clamp(30px, 4.5cqmin, 40px);
}
.headerShortCuts a:hover{
    text-shadow: 0 0 20px rgb(255, 255, 255);
    font-size: clamp(20px, 4.7cqmin, 40px);
}

.blade{
    width: 100vw;
    margin-top: auto;
}
.bladeContainer{
    display: flex;
}
.bladeImg{
    width: 80%;
    aspect-ratio: 12/1;
    z-index: 1;
    background: url(img/portfolioBladeDark.png);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}
.bladeContainer p{
    color: white;
    transform: rotate(90deg);
    width: max-content;
    height: min-content;
    font-size: clamp(16px, 4vw ,45px);
    margin: auto 5vw 1vw auto;
}
.bladeLine{
    background-color: black;
    height: 0.15vw;
    width: 100%;
    position:absolute;
    z-index: 0;
    margin-top: 6.55%;
}
.bladePerdop{
    position:absolute;
    z-index: 2;
    margin-top: 2%;
    left: 2vw;
    font-size: 1.2vw;
}
.bladeProjetos{
    color: white;
    position:absolute;
    z-index: 2;
    margin-top: 4.5%;
    left: 2vw;
    font-size: 1.5vw;
}

main{
    width: 100vw;
}
.projects{
    background: rgb(127,127,127);
    background: linear-gradient(180deg, rgba(127,127,127,1) 88%, #393939 100%);
    display: flex;
    flex-direction: column;
    padding-bottom: 8vh;
}
.projectsRow{
    display: flex;
    justify-content: space-evenly;
    align-items: start;
}
.projects h1{
    color: white;
    width: 100vw;
    text-align: center;
    font-size: 5vw;
}
.projectsContainer{
    margin-top: 3vw;
    width: 30%;
}
.projectImgLayout{
    border-radius: 2cqmin;
    border: solid 1px black;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.projectImgLayout img{
    width: 100%;
}
.projectImgLayout a{
    display: flex;
    align-items: center;
    justify-content: center;
}
.projectsTags{
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2cqmin;
    justify-content: center;
}
.languageTag{
    background-color: #D9D9D9;
    min-height:16px;
    border-radius: 1cqmin;
    height: 1.3vw;
    padding: 1cqmin;
    align-items: center;
    display: flex;
    gap: 5px;
    font-size: clamp(16px,1.3vw,30px);
    overflow: hidden;
}
.languageTag img{
    height: 100%;
    aspect-ratio: 1/1;
}
.projectsContainer h2{
    color: white;
    font-size: clamp(30px,4.5vw,100px);
    text-align: center;
    margin-top: 5px;
}
.projectsContainer a{
    text-decoration: none;
    color: white;
    width:100%;
}
.projectsContainer h2:hover{
    scale: 110%;
    text-shadow: 0 0 20px rgb(255, 255, 255);
}
.projectTxt{
    color: white;
    text-indent: 2vw;
    font-size: clamp(16px,1.5vw,30px);
    text-align: center;
}
.tribalImg{
    width: 100vw;
    height: 100vh;
    background: url(img/tribalDark.png  );
    opacity: 40%;
    z-index: -1;
    position:absolute;
}
.tribalBg{
    width: 100vw;
    height: 100vh;
    z-index: -2;
    position:absolute;
    background-color: #393939;
}
.about{
    height: 100vh;
    width: 100vw;
    color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}
.aboutRow{
    width: 90%;
    display: flex;
    height: 50%;
}
.aboutTxt{
    height: 100%;
}
.aboutTxt h1{
    font-size: clamp(15px, 10cqmin, 80px);
    white-space: nowrap;
    margin-right: 10px;
    margin-bottom: 10px;
}
.aboutH1Line{
    background-color: white;
    width:78%;
    height: 2px;
    margin: auto 0 auto auto;
}
.aboutTxt p{
    font-size: clamp(12px, 5.1cqmin, 2.8vmax);
    line-height: 1.1;
}
.aboutImg{
    border: none;
    width:25%;
}
.aboutImgImg{
    border: solid 5px #B14242;
    border-radius: 100%;
    background: url(img/pedro.jpeg );
    width: 45cqmin;
    max-width: 90%;
    float: right;
    aspect-ratio: 1/1   ;
    background-position:center;
    background-size: 100%;
    box-shadow: 0 0 15px #B14242;
    transform: scaleX(-1);
}
.aboutRow2{
    display: flex;
    height: 45%;
    width: 90%;
    gap: 5%;
}
.aboutLinks{
    background-color: rgba(0, 0, 0, 0.310);
    width: 30%;
    height: 90%;
    border-radius: 1.5cqmin;
    padding-left: 3cqmin;
    padding-right: 3cqmin;
}
.aboutLinksRow{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top: 2cqmin;
}
.aboutLinks a{
    color: white;
    text-decoration: none;
    font-size: clamp(12px, 5.1cqmin, 2.8vmax);
}
.aboutLinks a:hover{
    color: #B14242;
}
.aboutRow2 p{
    width: 65%;
    font-size: clamp(12px, 5.1cqmin, 2.8vmax);
    line-height: 1.1;
}

/* menu */
#darkModeCheck:checked ~ header nav a {
    filter: invert(100%);
}
#darkModeCheck:checked ~ header nav button {
    filter: invert(100%);
}
#darkModeCheck:checked ~ header nav a:hover {
    filter: invert(0%);
}
#darkModeCheck:checked ~ header nav button:hover {
    filter: invert(0%);
}
#darkModeCheck:checked ~ header nav #lightMode {
    background: url(img/moon.png);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}
#darkModeCheck:checked ~ main .projects{
    background: linear-gradient(180deg, #E6DFDF 88%, #ffffff 100%);
}
#darkModeCheck:checked ~ main .projects h1{
    color: black;
}
#darkModeCheck:checked ~ main .projectsContainer a:hover{
    text-shadow: 0 0 20px rgb(0, 0, 0);
}
#darkModeCheck:checked ~ main .projects p{
    color: black;
}
#darkModeCheck:checked ~ main .projects a{
    color: black;
}
#darkModeCheck:checked ~ main .languageTag{
    background-color: #B7B5B5;
}
#darkModeCheck:checked ~ main .tribalBg{
    background-color: white;
}
#darkModeCheck:checked ~ main .tribalImg{
    width: 100vw;
    height: 100vh;
    background: url(img/tribalLight.png  );
    opacity: 40%;
    z-index: -1;
    position:absolute;
}
#darkModeCheck:checked ~ main .about{
    color: black;
}
#darkModeCheck:checked ~ main .about a{
    color: black;
}
#darkModeCheck:checked ~ main .aboutH1Line {
    background-color: black;
}
#darkModeCheck:checked ~ main .aboutLinks {
    background-color: rgba(0, 0, 0, 0.767);
}
#darkModeCheck:checked ~ main .aboutLinks a{
    color: rgb(255, 255, 255);
}
#darkModeCheck:checked ~ main .aboutLinks a:hover{
    color: #B14242;
}
#darkModeCheck:checked ~ header .bladeImg{
    background: url(img/portfolioBladeLight.png);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 80%;
    aspect-ratio: 12/1;
    z-index: 1;
}
#darkModeCheck:checked ~ header .bladeProjetos{
    color: black;
}
#darkModeCheck:checked ~ #toolbarNav #menuBarTool{
    filter: invert(100%);
}
#darkModeCheck:checked ~ #toolbarNav #menuBarTool:hover{
    filter: invert(0);
    scale: 120%;
}


/* Toolbar */
#toolbarNav{
    transform: translateX(500px);
    right: 0;
    z-index: 3;
    position: fixed;
    padding-left: 4cqmin;
    border-radius: 15px;
    top: 0;
    overflow: hidden;
    background: linear-gradient(123deg, rgb(197, 0, 3) 0%, rgba(139,15,17,1) 100%);
    display: flex;
    flex-direction: column;
    height: 50%;
    height:100%;
}
#toolbarNav span{
    padding: 4cqmin 4cqmin 0 0;
    display: flex;
    align-items: center;
    justify-content:end;
    height: 6vh;
}
#menuBarTool{
    background: url(img/menu.png);
    aspect-ratio: 1/1;
    background-position: top;
    background-size: 100%;
    border: 0;
    height: 110%;
}
#toolbarNav nav{
    height: 70%;
    display: flex;
    align-items: end;
    flex-direction: column;
    justify-content: space-around;
    font-size: clamp(35px, 3vw, 50px);
    color: white;
    margin-right: 5cqmin;
}
#toolbarNav a{
    text-decoration: none;
    color: white;
}
#toolbarNav a:hover{
    text-shadow: 0 0 20px rgb(255, 255, 255);
    scale: 70%;
}
#menuBarTool:hover{
    filter: invert(100%);
    scale: 120%;
}

#menuBarCheck:checked ~ #toolbarNav{
    transform: translateX(0px);
    transition: 0.3s;
}



@media(max-width:300px){
    .headerShortCuts{
        flex-direction: column;
    }
    #about{
        margin-left: 0;
        margin-top: 10px;
    }


}

@media(max-width:500px){
    #projectsTittle{
        margin-bottom: 10px ;
    }
    .projectsRow{
        flex-direction: column;
    }
    .projectsContainer{
        width: 80%;
        margin: auto;
        margin-top: 20px;
    }
    .headerShortCuts{
        flex-direction: column;
        max-width:100vw;
    }
    .about{
        height: max-content;
    }
    .aboutRow{
        height: 100%;
    }
    .aboutImg{
        position: absolute;
        right: 4%;
        width: 10%;
    }
    .aboutRow2{
        flex-direction: column-reverse;
    }
    .aboutRow2 p{
        margin-top: 10px;
        width: 100%;
        margin-bottom: 10px;
    }
    .aboutLinks{
        width: 90%;
        margin-bottom: 20px;
        padding-bottom: 8px;
    }
    .tribalImg{
    background-position: center;
    }
}

/* Projects Settings */
.EcoExplora a:hover{
    color: #2c4766;
}
.EcoExplora .languageTag:hover{
    outline: solid 3px #2c4766;
    font-size: clamp(16px,1.4vw,30px);
}
.EcoExplora .projectImgLayout:hover{   
    outline: solid 2px  #2c4766;
    border: solid 1px #2c4766;
}
#darkModeCheck:checked ~ main .EcoExplora a:hover{
    color: #2c4766;
}
.pathEduc .projectImgLayout:hover{   
    outline: solid 2px  #f4c430;
    border: solid 1px #f4c430;
}
.pathEduc img{
    background-color: #ffffff;
    width: 100%;
    aspect-ratio: 1/1;
}
.pathEduc a:hover{
    color: #f4c430;
}
.pathEduc .languageTag:hover{
    outline: solid 3px #f4c430;
}
#darkModeCheck:checked ~ main .pathEduc a:hover{
    color: #f4c430;
}
#darkModeCheck:checked ~main .pathEduc a:hover{
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.747) !important; 
}
.Velo .projectImgLayout img{
    width: 100%;
    aspect-ratio: 1/1;
}
.Velo .projectImgLayout:hover{   
    outline: solid 2px  #f7bfd8;
    border: solid 1px #f7bfd8;
}
.Velo a:hover{
    color: #f7bfd8;
}
.Velo .languageTag:hover{
    outline: solid 3px #f7bfd8;
}
#darkModeCheck:checked ~ main .Velo  a:hover{
    color: #f7bfd8;
}
#darkModeCheck:checked ~main .Velo a:hover{
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.747) !important; 
}