body {
  margin: 0;
  font-family: Arial, sans-serif;
}
.content {
  padding-left: 10px;
  box-sizing: border-box;
  padding: 5%;
}
.content p {
  margin: 0;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

.title {
  padding: 250px 0 250px 0;
  min-height: 300px;
  font-size: 5vw;
  text-align: center;
  font-family: "Roboto", sans-serif;
  background-image: url("./assets/hero.png");
  background-size: cover;
  background-position: center;
  color: rgb(231, 231, 231);
  text-shadow: 3px 3px 5px black;
}
.title h1 {
  animation: bounce 1s;
}

.content {
  min-height: 500px;
  margin: 20px;
  color: white;
  text-align: center;
}

.content p,
.content h1 {
  text-align: left;
  color: white;
}

.content p {
  font-size: 1.5em;
}

.content h1 {
  font-size: 3em;
}
body {
  background-color: rgba(71, 25, 5, 0.933);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23404040' fill-opacity='0.7' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
.horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.horizontal-no-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  background-color: rgba(71, 25, 5, 0.933);
  padding: 20px;
  border-radius: 10px;
  margin: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  width: 30%;
  margin: 10px;
  max-width: 300px;
  height: 520px;
}

.card img {
  width: 90%;
  height: auto;
  border-radius: 10px;
  margin: 10px;
}

.card p {
  font-size: 1.2em;
  text-align: left;
}

.card .author {
  margin-top: 20px;
  text-align: right;
}