*{
    margin:0 ; 
    padding: 0;
    transition :0.4s     ;
}
body { 
    background-image: linear-gradient(175deg , #222 35%, #000);   
    background-repeat: no-repeat  ;
    background-size: cover   ;
    background-attachment: fixed;
height: 100vh;
    font-family :system-ui;  
    color:#fff ;
}
.crud { 
    width : 80%; 
    margin:auto auto ; 
}

.head{ 
    text-align: center ; 
    text-transform : uppercase; 
    margin : 10px 0  ; 

}
input{ 
    width:100%;
    height:30px;
    outline: none ; 
    border:none;
    background:#111;
    margin : 4px 0  ;
    border-radius : 4px ; 
    padding :4px;
    color: white ;

}
input:focus { 
    background-color : #000 ; 
    padding: 10px ;
    scale : 1.1;
}
.price input{ 
    /* the parent is 80% ok 80/4 = 20% for every input  this make it responsive*/
    width:20%;
}
#total{ 
    background :#a00d02; 

    padding: 5px 2px ; 
    border-radius: 5px ;
}
#total::before{ 
    content: "total: ";
}
button{ 
    border:none ;
    width: 100%; 
    padding: 4px  0; 
    border-radius:10px ;
    height :30px ;
    cursor: pointer;
    background-color : rgb(110, 2, 110);
    color : #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:100;
    transition:0.5s;
    margin: 6px 0 ;
}
button:hover{ 
    background: rgb(255, 114, 255);
    letter-spacing: 2px;
}
.btnSearch > button{ 
    /* margin: 0 10; */ 
    width: 45%;
}
.btnSearch{ 
    display:flex;
    flex-direction :row ; 
    gap: 10px ;
    justify-content: space-between;

}
table { 
    width:100%;
    text-align :center ;
    margin: 10px 0 ; 
    text-transform: uppercase;
}
th ,td { 
    padding : 5px ;
}
button:active{ 
    background-color : #000;
}