body{
  font-family: Arial;
  background-color: rgb(99, 135, 235);
 }
 
 #products{
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 10px;
  margin-top: 20px;
 }
 
 .card{
  border:1px solid #ccc;
  padding:10px;
  text-align:center;
 }

input[type="text"]{
  padding:10px;
  width:200px;
  margin-top:20px;
  border-radius: 5px;
 }

 select{
  margin-top:10px;
  padding: 10px;
  border-radius: 5px;
 }

 div{
  margin-top:20px;
  border:1px solid #ccc;
  padding:10px;
  font-size: large;
  background-color: rgb(169, 199, 238);
  border-radius: 5px;
 }
.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background-color: #f5f7fa;
  border-color: #6699cc;
  cursor: pointer;
}