html, body {

  overflow: hidden;

  font: 16px/1.4 'Lato', sans-serif;

  color: #fefeff;

}

body {

  margin: 0;

  position: absolute;

  width: 100%;

  height: 100%;

}

canvas {

  width: 100%;

  height: 100%;

}

h1 {

  font: 2.75em 'Cinzel', serif;

  font-weight: 400;

  letter-spacing: 0.35em;

}

[class^="letter"] {

  -webkit-transition: opacity 3s ease;

  -moz-transition: opacity 3s ease;

  transition: opacity 3s ease;

}

.letter-0 {

  transition-delay: 0.2s;

}

.letter-1 {

  transition-delay: 0.4s;

}

.letter-2 {

  transition-delay: 0.6s;

}

.letter-3 {

  transition-delay: 0.8s;

}

.letter-4 {

  transition-delay: 1.0s;

}

.letter-5 {

  transition-delay: 1.2s;

}

.letter-6 {

  transition-delay: 1.4s;

}

.letter-7 {

  transition-delay: 1.6s;

}

.letter-8 {

  transition-delay: 1.8s;

}

.letter-9 {

  transition-delay: 2.0s;

}

.letter-10 {

  transition-delay: 2.2s;

}

.letter-11 {

  transition-delay: 2.4s;

}

.letter-12 {

  transition-delay: 2.6s;

}

.letter-13 {

  transition-delay: 2.8s;

}

.letter-14 {

  transition-delay: 3.0s;

}

.letter-15 {

  transition-delay: 3.2s;

}

h1 {

  visibility: hidden;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);



}

h1.transition-in {

  visibility: visible;

}

h1 [class^="letter"] {

  opacity: 0;

}

h1.transition-in [class^="letter"] {

  opacity: 1;

}

a1 {

  position: absolute;
  top: 60%;
  left: 40%;

}