* {
  margin: 0;
  padding: 0;
}

body  {
  background-color: #222;
  color: #fff;
  font-family: system-ui;
}

.cruds {
  width: 80%;
  margin: auto;
}

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

input {
  width: 100%;
  height: 25px;
  margin: 4px 0;
  border-radius: 4px;
  border: none;
  outline: none;
  background: #111;
  padding: 4px;
  color: #fff;
}
input:focus {
  background: #000;
  transform: scale(1.05);
}
.price input{
  width: 20%;
}
#total {
  background-color: rgb(115, 0, 0);
  padding: 5px 2px;
  border-radius: 4px;
}
#total::before {
  content: "Total: ";
}
button {
  width: 100%;
  background-color: rgba(92, 4, 129, 0.542);
  border: none;
  color: #fff;
  height: 25px;
  border-radius: 20px;
  cursor: pointer;
  transition:  0.5s;
}
button:hover {
  background-color: rgb(79, 3, 112);
  letter-spacing: 1px;
}
.btnSearch {
  display: flex;
  justify-content: space-between;
}
.btnSearch button {
  width: 45%;
}
#deleteAll {
  margin: 20px 0;
}
table {
  width: 100%;
  margin: 10px 0;
  text-align: center;
}
table th {
  text-transform: uppercase;
}
th, td {
  padding: 5px;
}

footer {
  text-align: center; 
  padding: 20px 0; 
  margin-top: 40px; 
  border-top: 1px solid #333;
  font-size: 12px; 
  color: #ccc; 
  letter-spacing: 1px; 
  position: fixed; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  background-color: #222;
  z-index: 100;

}


.my-name {
  color: #9b59b6; 
  font-weight: bold; 
  font-size: 16px; 
  cursor: pointer; 
  transition: 0.5s;
  display: inline-block;
  margin-left: 5px;
}


.my-name:hover {
  color: #fff;
  text-shadow: 0 0 10px #9b59b6;
  transform: scale(1.05);
}