* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

body {
  height: 100%;
  width: 100%;
  color: #01150b;
  background-color: #f5fffa;
}

header {
  background-color: #12f592;
  color: white;
  text-align: center;
  padding: 25px 0;
  margin-bottom: 3em;
}

table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
  overflow: hidden;
}

table,
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f8fafa;
}

tr:nth-child(odd) {
  background-color: #ffffffce;
}

.delete-icon{
    color: red;
}

.edit-icon{
    color: rgb(114, 182, 12);
}

.edit-icon,
.delete-icon {
  font-size: 18px;
  margin: 1px 10px;
  padding-bottom: 5px;
}

.edit-icon:hover,
.delete-icon:hover {
  color: #3ccdf7;
}

.productForm {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100px;
}

.productForm input[type="text"],
.productForm input[type="number"] {
  padding: 10px;
  margin: 5px;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.productForm button {
  padding: 10px 20px;
  background-color: #75e7f9;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

.productForm button:hover {
  background-color: #3ccdf7;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  margin-top: 50px;
  padding: 10px 0;
  font-size: 0.8em;
  width: 100%;
  position: fixed;
  bottom: 0;
}

@media (max-width: 600px) {
  header {
    font-size: 0.7em;
    margin-bottom: 2em;
  }
}