@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 
/* @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); */

/* css variables */
:root{
    --header-height: 3rem;

    --body-color: #ffffff;  
    --container-color: #121212; 
    --first-color: #3D7CFA;
    --title-color: black;
    --text-color: black;
    --color-yellow: #ffd200;
    --color-teal: #23CCA2; 
    --color-red: #ff492c;
    /* font assignment*/
    --body-font: 'Poppins', sans-serif; 


    --step--2: clamp(0.91rem, calc(0.89rem + 0.10vw), 0.96rem);
    --step--1: clamp(1.09rem, calc(1.05rem + 0.21vw), 1.20rem);
    --step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.50rem);
    --step-1: clamp(1.58rem, calc(1.46rem + 0.59vw), 1.88rem);
    --step-2: clamp(1.89rem, calc(1.71rem + 0.89vw), 2.34rem);
    --step-3: clamp(2.27rem, calc(2.01rem + 1.29vw), 2.93rem);
    --step-4: clamp(2.72rem, calc(2.36rem + 1.83vw), 3.66rem);
    --step-5: clamp(3.27rem, calc(2.75rem + 2.56vw), 4.58rem);

    /* font weight */
    --font-medium: 400;
    --font-semi-bold: 500;
    /* margin bottom */
    /* .25rem = 4px, .5rem = 8px, .75 = 12px */
   
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    
}


/* all elements */
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}



html {
    scroll-behavior: smooth;
}

body{
    /* margin: 0 0 var(--header-height) 0; */
    font-family: var(--body-font);
    font-size: var(--step-1);
    background-color: var(--body-color);  
    color: var(--text-color);
}

h1{
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
}
h2{
    color: var(--title-color);
    font-weight: 400;
}
h3{
    font-weight: 200;
}
h4{
    font-size: var(--step-0);
    font-weight: 200;
    color: black;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
    height: auto;
    
}

.text-big{
    font-size: var(--step-4);
}
/*color classes for icons and charts*/
.red{
    color: var(--color-red);
}

.yellow{
    color: var(--color-yellow);
}
.blue{
    color: var(--first-color);
}
.white-text{
    color: white;
    font-size: var(--step-4);
}

.header{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 3rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 2vw;
} 

.logo{
    margin-left: 1rem;
    font-size: var(--step--2);
}
.nav-links{
    display: inline-block;
}
.nav-links > .nav__item{
    display: inline-block;
}   
.nav__item{
    color: var(--text-color);
    padding: 0.5rem;
} 
.nav__link{
    font-size: var(--step--2);
    color: var(--text-color);
    
}
.nav__link:hover{
    cursor: pointer;
    opacity: .5;
}    

/* reusable classes */
.section{
    padding: 2rem 0 4rem;
    margin: 4rem auto;
}
.section__title{
    text-align: center;
    text-transform: uppercase;
    font-size: var(--step-3);
    color: var(--title-color);
    opacity: 1;
    margin-bottom: 4rem;
}
.fade-text{
    opacity: 0;
    z-index: 2;
    transition: all 0.5s ease-in;
    transition-delay: 0.4s;
}
.fade-text.active{
    opacity: 1;
}
.container{
    max-width: 768px;
    border-radius: .5rem;
}

.grid{
    display: grid;
    gap: 1rem;
}


/* about section  */
.about{
    margin-top: 200px;
}
.about-container{
    display: flex;
    gap: 1rem;
}

.about-p{
    text-transform: uppercase;
    font-size: var(--step--1);

}
.sub-title{
    font-size: var(--step-1);
}
.underline{
    text-decoration: underline;
    font-size: var(--step--2);
    color:gray;
    margin-top: 5px;
}
.stack-icons{
    text-align: center;
}
/* project section */
.projects{
    /* background-color: #e9e9e9; */
    background-color: white;
}
.project-items{
    display: flex;
    justify-content: space-evenly;
    height: fit-content;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap; 
    align-items: center; 

    
}


.project{
    /* background-color: white; */
    margin: 1rem 1rem;
}

.project-header{
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
}
.project-header h1{
    font-size: var(--step--1);
    width: 100%;
    text-transform: uppercase;
}

.project-image{
    width: 450px; 
    height: 400px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.project-footer{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    border-top: 1px dashed gray;
    border-bottom: 1px dashed gray; 
    padding: 10px 0px;
}
.project-footer p{
    font-size: var(--step--2);
    text-transform: uppercase;
}
.project-footer p:hover{
    font-style: oblique;
    cursor: pointer;
    text-decoration: line-through;
    color: #3D7CFA;
}

.project-image1{
    background-image: url(./images/rad-dash.png);  
} 

.project-image2{
    background-image: url(./images/web-dash.png);  
}  
.project-image3{
    background-image: url(./images/quickbooks.png);  
}  
.project-image5{
    background-image: url(./images/violin-pbi.png);  
}  
.project-image6{
    background-image: url(./images/usada.png);  
}  
.project-image4{
    background-image: url(./images/crud_pic.png); 
}  


.proj-item{
    position: relative;
    
    left: 0;
    text-transform: uppercase;
    transition: left 500ms;
    margin-bottom: 1rem;
    border-bottom: 1px solid white;
    width: 100%;
}
.proj-item:hover{
    font-style: oblique;
    left: 10px;
    cursor: pointer;
    text-decoration: line-through;
    color: var(--first-color);
} 


/*           median queries       SMALL DEVICE    */
@media screen and (max-width: 450px){
    ::-webkit-scrollbar{
        display: none;
    }
    
    .about-container{
        flex-direction: column;
    }
    .about-p{
        font-size: var(--step--2);
    }
    .text-big{
        font-size: var(--step-4);
    }
    .container{
        margin: 0 auto;
        padding: 0.25rem;
    }
    .project-image{
        width: 300px; 
        height: 280px; 
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    
}

/*      media query for MEDIUM sized screen devices     */
@media screen and (min-width: 568px){
    ::-webkit-scrollbar{
        background-color: white;
        color: white;
        width: 10px;
    }
    ::-webkit-scrollbar-thumb{
        background-color: black;
        
    }
    
    .container{
        margin-left: auto;
        margin-right: auto;
        padding: 1rem;
    }
    
    
}
/*      media query for MEDIUM sized screen devices     */
@media screen and (min-width: 768px){
    .container{
        margin-left: auto;
        margin-right: auto;   
        
    }
    .section{
        padding: 6rem 0 2rem;
    }
    .main{
        padding: 0 1rem;
    }
    
    .about{
        padding: 0.1rem;
    }
}
/*      large devices       */
@media screen and (min-width: 1024px){
    .main{
        padding: 0;
    }
    

}