@import "tailwindcss";

@font-face{
    font-family: Poppins;
    src: url('./Fonts/Poppins-Regular.ttf');
}

::-webkit-scrollbar{
    background-color:#E7E4DF;
}
*,
*::before,
*::after{
    /* outline:1px solid red; */
    scroll-behavior: smooth;
}
body{
    background-color:#E7E4DF;
    font-family:Poppins, Verdana, Helvetica, sans-serif;
    opacity: 0;
    animation: bodyFadeIn 1.2s ease-in forwards;
}
nav{
    position:fixed;
    background-color:#E7E4DF;
    width:84.6%;
    z-index: 10;
    margin-bottom: 100px;
    top:0;
}
/* add some animations or the body */

.logo{
    width:30px;
    height:30px;
    transition: transform 0.3s cubic-bezier(.4,2,.6,1);
}
.logo:hover {
    transform: scale(1.15) rotate(-6deg);
}
.navigation{
    gap:20px
}
.nav{
   font-weight:600;
   position:relative;
   padding-inline:2px
}
.nav::before{
    content:"";
    height:2px;
    position:absolute;
    background-color: hsl(0, 0%, 10%);
    width:0;
    top:24px;
    transition:0.3s;
}
.nav:hover{
    color:hsl(0, 0%, 10%)
}
.nav:hover::before{
    width:100%;
}
.home-wrapper{
    margin-top:60px;
    opacity: 0;
    transform: translateY(40px);
    animation: slideInHome 1s 0.5s cubic-bezier(.4,2,.6,1) forwards;
}
@keyframes bodyFadeIn {
    to {
        opacity: 1;
    }
}
@keyframes slideInHome {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.heading{
    line-height:80px;
}
.home-box1{
    width:400px;
}
.dev-img{
    transform:translate(-20px, 100px);
    align-items: bottom;
    width:150px;
    height:150px;
}
.sm{
    width:100px;
}
.sm-icons{
    width:20px;
    height:20px;
}
.blocks{
    margin-bottom:5px;
}
.certification{
    width:120px;
    height:120px;
    border:1px dashed black;
    padding:10px;
    border-radius:6px;
    cursor:pointer;
    margin-right: 10px;
    transition:ease 300ms
}
.certification:hover{
    transform: scale(2.7);
}
.tech-stack{
    padding:10px;
    border-radius:6px;
    display:flex;
    gap:10px;
    border:1px dashed black;
    width:145px;
    margin-right:5px
}
.projects-wrapper{
    border-radius:6px;
    border:none;
}
.project-illustration{
    margin-right:5px;
}
.project-name{
    width:35%;
    margin-right:10px;
    border:none;
}
.project-explanation{
    color:hsl(38, 14%, 29%);
}
.project-img{
    width: 55%;
}
.links-website{
    font-weight:200;
    font-size:.8rem;
    transition:ease 300ms;
    margin-right:7px;
    font-style:italic;
}
.links-website:hover{
    border:1px dashed hsl(38, 14%, 99%);
    border-radius:7px;
    padding:5px;
}
.technology-used{
    margin-right:7px;
    padding-inline:5px;
    border-radius:6px;
    border:1px dashed #E7E4DF;
}
.contacts-wrapper{
    gap:40px;
}
.cv{
    padding:10px;
    border:1px dashed black;
    border-radius:6px;
    width:fit-content;
    cursor:pointer;
    transition:ease 300ms;
}
.cv:hover{
    box-shadow: -3px 0px 1px black;
}
.hiding{
    display: none;
}
.responsive-navigation{
    background-color:hsl(38, 14%, 79%);
    border-radius:6px;
    padding-bottom:22px;
    position:fixed;
}
.github-responsive{
    font-size: 1rem;
}

/* Animation for heading-type-developer and type-developer value switching */
.heading-type-developer,
.type-developer,
.dev-img {
    transition: opacity 0.4s cubic-bezier(.4,2,.6,1), transform 0.4s cubic-bezier(.4,2,.6,1);
}

.switch-animate {
    opacity: 0;
    transform: translateY(30px) scale(0.95) skewY(4deg) rotateZ(-2deg);
    transition: opacity 0.4s cubic-bezier(.4,2,.6,1), transform 0.4s cubic-bezier(.4,2,.6,1);
}

/* Optional: Add a little glow on switch */
.heading-type-developer.switch-glow,
.type-developer.switch-glow {
    text-shadow: 0 0 16px #ffd700, 0 0 2px #fff;
    color: #222;
    transition: text-shadow 0.3s, color 0.3s;
}

/* Optional: Dev image pop effect */
.dev-img.switch-pop {
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.18), 0 0 0 4px #ffd70044;
    border-radius: 50%;
    transition: box-shadow 0.4s, border-radius 0.4s;
}

@media (max-width:1120px) {
    nav{
        width:81%;
    }
    .technologies-certification-wrapper{
        width:fit-content;
        margin-inline:auto;
        display:block;
    }
    .certificates{
        width:fit-content;
        margin-inline:auto;
        margin-bottom:20px;
    }
    @media (max-width:924px){
        nav{
            width:77.5%;
        }
        .heading{
            font-size:3.5rem
        }
        .dev-img{
            transform:translate(0);
            align-items: bottom;
            width:70px;
            height:70px
        }
        
        .project-name-img{
            display:block;
            width:fit-content;
            margin-inline:auto;
        }
        .project-name{
            width:fit-content;
            margin-right:0;
        }
        .project-img{
            width:auto;
            margin-top:20px;
        }
    }
    }
    @media (max-width: 814px){
        nav{
            width:75%;
        }
        .contacts-wrapper{
            display:block;
        }
    }
    @media (max-width:700px){
        .wrapper{
            margin-inline:40px;
        }
        nav{
            width:88%;
        }
        .heading-contact-info{
            font-size:3rem
        }
        .navigatorOne{
            display:none
        }
        .navigatorTwo{
            display:block
        }
        .home-wrapper{
            padding-inline:40px;
        }
        .responsive-navigation{
            right:0;
            margin-right:25px
        }
    }
    @media (max-width:546px){
        nav{
            width:89%;
        }
        .tech-stack{
            padding:10px;
            font-size:.9rem;
            width:130px;
            margin-right:5px
        }
        .wrapper{
            margin-inline: 30px;
        }
    }
    @media (max-width:458px){
        nav{
            width:100%;
        }
        .tech-stack{
            padding:10px;
            font-size:.9rem;
            width:130px;
            margin-right:5px
        }
        .wrapper{
            margin-inline: 0;
        }
        .technologies-certification-wrapper{
            margin-left:-30px;
        }
    }
    @media (max-width:416px){
        .technologies-certification-wrapper{
            margin-inline:auto;
            /* margin-left:-35px; */
        }
        .dev-img{
            display:none;
        }
        
        .responsive-navigation{
            right:0
        }
        .technologies-used{
            flex-wrap: wrap;
            margin-bottom:5px;
        }
        .tech-stack{
            padding:5px;
            font-size:.6rem;
            width:100px;
            margin-right:5px;
            display:flex;
        }
    }
    @media (max-width:320px){
        .project-img{
            width:auto;
        }
        .responsive-navigation{
            right:0;
        }
        .contact-info{
            font-size:0.9rem
        }
        .heading{
            font-size: 3rem;
            line-height: 50px;
        }
        .blocks,
        .certificates{
            flex-wrap: wrap;
            /* margin-inline:auto;
            margin-bottom:4px; */

        }
        .projects-wrapper{
            width:100%
        }
    }