@media (max-width: 768px) {
    .HEAD {
        font-size: 6vw; 
    }

    button {
        font-size: 4vw; 
        padding: 2vw; 
    }

    input::placeholder {
        font-size: 4vw;
    }

    th, td {
        font-size: 3.5vw; 
        padding: 1.5vw; 
    }

    #search, #create {
        width: 100%; 
    }

    #searcht, #searchc {
        width: 48%; 
    }

    .INPUT input, .OUTPUT input {
        width: 100%;
        height: 10vw;
        font-size: 4vw;
    }

    .btnsearch {
        height: auto;
        flex-direction: column;
        width: 100%; 
        gap: 10px; 
    }
    .ALL {
        padding: 10px;
        width: 100%;
        height: auto; 
        margin: 0 auto;
    }

    table {
        width: 100%;
        font-size: 3.5vw;
        display: block; 
        overflow-x: auto; 
    }
}

:root {
    --main-color: #408d8d;
}
body{
    text-transform: capitalize;
    background-color: black;
   font-family: Arial, Helvetica, sans-serif;
   color: white;

}
.ALL{
    align-items: center;
    width: 90%;
    height: 100vh;
   background-image: url("image/image-1.png");
    background-size: cover;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.CRUD{
    width: 100%;
    height: 100vh;
    background-color: #00000096;
    margin: 0 auto;
}
.HEAD{
    text-align: center;
    font-size: 20px;

}
.HEAD p{
    padding:0;
   margin: 0;
   font-weight: bold;
}
.INPUT input,
.OUTPUT input {
    height: 20px;
    border: 5px solid dimgray;
    margin: 2px;
    border-radius: 7px;
    background-color: dimgray;
    color: white;
    transition: transform 0.3s ease;
}

#title,
#category,
#count
{
    width: 100%;
}
#search,
#create {
    width: 101.25%; 
}
.price{
    text-align: center;
    padding: none;
    
}

input::placeholder {
    color: rgba(218, 208, 208, 0.432);
    font-size: 15px ;
    
}
.INPUT input:focus,
.OUTPUT input:focus{
    background-color: #2b2727;
    transform: scale(1.1);
}
.INPUT small{
    background-color: brown;
    padding: 5px;
}
#total::before{
    content: "total:";
}
button{
    background-color: var(--main-color);
    padding: 5px;
    border: 2px solid  var(--main-color);
    border-radius: 10px;
    cursor: pointer;
    color: white;
    font-size: 20px;
    width: 100%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
button:hover{
    background-color: #174b4b;
    letter-spacing: 2px;
}
.OUTPUT .search-block:focus{
    background-color: #2b2727;
    transform: scale(1.1);
}
.btnsearch{
    display: flex;
    width: 101.25%;
    height: 43px;
    justify-content: space-between;
}

#searcht,
#searchc {
    width: 45%;
    padding: 10px;
    margin-top: 10px;
    display: flex;
    align-items: center; 
    justify-content: center;
}
.OUTPUT input[type="search"] {
    height: 30px;
    margin-bottom: -8px;
    padding: 12px;
}
table {
    margin-top: 10px;
    width: 100%;
    border-collapse: collapse;
}
table button{
   border: 2px solid  #174b4b;
}

table button:hover{
    letter-spacing: 0px;
}
th, td {
    padding: 7px;
    text-align: center;
    border-bottom: 2px solid var(--main-color);
}
tr:hover
{
    background-color: var(--main-color);
}
#deleteAll{
    margin: 10px 0;
  width: 101.25%;
}