@import url('https://fonts.googleapis.com/css?family=Roboto');
html,body {
    height:100%;
    margin:0;
}
body {
    background:#2CCF6D;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content: center;
    font-family:'Roboto',sans-serif;
    user-select:none;
}
ul,li {
    list-style-type:none;
}
ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}
li {
    display:inline-block;
}
.head {
    font-size:80px;
    margin:10px auto;
    letter-spacing:5px;
    opacity:0;
    text-align:left;
    animation:0.6s ease fadeInDown forwards;
    color:#0E0620;
}
.sub {
    font-size:40px;
    text-align:left;
    margin:10px auto;
    color:#FFF;
    opacity:0;
    animation:0.6s ease fadeInUp forwards;
}
.social-icons {
    position:relative;
    text-align:left;
    margin:20px 0px;
    animation:0.5s ease fadeInRight forwards 0.3s;
    opacity:0;
}
.social-icons a {
    margin:0 15px;
    position:relative;
    display:inline-block;
    width:32px;
    height:32px;
}
.social-icons .codepen {
    margin-left:0px;
}
#codepen,#dribbble,#github,#mail {
    fill: #FFF;
    transition:0.15s linear all;
}
#codepen {
    width: 32px;
    height: 32px;
}
#dribbble {
    height: 30px;
    width: 30px;
    margin-top:2px;
}
#github {
    height: 31px;
    width: 30px;
    margin-top: 4px;
}
#mail {
   width:30px;
   height:30px;
}
.codepen:hover>#codepen {
    fill:#0E0620;
}
.dribbble:hover>#dribbble {
    fill:#0E0620;
}
.github:hover>#github {
    fill:#0E0620;
}
.mail:hover>#mail {
    fill:#0E0620;
}
@-webkit-keyframes fadeInDown{
    from {
        opacity:0;
        transform:translateY(-20px)
    }
    to {
        opacity:1;
        transform:translateY(0px);
    }
}
@keyframes fadeInDown{
    from {
        opacity:0;
        transform:translateY(-30px)
    }
    to {
        opacity:1;
        transform:translateY(0px);
    }
}
@-webkit-keyframes fadeInUp{
    from {
        opacity:0;
        transform:translateY(30px)
    }
    to {
        opacity:1;
        transform:translateY(0px);
    }
}
@keyframes fadeInUp{
    from {
        opacity:0;
        transform:translateY(35px)
    }
    to {
        opacity:1;
        transform:translateY(0px);
    }
}
@-webkit-keyframes fadeInRight {
    from {
        opacity:0;
        transform:translateX(50px);
    }
    to {
        opacity:1;
        transform:translateX(0px);
    }
}
@media screen and (max-width:815px) {
    .head,.sub,.social-icons {
        text-align:center;
    }
    ul {
        justify-content: center;
    }
    .head {
        font-size:60px;
    }
    .sub {
        font-size:30px;
    }
    .social-icons .codepen {
        margin-left:15px;
    }
}
@media screen and (max-width:615px){
    .head {
        font-size:40px;
    }
    .sub {
        font-size:20px;
    }
}