body.developersBody {
    background-color: var(--backgroundColor);
    color: var(--textColor);
}

body.developersBody:before {
    display: none;
}

body.developersBody h1,
body.developersBody h2 {
    color: var(--accentColor);
}

body.developersBody header a {
    color: var(--accentColor);
}

body.developersBody .purpleButton {
    background-color: var(--textColor);
    color: var(--backgroundColor);
}

body.developersBody .purpleButton:after {
    border-top: 2px solid var(--backgroundColor);
    border-right: 2px solid var(--backgroundColor);
}

body.developersBody .purpleButton:hover {
    background-color: var(--buttonDarkColor);
}

body.developersBody .whiteButton {
    color: var(--textColor);
}

body.developersBody .whiteButton:after {
    border-top: 2px solid var(--textColor);
    border-right: 2px solid var(--textColor);
}

body.developersBody .whiteButton:hover {
    background-color: #0d2f52;
}


.developersSection {
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    padding-left: 36px;
    padding-right: 36px;
}

.developersSection:last-child {
    margin-bottom: 40px;
}

.developersSection > div {
    flex: 1;
}

.developersSection ul {
    margin-top: 40px;
}

body.developersBody .mainContentSection li {
    max-width: 50%;
    color: var(--accentColor);
}

body.developersBody .mainContentSection h3:before {
    background-color: var(--textColor);
}

.codeSection {
    margin-left: var(--gutterWidth);
    width: 100%;
}

@media (max-width: 600px) {
    .codeSection {
        margin-left: 0;
        margin-top: 40px;
    }
}

.codeEditor {
    background-color: var(--codeEditorBackgroundColor);
    display: flex;
    flex-direction: row;
    padding: 10px;
    line-height: 1.3em;
    color: var(--accentColor);
    position: relative;
}

.codeEditor pre,
.codeTerminal pre {
    font: var(--codeFont);
    letter-spacing: var(--codeLetterSpacing);
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.codeEditorLine {
    padding-left: 30px;
    position: relative;
}

.codeEditorContent {
    flex: 1;
    position: absolute;
    top: 10px;
    left: 40px;
    right: 10px;
    bottom: 10px;
    overflow-x: hidden;
}

.keyword {
    color: var(--textColor);
}

.operator {
    color: var(--codeOperatorColor);
}

.string {
    color: var(--codeStringColor);
}

.lineNumber {
    position: absolute;
    color: var(--codeTextColor);
    top: 1px;
    left: 0;
    text-align: right;
    display: inline-block;
    width: 25px;
}

.number {
    color: var(--codeNumberColor);
}

.comment {
    color: var(--codeCommentColor);
}


.codeTerminal {
    background-color: var(--codeTerminalBackgroundColor);
    padding: 10px;
    line-height: 1.3em;
    color: var(--accentColor);
    height: 100%;
}

.symbol {
    color: var(--codeTerminalSymbolColor);   
}

.date {
    color: var(--codeTerminalDateColor);
}

.response {
    color: var(--textColor);   
}

@media screen and (max-width: 600px) {
    .developersSection {
        flex-direction: column;
        margin-bottom: 40px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .developersSection > div {
        width: 100%;
    }

    .developersSection ul {
        margin-top: 0;
    }

    body.developersBody .mainContentSection li {
      max-width:100%;
    }

    .codeTerminal {
        margin-top: 40px;
    }

    .codeEditor,
    .codeTerminal {
        overflow-x: scroll;
    }

    .codeEditorContent {
        overflow-x: scroll;
    }
}