/* this is also a comment */
/* comments describe code without getting in the way */

/* in CSS, one can customise the style of body tags,  */
body {
  margin: 0; /* removes margins */
  padding: 25px; /* adds padding around the body */
  font-family: 'Crimson Pro', serif; /* changes font */
  height: 100vh; /* body occupies total height of the screen (otherwise it just takes what the text covers) */
  display: flex; /* all items will fit in a flexy way */
  flex-direction: column; /* the order is left-to-right first, top-to-bottom second */
  align-items: center; /* center all items horizontally */
}
body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 140vw;    /* oversize to cover viewport corners when rotated */
  height: 140vh;
  transform: translate(-50%, -50%) rotate(15deg); /* rotate here (15deg) */
  transform-origin: center center;
  z-index: -1;
  pointer-events: none;
  background-image: url('images/Siddharta_landing_page.jpg');
  background-size: 20% auto; /* keep your scale */
  background-position: center;
  opacity: 0.15;
}
h1 {
  color: rgb(68, 5, 5);
  font-family: 'Crimson Pro', serif;
  text-align: center;
  font-size: 3em;
  margin: 120px 0;
}
h2 {
  font-family: 'Crimson Pro', serif;
  color: rgb(68, 5, 5);
  text-align: center;
  margin : 0px 0;
}

h3 {
  font-family: 'Crimson Pro', serif;
  color: rgb(68, 5, 5);
  text-align: center;
  margin: 4px 0;
}