/* Style Settings */
@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
@font-face {
    font-family: 'Norwester';
    src: url('../fonts/norwester.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
:root {
    --bgColor:#1C1C1C;
    --accentColor:#E6E6E6;
    --font:'Karla', sans-serif;
}

body{
    background-color:var(--bgColor);
}

/* cover banner */
.cover{
    width:100%;
    height:220px;
    background:
        linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
        url("../images/cover.png");
    background-size:cover;
    background-position:center;
}

/* foto profil */
#userPhoto{
    width:110px;
    height:110px;
    display:block;
    margin:-100px auto 20px;
    border-radius:15%;
    border:3px solid #ffffff;
}

/* username */
#userName{
    color:#bbb;
    font-size:1rem;
    font-weight:600;
    line-height:1.25;
    display:block;
    font-family:var(--font);
    width:100%;
    text-align:center;
    text-decoration:none;
}

/* link container */
#links{
    max-width:675px;
    margin:27px auto;
}

/* tombol link */
.link{
    display:block;
    background-color:#2f2f2f;
    color:white;
    font-family:var(--font);
    text-align:center;
    margin-bottom:15px;
    padding:16px;
    text-decoration:none;
    font-size:1rem;
    border-radius:12px;
    border:1px solid #3a3a3a;
    transition:all .2s ease;
}

.link:hover{
    background-color:#3a3a3a;
}

/* text */
h1,h5,h6{
    text-align:center;
    font-family:var(--font);
}

h1{
    color:#E6E6E6;
    font-family:'Norwester', sans-serif;
    letter-spacing:3px;
    text-transform:uppercase;
}
h5{color:#E6E6E6;font-style:italic;}
h6{color:#888;}

.atrib{
    text-align:center;
    display:block;
    font-size:12px;
    color:#888;
    font-family:var(--font);
    padding:17px;
}
.motto{
    text-align:center;
    color:#9a9a9a;
    font-family:var(--font);
    font-size:0.9rem;
    margin-top:-15px;
    margin-bottom:15px;
    opacity:0.9;
}