* {
        margin: 0;
        padding: 0;
    }
    
    body {
        background: #222;
        color: white;
        font-family: system-ui;
    }
    
    .crud {
        width: 80%;
        margin: auto;
    }
    
    .head {
        text-align: center;
        text-transform: uppercase;
        margin: 10px 0px;
    }
    
    .e:hover {
        color: rgb(192, 0, 166);
    }
    
    input {
        width: 100%;
        height: 30px;
        outline: none;
        border: none;
        background: #111;
        margin: 4px 0px;
        border-radius: 20px;
        padding: 5px;
        color: white;
    }
    
    input:focus {
        background: #000;
        transform: scale(1.030);
    }
    
    .price input {
        width: 20%;
    }
    
    #total {
        background: rgb(75, 5, 5);
        padding: 10px 10px;
        border-radius: 15px;
    }
    
    #total::before {
        content: "Totel : ";
    }
    
    button {
        width: 100%;
        height: 30px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        background: rgb(4, 15, 22);
        color: white;
        transition: 1s;
    }
    
    button:hover {
        background: rgb(13, 42, 59);
        letter-spacing: 2px;
    }
    
    .btnsearch {
        display: flex;
        justify-content: space-between;
    }
    
    .btnsearch button {
        width: 45%;
    }
    
    table {
        width: 100%;
        text-align: center;
        margin: 10px 0px;
    }
    
    table th {
        text-transform: uppercase;
    }
    
    table th,
    td {
        padding: 5px;
    }
    
    #deleteall {
        margin: 20px 0px;
    }
    
    .number1 {
        padding: 10px;
    }
    
    .number1:hover {
        color: rgb(255, 0, 0);
    }