@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");
.meme-generator {
  font-family: "DM Serif Display", serif;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.meme-generator img {
  height: 430px;
  object-fit: cover;
  margin: 20px;
  border: 2px solid black;
}

.generate-meme-btn {
  padding: 8px 20px;
  border: none;
  border-left: 4px solid #222;
  border-right: 4px solid #222;
  margin: 24px 0;
  font-size: 20px;
  color: #f64d4d;
  background: #fff;
  cursor: pointer;
  transition: all 400ms ease;
}

.generate-meme-btn:hover {
  padding: 8px 36px;
  border-left: 8px solid #222;
  border-right: 8px solid #222;
  letter-spacing: 3px;
}

.meme-author {
  height: 50px;
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 500;
  font-size: 20px;
  color: #222;
  margin: 8px;
  background: rgb(115, 149, 115);
  border-radius: 10px;
}