/* @import "tailwindcss"; */
/* npx @tailwindcss/cli -i style.css -o ./src/output.css --watch */

nav{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}


.Pname{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.hamburger{
    display: none;
}

.card{
    transition: all 300ms ease-in-out;
}


.card:hover{
    transform: scale(1.02);
}


.main{
    width: 80vw;
}
@media (max-width: 1111px) {
    body{
        width: 100vw;
    }
    .card{
        flex-grow: 1;
    }
    .main{
        width: 100vw;
    }
    input[type=password]{
        width: 200px;
    }
    #username{
        width: 200px;
    }
    #productdescription{
        flex-direction: column;
        flex-grow: 1;
        overflow: hidden;
    }
    .productTitle{
        width: 100vw;
        margin: 0;
    }
    #productImage{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}

@media (max-width:700px) {

    .hamburger{
        display:block;
        right: 0;
    }
    .search-input{
        display: block;
    }
    .options{
        display: none;
    }
    #productdescription{
        flex-direction: column;
        flex-grow: 1;
        overflow: hidden;
    }
    .productTitle{
        width: 100vw;
        margin: 0;
    }
    .product-description-cart{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cont{
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width:500px) {
    .logo-text
    {
        display: none;
    }
    .search-input
    {
        width: 50vw;
    }
    .heading{
        margin: 4px;
    }
    
}

@media (max-width: 425px){
    .product-image{
        height: 64px;
        width: 64px;
    }
}

@media (max-width:457px) {
    .card{
        flex: 1 1 100%
    }
}
@media (max-width:400px) {
    #productImage{
        width: 320px;
        height: 320px; 
    }
}
@media (max-width:375px){
    .productCardBottom{
        display: flex;
        flex-direction: column;
    }
    .productBtn{
        margin: 0;
    }
    .productTitle{
        margin: 0;
    }
    #productdescription{
        margin: 4px;
        padding: 0;
    }
}