body {
  text-align: center;
  padding: 5%;
  background-color: #111;
  color: white;
  font-family: Arial;
}

.meme-button {
  cursor: pointer;
  font-style: italic;
  padding: 10px;
}

.meme-item {
  text-align: left;
  display: inline-block;
  padding: 10px;
  position: relative;
  width: 150px;
  height: 150px;
  margin: 5px;
  cursor: pointer;
}

.meme-img {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  border: 3px solid white;
  position: absolute;
  object-fit: cover;
  filter: brightness(90%);
}

.my-meme-img {
  position: relative;
  display: inline-block;
  margin: 5px;
  width: 220px;
  border-radius: 4px;
  border: 3px solid white;
}

.meme-txt {
  width: 150px;
  text-align: center;
  position: absolute;
  border-radius: 5px;
  bottom: 0;
  animation-name: fade-in;
  animation-duration: 1s;
  font-size: 14px;
}

.no-txt {
  display: none;
}

.darken-img {
  background-color: gray;
  filter: brightness(10%);
  animation-name: darken;
  animation-duration: 1s;
}

@keyframes darken {
  from {filter: brightness(90%)};
  to {filter: brightness(10%)};
}

@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 100 }
}