@charset "UTF-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
  border: 0;
}

li {
  list-style: none;
}

body {
  background-color: #000;
  font-family: 'helvetica neue', helvetica, sans-serif ;
  font-weight:  bold;
  animation: body 5s ease;
  overflow-x:hidden;
}

#introduction{
	width:100vw;
	height:80vh;
	}
	

#hello {
  top:27vh;
  position:absolute;
  width: 24vh;
  height:12vh;
  left:15vw;
  margin-left:-3vh;
  fill:transparent; 
  stroke:#fff;
  animation: hello 15s ease;
}

@keyframes hello {
  5% {
    width: 55vw;
    height: 27.5vw;
	left: 22.5vw;
	top:50%;
	margin-left:0;
	margin-top:-13.75vw;
  }

  25% {
    width: 60vw;
    height: 30vw;
	left: 20vw;
	top:50%;
	margin-top:-15vw;
  }

  29% {
width: 60vw;
    height: 30vw;
	left: 20vw;
	top:50%;
	margin-top:-15vw;
	margin-left:0;
  }

  35% {
	  margin-top:27vh;
  top:0;
  width: 24vh;
  height:12vh;
  left:15vw;
  margin-left:-3vh;
  }

}

#hello-stroke {
  stroke-dasharray: 10000;
  stroke-dashoffset: 10000;
  animation: hellostroke 15s cubic-bezier(.57, .5, 0, .7) forwards;
}

@keyframes hellostroke {
  0% {
  }

  5% {
    stroke-dashoffset: 10000;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

#period {
	fill:#fff;
  animation: period 4s cubic-bezier(.57, .5, 0, .7);
}

@keyframes period {
  0% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#introduction p{
  width: 60vw;
  left: 15vw;
  position: absolute;
  vertical-align: middle;
  color: #fff;
  font-family: 'helvetica neue', helvetica, sans-serif ;
  font-weight:  bold;
  font-size: 14pt;
  top:43vh;
  animation: introduction 6s ease;
}

@keyframes introduction {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
    margin-top: 10pt;
  }

  100% {
    opacity: 1;
    margin-top: 0;
  }
}

.links {
    text-decoration: none;
    font-weight:  bold;
    position: relative;
    font-size: 12pt;
    color: #000;
    background-color: #ddd;
    padding: 15px 30px;
    border-radius: 50px;
    top: 40px;
    line-height: 60px;
    animation: links 6.5s ease;
    transition: color 300ms ease-out 100ms;
    transition: background-color 300ms ease-out 100ms;
}

.links:hover {
    color: #000;
    background-color: #fff;
}

@keyframes links {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
    top: 50px;
  }

  100% {
    opacity: 1;
    top: 40px;
  }
}