style.css

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: Arial, sans-serif;
 background-color: #f4f4f4;
}

h1 {
 text-align: center;
 padding: 20px;
}

form {
 display: flex;
 justify-content: center;
}

input[type="text"] {
 width: 200px;
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 margin: 10px;
}

input[type="submit"] {
 background-color: #4CAF50;
 color: white;
 padding: 10px;
 font-size: 16px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 margin: 10px;
}

input[type="submit"]:hover {
 background-color: #45a049;
}

.results {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 text-align: center;
}

.result {
 background-color: #8b9dc3;
 padding: 20px;
 color: white;
 width: 200px;
 margin: 10px;
 border-radius: 5px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.result:hover {
 background-color: #7981a8;
}