* {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  display: grid;
  height: 100vh;
  place-items: center;
  position: relative;
}

.contents {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10rem;
  transition: 0.75s;
}

.contents:hover {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 10px;
  padding: 1rem;
  transition: 0.75s;
  scale: 1.2;
}

.morning {
  background: url("./siang.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #333;
  transition: 0.75s;
}

.afternoon {
  background: url("./sore.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  transition: 0.75s;
}

.evening {
  background: url("./malam.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  transition: 0.75s;
}

@media only screen and (max-width: 600px) {
  .contents {
    flex-direction: column;
    font-size: 4rem;
  }
}