.card {
  display: flex;
  flex-direction: column;
  margin: 5px auto 10px auto;
  padding: 10px;
  width: 75%;
  height: auto;
  background-color: rgb(243, 229, 211);
  border-radius: 15px;
  font-family: "Georgia", sans-serif;
}

.card .card-header {
  display: flex;
  flex-direction: row;
}

.card .image-data {
  display: flex;
  flex-direction: column;
  margin: 5px auto 0px 5px;
  overflow: auto;
  max-width: 90%;
}

.card .image-title {
  margin: 5px 0px 0px 10px;
  font-size: 25px;
  font-weight: 800;
  color: #3c3037;
  text-shadow: 2px 2px 1px #f2bbd2;
}

.card .image-author {
  margin: 5px 0px 0px 20px;
  font-size: 15px;
  font-weight: 300;
  color: #503f49;
}

.card .image-delete-button {
  margin: 10px 5px 0px auto;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  background-image: url("../media/icons/x-solid.png");
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Some code from https://www.w3schools.com/css/css3_images.asp */
.card img {
  margin: 15px auto 15px auto;
  width: 80%;
  height: auto;
  padding: 4px;
  border: 4px solid white;
  border-radius: 3px;
}

.card .image-delete-button:hover {
  box-shadow: 2px 2px 10px #473e42;
}

.comment {
  margin: 0px 10px 0px 10px;
  font-size: 12px;
  font-family: "Georgia", sans-serif;
  overflow: auto;
}

.comment-header {
  display: flex;
  flex-direction: row;
  margin: 0px 5px 2px 5px;
  font-family: "Georgia", sans-serif;
}

.comment-header .author {
  margin-right: 10px;
  font-weight: 800;
}

.comment-header .date {
  margin-right: 5px;
  font-weight: 600;
}

.comment-header .comment-delete-button {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  background-image: url("../media/icons/x-solid.png");
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}

.comment-header .comment-delete-button:hover {
  box-shadow: 2px 2px 10px #473e42;
}

.comment .text {
  margin: 5px 15px 15px 35px;
  font-weight: 400;
}

.more-btn {
  width: 30%;
  font-size: 80%;
  height: 40px;
  margin: 10px 0px 5px 10px;
  font-family: "Georgia", sans-serif;
  color: #66525e;
  background-color: rgb(208, 223, 237);
  border-radius: 10px;
  border-color: #3c3037;
  font-weight: 550;
  cursor: pointer;
}