body {

  margin: 0;

  font-family: 'Segoe UI', sans-serif;

  background: linear-gradient(to right, #111, #222);

  color: #f0f0f0;

}

header {

  background-color: #1e1e1e;

  padding: 20px;

  text-align: center;

  font-size: 1.5em;

  color: #ff4081;

  box-shadow: 0 2px 10px rgba(0,0,0,0.5);

}

.container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  padding: 20px;

}

.tile {

  background-color: #2a2a2a;

  border-radius: 10px;

  margin: 10px;

  padding: 15px;

  width: 140px;

  text-align: center;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  box-shadow: 0 0 10px rgba(255,64,129,0.3);

}

.tile:hover {

  transform: scale(1.05);

  box-shadow: 0 0 20px rgba(255,64,129,0.6);

}

.tile img {

  width: 40px;

  height: 40px;

  margin-bottom: 10px;

}

.tile h3 {

  font-size: 1em;

  color: #ff4081;

}

form {

  max-width: 300px;

  margin: 20px auto;

  background: #1e1e1e;

  padding: 20px;

  border-radius: 10px;

  box-shadow: 0 0 10px rgba(255,64,129,0.3);

}

input, select {

  width: 100%;

  padding: 10px;

  margin: 10px 0;

  background: #333;

  color: #fff;

  border: none;

  border-radius: 5px;

}

button {

  background-color: #ff4081;

  color: white;

  border: none;

  padding: 10px;

  width: 100%;

  border-radius: 5px;

  cursor: pointer;

}

button:hover {

  background-color: #e91e63;

}

@media (max-width: 600px) {

  .tile {

    width: 100px;

    padding: 10px;

  }

  .tile h3 {

    font-size: 0.8em;

  }

  .tile img {

    width: 30px;

    height: 30px;

  }

}