:root {
    color-scheme: dark;
}

.tomorrow-comment,
pre .comment,
pre .title {
    color: #dddddd91;
}

.tomorrow-red,
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
    color: #f2777a
}

.tomorrow-orange,
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
    color: #e8606d;
    font-weight: bold;
}

.tomorrow-yellow,
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
    color: #fc6
}

.tomorrow-green,
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
    color: #a97bf8;
}

.tomorrow-aqua,
pre .css .hexcolor {
    color: #6cc
}

.tomorrow-blue,
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
    color: #69c
}

.tomorrow-purple,
pre .keyword,
pre .javascript .function {
    color: #be7575;
}

pre code {
    display: block;
    background: #2d2d2d;
    color: #ccc;
    padding: .5em
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
    opacity: .5
}

pre {
    background-color: #333;
    padding: 5px;
    color: #ddd;
    border-radius: 0px 0px 3px 3px;
    margin-top: 16px;
}

pre .title {
    color: inherit;
}

button {
    background: #2d2d2d;
    transition: .4s;
}

button:hover {
    background: #333;
}

* {
    box-sizing: border-box;
}

/* Nav Bar Start */
nav {
    margin: 0;
    margin-left: -3em;
}

nav span ul li {
    display: inline;
    list-style: none;
    font-size: 20px;
    margin-right: 10px;
}

nav span ul li a {
    color: #afafaf;
    text-decoration: initial;
    font-family: 'Roboto', monospace;
    font-size: 15px;
    text-align: left;
    transition: .4s;
}

nav span ul li a:hover {
    color: white;
}

/* Nav Bar End */

article {
    margin-left: -10em;
}

.site-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -81em;
    outline: none;
}

.email-form__input {
    padding: 1em;
    border: none;
    outline: none;
    border-radius: 3px;
    background: #333;
    color: white;
    opacity: 0.8;
}

.email-form__button {
    padding: 1em;
    border: none;
    background: #2d2d2d;
    color: white;
    opacity: 0.8;
    border-radius: 3px;
    cursor: pointer;
}

/* Footer start */
/* STYLES SPECIFIC TO FOOTER        */
.footer {
    width: 100%;
    position: relative;
    height: auto;
    font-family: 'Roboto', monospace;
    text-align: left;
    margin-left: 15em;
    overflow-x: hidden;
}

.footer a {
    color: #999999;
    font-size: 14px;
    font-family: inherit;
    font-weight: bold;
    padding: 5px 0px 5px 0px;
    cursor: pointer;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    text-decoration: none;
}

.footer a:hover {
    color: #ffffff;
    transition: .1s;
    -webkit-transition: .1s;
    -moz-transition: .1s;
}

.footer .col {
    width: 190px;
    height: auto;
    float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0px 20px 20px 20px;
}

.footer .col h1 {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    line-height: 17px;
    padding: 20px 0px 5px 0px;
    color: white;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.250em;
}

.footer .col ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.footer .col ul li {
    padding: 5px 0px 5px 0px;
}

.social ul li {
    display: inline-block;
    padding-right: 5px !important;
}

.clearfix {
    clear: both;
}

@media only screen and (min-width: 1280px) {
    .contain {
        width: 1200px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1139px) {
    .contain .social {
        width: 1000px;
        display: block;
    }

    .social h1 {
        margin: 0px;
    }
}

@media only screen and (max-width: 950px) {
    .footer .col {
        width: 33%;
    }

    .footer .col h1 {
        font-size: 14px;
    }

    .footer .col ul li {
        font-size: 13px;
    }
}

@media only screen and (max-width: 500px) {
    .footer .col {
        width: 50%;
    }

    .footer .col h1 {
        font-size: 14px;
    }

    .footer .col ul li {
        font-size: 13px;
    }
}

@media only screen and (max-width: 340px) {
    .footer .col {
        width: 100%;
    }
}

/* Footer end */