body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

.main {
    background: url('background.jpg') no-repeat center fixed;
    background-size: cover;
    color: #333;
}

.navbar {
    width: 100%;
    height: 50px;
    padding: 20px;
}

.brand-container {
    display: inline-block;
    padding-bottom: 60px;
}

.brand {
    position: absolute;
    font-size: 28px;
    text-transform: uppercase;
    color: #333;
}

.dark {
    color: #222;
}

.logo {
    padding-left: 50px;
    display: inline-block;
    height: 50px;
}

.container-get-started {
    width: 70%;
    margin: 3% auto;
}

.container {
    width: 70%;
    margin: 8% auto;
}

.welcome {
    text-align: center;
}

.welcome > h2 {
    font-size: 46px;
}

.btn {
    min-width: 140px;
    width: auto;
    height: 20px;
    font-size: 18px;
    display: inline-block;
    cursor: pointer;
    background-color: white;
    color: #535353!important;
    padding: 10px;
    border-radius: 20px;
    margin: 10px;
}

.github {
    background-color: #444;
    color: white!important;
}

a:link {
    text-decoration: none;
    color: inherit;
}

a:visited {
    color: inherit;
}

.copyright {
    color: black;
    position: absolute;
    bottom: 0;
    left: 3%;
}

.item-list {
    list-style: none;
}

.item {
    font-size: 18px;
    margin: 20px 0;

    cursor: pointer;
}

.selected {
    font-weight: bold;
}

.content, .side {
    display: inline-block
}

.content {
    width: 80%;
    float: right;
}

pre {
    background-color: #222;
    padding: 10px 30px;
    border-radius: 10px;
    color: white;
}

.spaced {
    margin-top: 60px;
}

.color-1 {
    color: #A54242;
}

.color-2 {
    color: #8C9440;
}

.color-3 {
    color: #DE935F;
}

.color-4 {
    color: #5F819D;
}

.color-7 {
    color: #707880;
}

.color-11 {
    color: #F0C674
}

.color-13 {
    color: #B294BB
}