* {
  margin: 0;
  padding: 0;
}

body {
  /* background: #1d1d1d; */ 
  background: linear-gradient(135deg, #000104e7, #020a1af2, #070e1bf5);
  color: white;
  font-family: system-ui;
}

.crud {
  width: 80%;
  /* margin: auto; */
  margin: 6rem 7.7rem;
  background: rgba(0, 26, 77, 0.368);
  border-radius: 16px;
  padding: 35px;
  padding-top: 4px;
  box-shadow: 0 0 5px rgba(0, 51, 153, 0.5);
  border: 1px solid rgba(0, 102, 255, 0.078);
}

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

input {
  width: 98%;
  height: 30px;
  outline: none;
  border: none;
  background: rgba(0, 0, 0, 0.916);
  margin: 4px;
  margin-bottom: 7px;
  border-radius: 7px;
  padding: 8px;
  color: white;
}

input:focus {
  background:#070e1b;
  transform: scale(1.03);
}

.price input {
  width: 20%;
}

#total {
  background: #a00d02;
  padding: 5px 2px;
  border-radius: 4px;
}

#total::before {
  content: "total: ";
}

button {
  width: 99.5%;
  height: 35px;
  border: none;
  cursor: pointer;
  border: 1px solid #003366;
  background: #001b4d;
  color: #fff;
  border-radius: 20px;
  transition: 0.5s;
  margin: 4px;
}

button:hover {
    border-color: #00aaff;
  background-color: #002966;
  letter-spacing: 1.2px;
}

.btnSearch {
  display: flex;
  justify-content: space-between;
}

.btnSearch button {
  width: 45%;
}

#deleteAll{
  margin:20px 0;
}

table {
  width: 100%;
  text-align: center;
  margin: 10px 0;
}

table th {
  text-transform: uppercase;
}

table th,
table td {
  padding: 5px;
}





/* 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
} */