html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.hero {
  height: 100vh;
background:
  linear-gradient(rgba(230, 225, 225, 0.35), rgba(231, 198, 198, 0.35)),
  url("earma.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
  display: flex;
  align-items: flex-start;     /* TOP */
  justify-content: flex-end;   /* RIGHT */
  padding: 40px;               /* space from edges */
}

.hero-content {
  text-align: right;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

h1 {
  color: rgb(238, 97, 15);
  font-size: 2.9rem;
  letter-spacing: 2px;
  text-shadow: 2px 2px 8px black;
  margin: 0;
}

.dob {
  color:rgb(238, 97, 15);
  font-size: 2.9rem;
  margin-top: 16px;
}