html, body {
  margin: auto auto;
  padding: 20;
  font-family: 'Songti TC', serif;
  overflow: hidden; 
}

h1 { 
  font-size: 30px; 
  font-weight: 100; 
  line-height: 32px; 
}

h2 {
  font-size: 22px; 
  font-family: 'Raleway', sans-serif; 
  font-weight: 100; 
  line-height: 42px;
  /* background-color: #aaa1; */
}

@keyframes fadeIn {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

#title-container {
  color: #b5b5b5; 
  position: absolute;
  width: 80%;
  height: 50%;
  top: 60%;
  left: 10%;
  text-align: center; 
  opacity: 0;

  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */

  animation-name: fadeIn;
  animation-delay: 10s;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}


a {
  text-decoration: none;
  color: #aaa;
}

a:hover {
  text-decoration: underline;
  color: #aaa;
}

.link--bar a {
  color: #aaa;
  opacity: 0.35;
  text-decoration: none;
  margin: 10px;
}

canvas {
  z-index: -1;
}