/*loading fonts and resetting default styles*/
@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Cursive:wght@400..700&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');

/*adding root style for light and darkmode*/
:root{
    color-scheme: light dark;
}
/*setting general styles*/
h1{
    font-size: 1.5rem;
    line-height: 2.5rem;
    padding: 0.5rem 0;
    margin: 0;
}

h2,h3{
    font-size: 1.375rem;
    font-family: 'Poppins', sans-serif;
    padding: 1rem 0;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    margin: 0;
}
h4{
    font-size: 1rem;
    margin: 0;
    padding: 0.5rem 0;
}

h5{
    font-size: 0.875rem;
    font-family: 'Poppins',Verdana, Geneva, Tahoma, sans-serif;
    padding: 0.5rem 0;
    margin: 0;
    
}


body{
    margin: 0;
    padding: 1rem;
    font-family: 'Poppins',Verdana, Geneva, Tahoma, sans-serif;
    background-color: #0e0e0e;
    color: white;
    position: relative;

    /*navigation*/
    nav{
        margin: 0;
        padding: 0;
        header{text-align: center;
        font-family: "Edu NSW ACT Cursive", cursive;
        font-optical-sizing: auto;
        font-weight: 500;
        font-size: 0.5rem;
        }
        ul{
        list-style-type: none;
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0.5rem 0;
        font-size: 0.875rem;
            li{
                a{
                text-decoration: none;
                color: white;
                }
                a:hover{
                background-image: linear-gradient(to right, #A76CFE,#FF72BA, #FFA274);
                background-clip: text;
                -webkit-background-clip: text; /* For older browsers */
                color: transparent;
                text-wrap: balance;
                }
            }
        }
        
    
    }
    hr{
    position: relative;
    border-top: 1px solid rgba(255, 114, 186,0.8);
    margin: 0;
    }
    /*main*/
    main{
        text-align: center;
        position: relative;

        div{
            padding: 1.5rem 0;
            /*styling the hero section for mobile*/
            section.hero{
            display:grid;
            grid-template-columns: 2fr 1fr;
            max-width: 100%;
            margin: 0 auto;
            column-gap: 20px;
            place-items: center; 
            img.hero-img{
                width: 200px;
                box-sizing: border-box;
                border-radius: 50%;
                padding: 1rem;
                border: 1px solid rgba(255, 162, 116,0.3);
                animation: profile-pic 8s linear 1;
            }
            div.icons{
                animation: icons 8s linear 1;
                a{
                    img.svgg{
                            padding: 0.5rem;
                            box-sizing: border-box;
                            max-width: 50px; 
                    }
                }
            }
            }

            section.intro{
                padding: 0.75rem 0;
                font-family: "Edu NSW ACT Cursive", cursive;
                font-optical-sizing: auto;
                font-weight: 700;
                animation: intro-text 8s linear 1;
                overflow-x: hidden;
                h1{
                    span{
                        background-image: linear-gradient(to right, #A76CFE,#FF72BA, #FFA274);background-clip: text;
                        -webkit-background-clip: text; 
                        color: transparent;
                        text-wrap: balance;
                    }
                }
                p{
                    text-transform: uppercase;
                    font-size: 0.5rem;
                    letter-spacing: 0.125rem;
                    padding: 0.25rem 0.25rem;
                    font-style: italic;
                }
            }
        }
        div.extra-web{
            section#hero-web{
                display: grid;
                grid-template-columns: 1fr 1fr;
                place-items: center; 
                min-height: 60vh;
                img.hero-img-web{
                width: 300px;
                box-sizing: border-box;
                border-radius: 50%;
                padding: 1rem;
                border: 1px solid rgba(255, 162, 116,0.3);
                animation: profile-pic 8s linear 1;
                overflow-x: hidden;
                }
                section.icon-web{
                    animation: icons 8s linear 1;
                    overflow-x: hidden;
                }
            }
            
        }
        section#about-me{
            text-align: left;
            padding: 0 0.5rem;
            div.about{
                padding: 0 ;
            }
        }
        section.animations{
            /*animations*/
            position: relative;
            overflow: hidden;
            max-width: 1200px;
            text-align: center;
            padding: 0.5rem 0;
            h2.animations-header{
                position: absolute;
                top: 3;
                left: 0;
                overflow-x: hidden;
                z-index: 1;
                background-color: #0e0e0e;
                border-radius: 0.5rem;
                padding: 0.5rem;
                margin: 0;
                }
  
                div.animations-text {
                    white-space: nowrap;
                    animation: moveDisappear 25s linear infinite alternate;
                    display: flex;
                    justify-content: space-between;
                    align-items: center; 
                    padding: 0;
                    font-family: "Edu NSW ACT Cursive", cursive;
                    font-optical-sizing: auto;
                    font-weight: 500;
                    span {
                        /* Adjusting spacing between animated texts */
                        opacity: 1;
                        background-image: linear-gradient(to right, #A76CFE,#FF72BA, #FFA274);
                        background-clip: text;
                        -webkit-background-clip: text; 
                        color: transparent;
                        padding: 0.5rem;
                        font-size: 0.75rem;
                    }
                }

            }

        
        div.front-end{
            text-align: left;
            padding: 1.5rem 0.5rem;
            max-width: 100%;
            position: relative;
            z-index: 2;
            min-height: 300px;
            div.front{
                padding: 1rem 0;
                position: relative;
                z-index: 2;
                div.image-container{
                    padding: 1rem;
                    border-radius: 8px;
                    box-sizing: border-box;
                    position: relative;
                    z-index: 2;
                    border: 1px solid rgba(255, 162, 116,0.3);
                    img.front-img{
                        width: 100%;
                    }
                }
                div{
                    h3{
                    font-size: 1.25rem;
                    }
                    div.links{
                        padding: 0.5rem 0;
                        display: flex;
                        justify-content: space-between;
                        a{
                            button{
                                padding: 0.375rem;
                                border: 1px solid #FFA274;
                                background-image: linear-gradient(to right, #A76CFE,#FF72BA, #FFA274);
                                background-clip: text;
                                -webkit-background-clip: text; 
                                color: transparent;
                                text-wrap: balance;
                                border-radius: 0.5rem;
                                font-size: 0.875rem;
                                text-transform: uppercase;
                                &:hover{
                                    border-color: #A76CFE;
                                }
                            }
                        }
                    }
                }
            }
        }
 


    }
    /*footer*/
    footer{
    font-size: 0.75rem;
    text-align: center;
    font-family: "Edu NSW ACT Cursive", cursive;
    font-optical-sizing: auto;
    font-weight: 500;
}
}
/*light and darkmode*/
@media (prefers-color-scheme: light){
    body{
        background-color: #f2eae0;
        color: #0e0e0e;
    }
    .nav-link{
        color: #0e0e0e;
    }
    .animations{
        color: white;

    }
    
    a.navs{  
        background-color: #0e0e0e;
        padding: 0.375rem ;
        border: 1px solid #FFA274;
        border-radius: 0.5rem;           
        border: 1px solid #FF72BA ;
        button#repo{
        color: white;
        border: none;
        
    }}
    
}

/*animation keyframes for skillset and certifications*/
        @keyframes moveDisappear {
            0% {
                transform: translateX(50%);
            }
            25%,50%,70% {
                transform: translateX(-100%);
            }
            100% {
            transform: translateX(50%);
            }
        }
/*animating the hero section*/
        @keyframes profile-pic {
            0%{
                transform: translateX(-100%);
            }
            50%{
                transform: translateX(25%);
            }
            75%{
                transform: rotateY(180deg);
            }
            100%{
                transform: translateX(0%);
                
            }
        }

        @keyframes icons {
            0%{
                transform: translateX(-100%)
            }
            25%{
                transform: translateX(25%);
            }
            75%{
                transform: rotateY(180deg);
            }
            100%{
                transform: translateX(0%);
            }
        } 

        @keyframes intro-text {
            0%{
                transform: translateX(-100%)
            }
            25%{
                transform: translateX(25%)
            }
            75%{
                transform: rotateY(180deg);
            }
            100%{
                transform: translateX(0%);
            }
        }
    
/*Responsive styling*/
/*media queries*/

/*the intro section*/
@media (min-width:749px){
    nav{
        display: grid;
        grid-template-columns: 1fr 0.5fr;
        
        header.daflusher{
            font-size: 1rem;
            padding: 0.5rem 0;
            align-self: start;
            text-align: left;
        }
        ul.navbar{
            padding: 0.5rem 0;
        }
        .nav-link{
            font-size: 1rem;
        }
    }
    div.front{
        display: grid;
        grid-template-columns: 1.25fr 1fr;
        column-gap: 20px;
        row-gap: 20px;
        
    }
    img.front-img{
        height: 100%;
    }
    div.extra{
        display: none;
    }
    ul{
        font-size: 1rem;
    }
    section.hero-web{
        grid-template-columns:repeat(2,1fr);
        place-content: center;
        max-width: 960px;
        min-height: 80vh;
    }
    
    section.icon-web{
       grid-column: span 2;
       display: grid;
       grid-template-columns: repeat(4,60px);
       column-gap: 1rem;
       
    }
  
    
 }
 
@media (max-width:748px){
    div.extra-web{
        display: none;
    }
}

/*frontend */

@media (min-width:960px){
    body{
        padding: 1rem 4rem;
    }
    div.front{
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        padding: 2rem 0;
    }
    button.repo{
        padding:  2rem;
    }
    h1{
        font-size: 2rem;
        line-height: 2.75rem;
    }
    h2{
        font-size: 1.75rem;
    }
    h3{
        font-size: 1.5rem;
    }
   .hero-img{
    text-align: left;
   }
   
   div.front p{
    font-size: 1.125rem;
    }

    h5{
        font-size: 1rem;
    }

   p.intro-paragraph{
    font-size: 1rem;
    letter-spacing: 0.25rem;
    padding: 0.5rem 0.25rem;
    }
    #animation-span{
        font-size: 1.5rem;
    }
    #animations-header{
        top: 8;
    }

}