* {margin:0;padding:0;} 

html, body {height: 100%;}

body{
    background-color: #fff;
    margin: 0px;
    overflow: hidden;
    color:#fff;
}
h1{
    margin:0;
}

a {
    color:#0078ff;
    white-space: nowrap;

}

.icons{
    position: fixed;
    left: 15px;
    bottom: 0;
    font-size: 20px;
    color: white;
    padding: 20px;
}

.menulinks{
    font-size: 20px;
}

#canvas{
    width:100%;
    height:100%s;
    overflow: hidden;
    position:absolute;
    top:0;
    left:0;
    background-color: #1a1724;               
}
.canvas-wrap{
    position:relative;
}

div.canvas-content{
    position:relative;
    z-index:2000;
    color:#fff;
    /*text-align:center;*/
}

header{
    height: 100vh;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'AvenirLight';
    font-size: 25px;
    letter-spacing: 2px;
    font-weight: bold;
}

@font-face{
    font-family:'AvenirReg';
    src: url('../fonts/Avenir/AvenirNextLTPro-Regular.ttf') format('truetype');
}

@font-face{
    font-family:'AvenirLight';
    src: url('../fonts/Avenir/AvenirNextLTPro-UltLtCn.ttf') format('truetype');
}

header a,a:visited{
    color: #FFFFFF;
    text-decoration: underline;
}

header a:hover{
    color: #FFFFFF;
    text-decoration: line-through;
} 

p
{
    width: 15em;
    white-space:nowrap;
    overflow:hidden;
    /*-webkit-animation: type 5s steps(50, end);*/
    animation: type 4s steps(60, end);
}

p:nth-child(2){
    animation: type2 8s steps(60, end);
}

p:nth-child(3){
    animation: type3 12s steps(60, end);
}

span{
  animation: blink 1s infinite;
}

@keyframes type{
    from { width: 0; }
}

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes type3{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

/*@-webkit-keyframes type{
    from { width: 0; }
} */