body {
    margin: 0;
    font:normal 75% Arial, Helvetica, sans-serif;
}

h1, h2, h6  {
    color: #000;
    position:relative;
    z-index:1000;
}

h2, h4{
    display:inline;
}

canvas {
    display: block;
    vertical-align: bottom;
}

#stars {
    position: absolute; height:100%;
    width:100%;
    background-repeat: no-repeat;
    background-size: cover;
}

#particles-js {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
    width:100%;
    background-position: 50% 50%;
    z-index: 3;
}

#banner{
    padding-top:15%;
    z-index: 4;
}

#hobby{
    color: #ffffff;
}
@media (max-width: 767px) {
    h1 {
        font-size: 32px;
    }

    #social  {
        position: relative;
        bottom: -45%;
        text-align: center;
        font-size: 3em;
        overflow: hidden;
        z-index:1000;
    }

    #hint {
        position: relative;
        bottom: -55%;
        text-align: center;
        font-size: 3em;
        overflow: hidden;
    }
}

@media (min-width: 768px) {
    #social {
        position: relative;
        bottom: -20%;
        text-align: center;
        font-size: 3em;
        overflow: hidden;
        z-index:1000;
    }

    #hint {
        position: relative;
        bottom: -30%;
        text-align: center;
        font-size: 3em;
        overflow: hidden;
    }
}



#social a{
    padding: 1%;
}