@font-face {
  font-family: Raleway;
  src: url('Raleway.ttf');
}
*, *:before, *:after {
    margin: 0;
    padding:0;
    box-sizing: border-box;
}
body {
    background-color:black;
    color: white;
    font-family: Raleway;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
#logo,
#logo-m {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  fill: none;
  width: 60vw;
}
#logo path,
#logo-m path {
  stroke: white;
  stroke-width: 2;
}
#logo path:nth-child(1) { /*H*/
  stroke-dasharray: 243px;
  stroke-dashoffset:243px;
  animation: line-anim 2.5s ease forwards-;
}
#logo path:nth-child(2) { /*a*/
  stroke-dasharray: 204px;
  stroke-dashoffset:204px;
  animation: line-anim 2.4s ease forwards 0.1s;
}
#logo path:nth-child(3) { /*m*/
  stroke-dasharray: 277px; 
  stroke-dashoffset:277px;
  animation: line-anim 2.3s ease forwards 0.2s;
}
#logo path:nth-child(4) { /*m*/
  stroke-dasharray: 277px;
  stroke-dashoffset:277px;
  animation: line-anim 2.2s ease forwards 0.3s;
}
#logo path:nth-child(5) { /*o*/
  stroke-dasharray: 170px;
  stroke-dashoffset:170px;
  animation: line-anim 2.1s ease forwards 0.4s;
}
#logo path:nth-child(6) { /*n*/
  stroke-dasharray: 182px;
  stroke-dashoffset:182px;
  animation: line-anim 2.0s ease forwards 0.5s;
}
#logo path:nth-child(7) { /*d*/
  stroke-dasharray: 228px;
  stroke-dashoffset:228px;
  animation: line-anim 1.9s ease forwards 0.6s;
}
#logo path:nth-child(8) { /*M*/
  stroke-dasharray: 302px;
  stroke-dashoffset:302px;
  animation: line-anim 1.8s ease forwards 0.7s;
}
#logo path:nth-child(9) { /*a*/
  stroke-dasharray: 204px;
  stroke-dashoffset:204px;
  animation: line-anim 1.7s ease forwards 0.8s;
}
#logo path:nth-child(10) { /*s*/
  stroke-dasharray: 172px;
  stroke-dashoffset:172px;
  animation: line-anim 1.6s ease forwards 0.9s;
}
#logo path:nth-child(11) { /*o*/
  stroke-dasharray: 170px;
  stroke-dashoffset:170px;
  animation: line-anim 1.5s ease forwards 1.0s;
}
#logo path:nth-child(12) { /*n*/
  stroke-dasharray: 182px;
  stroke-dashoffset:182px;
  animation: line-anim 1.4s ease forwards 1.1s;
}
#logo path:nth-child(13) { /*.*/
  stroke-dasharray: 33px;
  stroke-dashoffset:33px;
  animation: line-anim 1.3s ease forwards 1.2s;
}
#logo path:nth-child(14) { /*c*/
  stroke-dasharray: 157px;
  stroke-dashoffset:157px;
  animation: line-anim 1.2s ease forwards 1.3s;
}
#logo path:nth-child(15) { /*o*/
  stroke-dasharray: 170px;
  stroke-dashoffset:170px;
  animation: line-anim 1.1s ease forwards 1.4s;
}
#logo path:nth-child(16) { /*m*/
  stroke-dasharray: 277px;
  stroke-dashoffset:277px;
  animation: line-anim 1s ease forwards 1.5s;
}
@keyframes line-anim {
  to {
    stroke-dashoffset: 0;
    stroke: white;
  }
}
#logo,
#logo-m {
  animation: line-fill 1s ease forwards 1.5s;
}
@keyframes line-fill {
  0%   {
    fill: rgba(255, 255, 255, 0);
  }
  100% {
    fill: rgba(255, 255, 255, 1);
  }
}

@keyframes canvasify {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
canvas {
  position: fixed;
  z-index: -1;
  opacity: 0;
  animation: canvasify 1s forwards 1.75s;
}

@keyframes navify {
  from {
    top: -10vh;
    filter: blur(10px);
    opacity: 0;
  }
  to {
    top: 0vh;
    filter: blur(0px);
    opacity: 1;
  }
}
nav { 
  position: fixed;
  top: 0;
  width: 100vw;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;

  padding-left: 1rem;
  padding-right:1rem;
  
  opacity: 0;
  animation: navify 1s forwards 1.5s;
}
nav a {
  text-decoration		: none;
  margin-top			: 2rem;
  margin-bottom			: 2rem;
  font-family			: Raleway;
  font-size			: 1rem;
  font-weight			: bold;
  color				: inherit;
}
nav a:hover {
  color				: grey;
}
canvas {
  position: fixed; top: 0; left: 0;
}
@keyframes footerify {
  from {
    bottom: -10vh;
    filter: blur(10px);
    opacity: 0;
  }
  to {
    bottom: 0;
    filter: blur(0px);
    opacity: 1;
  }
}
footer {
  opacity: 0;
  
  position: fixed;
  bottom: 0vh;
  width: 100vw;
  height: 10vh;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  animation: footerify 1s forwards 1.5s;
}

#logo-m {
  display: none;
}
#logo-m path:nth-child(1) { /*H*/
  stroke-dasharray: 243px;
  stroke-dashoffset:243px;
  animation: line-anim 2.5s ease forwards;}
#logo-m path:nth-child(2) { /*a*/
  stroke-dasharray: 204px;
  stroke-dashoffset:204px;
  animation: line-anim 2.4s ease forwards 0.1s;}
#logo-m path:nth-child(3) { /*m*/
  stroke-dasharray: 278px;
  stroke-dashoffset:278px;
  animation: line-anim 2.3s ease forwards 0.2s;}
#logo-m path:nth-child(4) { /*m*/
  stroke-dasharray: 278px;
  stroke-dashoffset:278px;
  animation: line-anim 2.2s ease forwards 0.3s;}
#logo-m path:nth-child(5) { /*o*/
  stroke-dasharray: 170px;
  stroke-dashoffset:170px;
  animation: line-anim 2.1s ease forwards 0.4s;}
#logo-m path:nth-child(6) { /*n*/
  stroke-dasharray: 181px;
  stroke-dashoffset:181px;
  animation: line-anim 2.0s ease forwards 0.5s;}
#logo-m path:nth-child(7) { /*d*/
  stroke-dasharray: 228px;
  stroke-dashoffset:228px;
  animation: line-anim 1.9s ease forwards 0.6s;}
#logo-m path:nth-child(8) { /*M*/
  stroke-dasharray: 302px;
  stroke-dashoffset:302px;
  animation: line-anim 1.8s ease forwards 0.7s;}
#logo-m path:nth-child(9) { /*a*/
  stroke-dasharray: 204px;
  stroke-dashoffset:204px;
  animation: line-anim 1.7s ease forwards 0.8s;}
#logo-m path:nth-child(10) { /*s*/
  stroke-dasharray: 172px;
  stroke-dashoffset:172px;
  animation: line-anim 1.6s ease forwards 0.9s;}
#logo-m path:nth-child(11) { /*o*/
  stroke-dasharray: 170px;
  stroke-dashoffset:170px;
  animation: line-anim 1.5s ease forwards 1.0s;}
#logo-m path:nth-child(12) { /*n*/
  stroke-dasharray: 181px;
  stroke-dashoffset:181px;
  animation: line-anim 1.4s ease forwards 1.1s;}
#logo-m path:nth-child(13) { /*.*/
  stroke-dasharray:  33px;
  stroke-dashoffset: 33px;
  animation: line-anim 1.3s ease forwards 1.2s;}
#logo-m path:nth-child(14) { /*c*/
  stroke-dasharray: 157px;
  stroke-dashoffset:157px;
  animation: line-anim 1.2s ease forwards 1.3s;}
#logo-m path:nth-child(15) { /*o*/
  stroke-dasharray: 170px;
  stroke-dashoffset:170px;
  animation: line-anim 1.1s ease forwards 1.4s;}
#logo-m path:nth-child(16) { /*m*/
  stroke-dasharray: 278px;
  stroke-dashoffset:278px;
  animation: line-anim 1s ease forwards 1.5s;}

@media screen and (orientation: portrait) {
  #logo {
    display: none;
  }
  #logo-m {
    display: initial;
  }
}

@media screen and (min-width: 1000px) {
  nav {
    justify-content: space-evenly;
  }
}