* {
    font-family: 'Chakra Petch', 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
}

body {
    background-color: #12121D;
    color: #cbc9bc;;
    letter-spacing: 4px;
    padding-bottom: 140px;
}

header {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#191825+0,191825+99,1f1c3f+100 */
    background: #191825; /* Old browsers */
    background: -moz-linear-gradient(top,  #191825 0%, #191825 99%, #1f1c3f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #191825 0%,#191825 99%,#1f1c3f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #191825 0%,#191825 96%,#1f1c3f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191825', endColorstr='#1f1c3f',GradientType=0 ); /* IE6-9 */
    -webkit-box-shadow: 0px 33px 31px -15px rgba(11,11,16,0.84);
    -moz-box-shadow: 0px 33px 31px -15px rgba(11,11,16,0.84);
    box-shadow: 0px 33px 31px -15px rgba(11,11,16,0.84);
    
    position: fixed;
    width: 100%;
    padding: 6px 0px 6px 6%;
    margin: 0px 0px 20px 0px;
    z-index: 999;
}

.content {
    padding-top: 90px;
    max-width: 1000px;
    margin: 0 auto;
}

/* LOGO */
.logo {
    margin-top: 6px;
    letter-spacing: 9px;
    font-weight: 900;
}
.subline {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1.8;
    color: #5b6481;
    margin-left: 14px;
    line-height: 20px;
}

/* NAV */
.nav {
    line-height: 47px;
    margin-left: 36px;
}

.nav a {
    margin-right: 40px;
    color: #5b6481;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Roboto', 'Open-Sans', sans-serif;
    letter-spacing: 0.8px;
}

.nav i {
    font-size: 20px;
    padding-right: 8px;
}

.nav .selected {
    color: #c8dc9c;
}
.nav .selected i {
    color: #3886c2;
}

.nav a:hover, .nav a:hover i {
    color: white;
}

/* TEXT */

h1 {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #C0BEB2;
}

h4 {
    color: #5b6481;
    letter-spacing: 3px;
    margin-left: auto;
    margin: 10px 0px 0px auto;
    font-size: 17px;
}

a {
    text-decoration: none;
    color: #20b8ea;
}

p {
    font-family: 'Roboto', sans-serif;
    letter-spacing: 1px;
}

/* Elements */
.card {
    background-color: #181C2D;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0px;
}

/* SVG */
svg {
/*    position: fixed;*/
    position: absolute;
    right: 0;
    top: 0;
    float: left;
    z-index: -1;
    height: 1108px;
    width: 100%;
}

#svg_2 {
    width: 100%;
    height: 1200px;
    z-index: -2;
}

#last_update {
    opacity: 0.6;
}

.color_pos {
    color: #4af77b;
}
.color_neg {
    color: #c95b7d !important;
}

@media only screen and (max-width: 860px) {
    .nav {
        display: none;
    }
}