html, body {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;  
  justify-content: center;
  min-height: 100vh;
  height: 100%;
  font-weight: 400;
  color:#fff;
  font-family: 'Catamaran', sans-serif;
  background: linear-gradient(-35deg, #141E7D, #097ba8, #222725, #051753);
  background-size: 500% 500%;
  animation: gradient 25s ease-in-out infinite;
}

main {
  flex: 1 0 auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

header, footer {
  flex: none;
  font-size: 12px;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Catamaran', sans-serif;
}

#iAm, #watch {
  font-size:medium
}

header {
  text-decoration: line-through;
}

.main-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.social {
  display: flex;
  justify-content: space-evenly;
}

.fa {
  padding: 10px;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

a {
  color:#fff;
  font-weight: 700;
}

#soon {
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: 0 auto; 
  letter-spacing: .15em;
  animation: 
    typing 1.8s steps(20, end),
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}