/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/*!* Global *!*/
/*html{*/
/*  min-height: 100%;*/
/*  overflow: hidden;*/
/*}*/
/*body{*/
/*  height: calc(100vh - 8em);*/
/*  padding: 4em;*/
/*  color: rgba(255,255,255,.75);*/
/*  font-family: 'Anonymous Pro', monospace;*/
/*  background-color: rgb(25,25,25);*/
/*}*/


html {
    margin: 0;
    padding: 0;
      background-color: rgb(25,25,25);
}

/*a {*/
/*    text-decoration: none;*/
/*}*/

body {
    overflow: hidden;
    width: 100%;
    height: 97.8vh;
    font-family: 'Anonymous Pro', monospace;
}

.container {
    margin: 0 auto;
    height: 97.8vh;
}

ul {
    margin: 0 auto;
    width: 600px;
    z-index: 2;
    animation: Visibility 1s 5s forwards;
    opacity: 0;
}

@media screen and (max-width: 1550px) {
    ul {
        width: 400px;
    }
}
a{
    text-decoration: none;
    color: #fff;
}
p{
    color: #fff;
    margin: 3em auto 1em auto;
    width: 550px;
    font-size: 2em;
    animation: Visibility 1s 5s forwards;
    opacity: 0;
}

@keyframes Visibility {
    to   { opacity: 1; }
}

section {
    max-height: 100vh;
}
h1{
    margin: 5em auto 0 auto;
}

.line{
    width: 24em;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 4em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

/* Animation */
.typewriter{
    -webkit-animation: typewriter 4s steps(44) 1s 1 normal both,
    blinkTextCursor 500ms steps(44) infinite normal;
    animation: typewriter 4s steps(44) 1s 1 normal both,
    blinkTextCursor 500ms steps(44) infinite normal;
}
@-webkit-keyframes typewriter{
    from{width: 0;}
    to{width: 17em;}
}
@keyframes typewriter{
    from{width: 0;}
    to{width: 17em;}
}
@-webkit-keyframes blinkTextCursor{
    from{border-right-color: rgba(255,255,255,.75);}
    to{border-right-color: transparent;}
}
@keyframes blinkTextCursor{
    from{border-right-color: rgba(255,255,255,.75);}
    to{border-right-color: transparent;}
}


li {
    width: 200px;
    height: 200px;
    display: block;
    background-color: rgba(255,255,255,.75);
    text-align: center;
    float: left;
}

.media:hover a>.fa-facebook {
    background-color: #fff;
    cursor: pointer;
    color: #3b5998;
}

.media:hover a>.fa-phone {
    background-color: #fff;
    cursor: pointer;
    color: rgb(25,25,25);
}

.media:hover a>.fa-github {
    background-color: #fff;
    cursor: pointer;
    color: rgb(25,25,25);
}

.media:hover a>.fa-envelope-o {
    background-color: #fff;
    cursor: pointer;
    color: rgb(25,25,25);
}

.media:hover a>.fa-laptop {
    background-color: #fff;
    cursor: pointer;
    color: #0B70CA;
}

.media a > i {
    display: block;
    line-height: 200px;
    font-size: 75pt;
}