body {
    background-color: #030308;
    font-family: 'Courier New', Courier, monospace;
}

.main {
  text-align: center;
  margin: 80px 20px;
  color: white;
  font-size: 50px;
  text-shadow: 0px 0px 5px white;

  animation: slideFromTop 2s ease-out forwards;
}

@keyframes slideFromTop {
    from {
        transform: translateY(-20vh);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#messages {
  text-align: center;
  color: gray;
  font-size: 20px;
  text-shadow: 0px 0px 5px gray;
  position: relative;
  top: 0px;
  right: 15px;
}

.Welcome::after {
  content: '|';
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

.tsuki {
 display: block;
 margin: 0 auto;
 position: relative;
 right: 15px;
 top: 500px;
 height: 50px;
 width: 150px;
 border-radius: 5%;
 animation: unshade 2s;
}

@keyframes unshade {
  from { opacity: 0; }
  to { opacity: 1s; }
}