@import "tailwindcss";

html {
    scroll-behavior: smooth;
 font-family: ubuntu,'sans-serif'; 
}u
body{
    background-image:  url('/assets/bgbluee.jpg') ;
    background-size: cover;
    background-position: center;

}

a {

    padding: 22px 30px;
}

nav ul li a:hover {
    background-color: white;
    color: black;
}
nav h1{
    cursor: pointer;
}

input {

    padding: 10px;
    background-color: white;
    border-radius: 5px;
}

.car-cont {
    z-index: 100;
    transform: translatey(310px);
}

.ecommerce {
    transition: filter 1s ease-in-out;
}

.card:hover {
    .ecommerce {
        filter: brightness(30%);
    }

    .car-cont {
        transform: translateY(0px);

    }
}

.hello-guys {

    animation: in-animation, fade-in 1s ease-in-out;
    
}

.appear-box{
    animation: appear 1s linear;
   animation-timeline: view() ;
   animation-range: entry 0% cover 40%;
   
}
.hero-section{

    animation: in-animation 0.5s ease-in-out;
}

.project {
    animation: appear 1s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 20%;
}
.navbar{
    animation: in-animation2 0.25s ease-in-out;

}
.navbar li,button{
    animation: fade-in 1s ease-in-out;
}
.experience-card:hover
{
    transform: translatey(-10px);
    box-shadow: none;
}