body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  animation: fade-in 0.25s steps(3);
}

main{
  position: relative;
  background: url(/images/blue.png) center no-repeat;
  width: 400px;
  height: 300px;
}

h1{
  position: absolute;
  pointer-events: none;
  color: #fff;
  letter-spacing: -8px;
  font-family: Arial, sans-serif;
  text-shadow: 1px 1px 0 #423f3b, -1px -1px 0 #423f3b, -1px 1px 0 #423f3b, 1px -1px 0 #423f3b;

  span{
    display: inline-block;
    font-family: 'Times New Roman';
    letter-spacing: -15px;
    transition: opacity 0.15s steps(2);
  }
}

#paper{
  z-index: 1;
  top: -40px;
  right: 40px;
  font-size: 80px;
  transform: scaleY(2);
}

#thin{
  z-index: 2;
  top: 55px;
  right: 5px;
  font-size: 65px;
  transform: scaleY(1.95);
}

#blue{
  z-index: 3;
  position: relative;
}

nav{
  z-index: 4;
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
}

a{
  color: #f0f1f5;
  text-decoration: 1px underline rgba(255, 255, 255, 0.75);
}

a:hover{
  color: #fff;
  font-weight: bold;
}