index.css

html {
  overflow: hidden;
}

html body {
  font-family: BenchNine;
}

html body h1 {
  font-family: Cinzel Decorative;
}

main {
  background-image: url("public/images/inkblot-1-min.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fade-0 {
  /* Start with 0 opacity; fade in */
  opacity: 0;
  -webkit-transition: opacity 1.5s ease-out 0.5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-transition: opacity 1.5s ease-out 0.5s; /* Firefox < 16 */
  -ms-transition: opacity 1.5s ease-out 0.5s; /* Internet Explorer */
  -o-transition: opacity 1.5s ease-out 0.5s; /* Opera < 12.1 */
  transition: opacity 1.5s ease-out 0.5s;
}

.fade-1 {
  /* Start with 0 opacity; fade in */
  opacity: 0;
  -webkit-transition: opacity 1.5s ease-out 1.5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-transition: opacity 1.5s ease-out 1.5s; /* Firefox < 16 */
  -ms-transition: opacity 1.5s ease-out 1.5s; /* Internet Explorer */
  -o-transition: opacity 1.5s ease-out 1.5s; /* Opera < 12.1 */
  transition: opacity 1.5s ease-out 1.5s;
}

.fade-2 {
  /* Start with 0 opacity; fade in */
  opacity: 0;
  -webkit-transition: opacity 1.5s ease-out 2.5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-transition: opacity 1.5s ease-out 2.5s; /* Firefox < 16 */
  -ms-transition: opacity 1.5s ease-out 2.5s; /* Internet Explorer */
  -o-transition: opacity 1.5s ease-out 2.5s; /* Opera < 12.1 */
  transition: opacity 1.5s ease-out 2.5s;
}

.fade-3 {
  /* Start with 0 opacity; fade in */
  opacity: 0;
  -webkit-transition: opacity 1s ease-out 3.5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-transition: opacity 1s ease-out 3.5s; /* Firefox < 16 */
  -ms-transition: opacity 1s ease-out 3.5s; /* Internet Explorer */
  -o-transition: opacity 1s ease-out 3.5s; /* Opera < 12.1 */
  transition: opacity 1s ease-out 3.5s;
}

.load {
  opacity: 1;
}