/* Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Nata+Sans:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Reset & Global */
*{padding: 0; margin: 0;}
html{scroll-behavior: smooth; scrollbar-width: 1px;}
ul{list-style: none;}
.safeArea{max-width: 65rem; margin: 0 auto;}
.divider{height: 5rem; width: auto;}
.icoText{margin-right: .5vw;}
.pwLogo{filter: invert(65%) sepia(99%) saturate(339%) hue-rotate(119deg) brightness(97%) contrast(96%);}
h1{font-family: 'Poppins';}
p{font-family: 'Nata Sans'; color: var(--textDark);}
a:link{color: #040618;}
body{
    background: var(--background);
    color: var(--accentDark);
    margin: 0 auto;
}

/* root */
:root{
    --background: #f8f7ff;
    --shadow: #FE0072;
    --accentLight: #22A699;
    --accentDark: #22A699;
    --textLight: #FEF9E1;
    --textDark: #06111a;
    --textSolidDark: rgb(5, 5, 5);
}

/* Navigation Styling */
.navigationContainer{z-index: 99; position: sticky; top: 0;  background: #f8f7ffca; backdrop-filter: blur(5px);}
    nav{
        display: flex; 
        justify-content: space-between;
        align-items: center;
        padding: 0 .5rem;
        max-width: 70rem;
        margin: 0 auto;
    }
        .navRight{display: flex;}
        .navRight ul{display: flex;}
        .navRight ul li a{
            display: flex;
            padding: 20px;
            text-decoration: none;
            color: var(--accentDark);
            font-family: 'Nata Sans';
            transition: all .3s;
        } .navRight ul li a:hover{color: var(--shadow); background: var(--background);}
          .navRight ul li a:active{background: var(--accentLight); color: var(--accentLight);}  
        .menuBtn{display: none;} .menuBtnOff{display: none;}
    
    .menuMobile{
        display: none;
        overflow: hidden;
        height: 100vh;
        width: auto;
    }
        .menuMobile ul{display: flex; flex-direction: column; align-items: center; }
        .menuMobile ul li a{
            color: var(--textDark);
            font-family: 'Nata Sans';
            margin: 10px;
        }
     #menuOpen .menuMobile{
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background-color: #f8f7ff28;
        backdrop-filter: blur(5px);
        flex-wrap: nowrap;
     }
     #menuOpen .menuBtn{display: none; color: var(--shadow);}
     #menuOpen .menuBtnOff{display: flex; color: var(--shadow);} 
     #menuOpen body{overflow: hidden;}

/* Header Styling */
.headerContainer{
    width: 100%;
    height: 100vh;
    align-items: center;
}
    .headerContent{
        display: flex;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
    }
    .headingHeader{
        -webkit-animation: tracking-in-expand 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	    animation: tracking-in-expand 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    }
    .btnScroll{
        font-size: 30px;
        margin-top: 1rem;
        animation: fadeHeader 1s infinite alternate;
    }

/* Project Styling */
    .projectOverview{
        text-align: left;
        margin-bottom: 3vh;
    }
    .projectOverview h2{
        font-family: 'Poppins'; 
        text-transform: lowercase; 
        font-size: 2rem;
        -webkit-animation: text-pop-up-top 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	    animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        animation-timeline: view();
        animation-range: entry 20% entry 50%; 
        animation-delay: 2s;
    }
    .projectPostContainer{
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: left;
    }
        .projectPost{
            padding: 1%;
            max-width: 30%;
            background: var(--background);
            border-radius: .2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            outline: solid var(--accentLight) 1px;
        }
        .projectThumb{
            width: 100%;
            aspect-ratio: 16/9;
            border-radius: .1rem;
            box-shadow: #FE0072 0px 0px 2px;
        }
        .projectTitle{
            font-family: 'Poppins';
        }
        .projectDesc{
            font-family: 'Nata Sans';
            text-transform: capitalize;
            color: var(--textSolidDark);
        }
        .techUse{
            display: flex;
            gap: .5rem;
            align-items: center;
            font-size: large;
            align-items: center;
            color: var(--textDark);
            margin-bottom: 1vw;
        }
        .tag{
            font-family: 'Montserrat';
            border: 1px solid #a4a6ac;
            padding: 3px;
            border-radius: 100px;
            font-size: small;
        }
        .projectButtonContainer{margin-top: 5vh;}
        .projectPost button{
            background: none;
            padding: .5vw 1vw;
            border: 1px solid var(--accentLight);
            border-radius: 100rem;
            color: var(--accentLight);
            pointer-events: cursor;
        }
        .projectButtonContainer button i a{color: var(--accentLight);}
        .projectPost .btnHigh{
            background: var(--accentLight);
            color: var(--textLight);
        } 
        .projectPost button a{
            color: var(--accentLight); 
            text-decoration: none;
        } .projectPost .btnHigh a{color: var(--textLight);} .projectPost button a:visited{color: none;}

/* Gallery Post */
.galleryPost{
    display: inline;
}
.galleryButtonContainer{
    margin-top: 0vh;
}

/* Baloon */
.contactContainer{max-width: 65rem;}
.ballon{
    display: flex;
    max-width: max-content;
    background: #dddddd;
    align-items: center;
    padding: 1%;
    gap: 10px;
    border-radius: .5rem;
}
/* Baloon Color */
#email{background: #ffe8e8;} #github{background: #a4a6ac;} #telegram{background: #b8cfff;} #youtube{background: #ff8f8f;} #instagram{background: #fdb6ff;}

/* footer */
.footerContainer{
    background-image: linear-gradient(to top, #22A699, var(--background));
}
    footer{
        display: flex;
        gap: 8vw;
        padding: 3% 0;
        color: var(--textDark);
    } footer ul li{font-family: 'Poppins'; font-weight: 500;} footer ul li{color: var(--textDark);} footer ul li a{font-family: Nata Sans; color: var(--textDark);}
    .ident p{color:var(--textDark);}

/* ============================= STYLE FOR CATEGORIES FOLDER ================================= */
/* Header */
.subHeaderContainer{
    width: 100%;
    height: 50vh;
    color: var(--textLight);
    background-size: cover;
    background-position: center;
    background-clip: content-box;
} #photography{background-image: url(src/galThumb.png);} #gfx{background-image: url(src/fxThumb.png);}
    .subHeaderContentContainer{
        text-align: center;
        text-shadow: var(--textDark) 0px 0px 10px;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        align-items: center;
    } 
        .subHeaderContentContainer p{color: var(--textLight); text-shadow: var(--textDark) 0px 0px 10px;}
        .subHeaderContentContainer button{
            margin-top: 1vw;
            background: var(--accentLight);
            padding: .5vw 1vw;
            border: 1px solid var(--accentLight);
            border-radius: 100rem;
            color: var(--textLight);
            pointer-events: cursor;}

/* Catalog */
.catalogContent{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 5vh 0;
}
    .imgCatalog{
        width: 20%;
        aspect-ratio: 1/1;
        object-fit: cover;
        transition: transform 0.3s, box-shadow 0.3s, border 0.3s;
    }
     .imgCatalog:hover{ transform: scale(1.1); box-shadow: 2px 2px 0 var(--accentLight);}