/********
 * Page *
 ********/

body {
    background-color: #b8c8c8;
    color: #000000;
    display: flex;
    flex-direction: column;
    font-family: 'Proza Libre', sans-serif;
    font-size: 1em;
    margin: 0 1em;
    min-height: 100vh;
    padding: 0;
}

@media (min-width: 768px) {
    body {
        margin: 0 3em;
    }
}

@media (min-width: 1200px) {
    body {
        margin: 0 auto;
        width: 1000px;
    }
}

html {
    margin: 0;
    padding: 0;
}

/********
 * Text *
 ********/

a,
a:link {
    color: #000000;
    text-decoration: underline;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
}

a[target='_blank']:after {
    content: ' \f08e';  /* external-link */
    font-family: 'Font Awesome', sans-serif;
}

a[href^='mailto:']:after {
    content: ' \f003';  /* envolope-o */
    font-family: 'Font Awesome', sans-serif;
}

a[href^='mailto:']:hover:after,
a[href^='mailto:']:focus:after,
a[href^='mailto:']:active:after {
    content: ' \f0e0';  /* envolope */
}

blockquote {
    font-style: italic;
    margin: 1em 0;
    text-align: left;
}

@media (min-width: 768px) {
    blockquote {
        margin-left: 3em;
        margin-right: 3em;
        text-align: justify;
    }
}

blockquote:before {
    color: #b8c8c8;
    content: '\f10d\ ';
    font-family: 'Font Awesome', sans-serif;
    font-size: 2em;
    line-height: 1em;
}

cite {
    font-style: italic;
}

code {
    background-color: #b8c8c8;
    font-family: 'Source Code Pro', monospace;
}

em {
    font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Crimson', serif;
    font-variant: small-caps;
    font-weight: bold;
    margin: 1em 0 0.1em;
}

h1, h2, h3 {
    text-align: center;
}

h4, h5, h6 {
    text-align: left;
}

h1 {
    counter-reset: figure h2 h3 h4 table;
    font-size: 3em;
}

h1:first-of-type { /* Page Title */
    margin-top: 0;
}

h2 {
    counter-reset: h3;
    font-size: 2em;
}

h2:before {
    counter-increment: h2;
}

h3 {
    counter-reset: h4;
    font-size: 1.75em;
}

h3:before {
    counter-increment: h3;
}

h4 {
    font-size: 1.5em;
}

h4:before {
    counter-increment: h4;
}

h5 {
    font-size: 1.25em;
}

h6 {
    font-size: 1em;
}

hr {
    border: 2px solid #b8c8c8;
    border-bottom: none;
}

ol {
    list-style-type: decimal;
}

ol ol {
    list-style-type: lower-alpha;
}

ol ol ol {
    list-style-type: lower-roman;
}

p {
    margin: 0 0 0.5em;
    text-align: left;
}

@media (min-width: 768px) {
    p {
        text-align: justify;
    }
}

p + p {
    text-indent: 1em;
}

pre {
    background-color: #2b2b2b;
    border: 1px solid #000000;
    counter-reset: code-line;
    font-family: 'Source Code Pro', monospace;
    line-height: 0;
    margin: 1em 0;
    overflow: auto;
}

@media (min-width: 768px) {
    pre {
        margin-left: 3em;
        margin-right: 3em;
    }
}

pre code {
    background-color: transparent;
    color: #ffffff;
    display: inline-block;
    line-height: normal;
    min-width: 100%;
    overflow-x: visible !important;
    padding: 0 !important;
    word-wrap: normal;
}

pre code:before {
    border-right: 1px solid #bababa;
    content: counter(code-line);
    counter-increment: code-line;
    display: inline-block;
    margin-right: 0.5em;
    min-width: 2.5em;
    padding: 0 0.25em;
    text-align: right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

s {
    text-decoration: line-through;
}

small {
    font-size: 0.75em;
}

strong {
    font-weight: bold;
}

ul {
    list-style-type: circle;
}

ul ul {
    list-style-type: disc;
}

ul ul ul {
    list-style-type: square;
}

/*********
 * Image *
 *********/

figure {
    text-align: center;
    margin: 1em 0;
}

@media (min-width: 768px) {
    figure {
        margin-left: 3em;
        margin-right: 3em;
    }
}

figure figcaption {
    font-style: italic;
}

figure figcaption:before {
    counter-increment: figure;
}

img {
    border: none;
    max-height: 100%;
    max-width: 100%;
}

/********
 * Form *
 ********/

form {
    margin: 1em 0;
    padding: 0;
}

fieldset {
    border: 2px solid #5c6464;
    margin: 1em 0 0;
    padding: 0.5em;
}

fieldset legend {
    color: #5c6464;
}

input,
select,
textarea {
    -webkit-appearance: none;
    background: #ffffff;
    border: 2px solid #b8c8c8;
    border-radius: 0;
    box-shadow: none !important;
    box-sizing: border-box;
    color: #000000;
    font-size: 0.9em;
    padding: 0.2em;
    width: 100%;
}

input[type=reset],
input[type=submit] {
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 2em;
}

input[type=reset]:hover,
input[type=submit]:hover {
    background-color: #b8c8c8;
    border-color: #5c6464;
}

input[type=submit] {
    margin-left: calc(25% - 2px);
    margin-right: calc(25% - 2px);
    width: 50%;
}

input[type=reset],
input[type=reset] + input[type=submit] {
    margin-left: calc(5% - 2px);
    margin-right: calc(5% - 2px);
    width: 40%;
}

form label {
    cursor: pointer;
    display: block;
    font-weight: bold;
    margin-top: 1em;
}

form fieldset label:first-of-type {
    margin-top: 0;
}

form input[type=checkbox],
form input[type=radio] {
    display: none;
}

form input[type=checkbox] + label,
form input[type=radio] + label {
    margin-top: 0.25em;
}

form input[type=checkbox] + label:before,
form input[type=radio] + label:before {
    color: #5c6464;
    font-family: 'Font Awesome', sans-serif;
    padding-right: 0.5em;
}

form input[type=checkbox] + label:before {
    content: '\f096';
}

form input[type=checkbox]:checked + label:before {
    content: '\f046';
}

form input[type=radio] + label:before {
    content: '\f10c';
}

form input[type=radio]:checked + label:before {
    content: '\f192';
}

textarea {
    min-height: 15em;
}

::-webkit-input-placeholder {
    color: #5c6464;
}

:-moz-placeholder {
    color: #5c6464;
    opacity: 1;
}

::-moz-placeholder {
    color: #5c6464;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #5c6464;
}

@media (min-width: 768px) {
    form {
        margin-left: 3em;
        margin-right: 3em;
    }
}

/*********
 * Table *
 *********/

table {
    border-collapse: collapse;
    margin: 1em auto;
    max-width: 100%;
}

table caption {
    font-style: italic;
}

table caption:before {
    counter-increment: table;
}

td, th {
    padding: 0.5em;
    text-align: center;
    vertical-align: top;
}

tfoot {
    border-top: 1px solid #000000;
}

th {
    font-weight: bold;
}

thead {
    border-bottom: 1px solid #000000;
}

tbody tr:nth-child(odd) {
    background-color: #b8c8c8;
}

/****************
 * Main Wrapper *
 ****************/

#main-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0.5em 0;
}

@media (min-width: 1200px) {
    #main-wrapper {
        flex-direction: row;
    }
}

/***********
 * Sidebar *
 ***********/

aside {
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
}

aside label {
    cursor: pointer;
}

@media (min-width: 1200px) {
    aside {
        flex-direction: column;
        margin-bottom: 0;
        margin-right: 0.5em;
        width: 200px;
    }
}

/********
 * Logo *
 ********/

#logo {
    width: 75px;
}

@media (min-width: 768px) {
    #logo {
        width: 100px;
    }
}

@media (min-width: 1200px) {
    #logo {
        width: 200px;
    }
}

/**********************
 * Navigation Trigger *
 **********************/

#nav-trigger {
    align-items: center;
    display: flex;
    flex: 1;
    font-size: 1.15em;
    font-weight: bold;
    justify-content: flex-end;
    overflow: hidden;
    padding-right: 0.5em;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}

#nav-trigger span:after {
    content: ' \f0c9';
    font-family: 'Font Awesome', sans-serif;
}

#nav-trigger-checkbox {
    display: none;
}

@media (min-width: 1200px) {
    #nav-trigger {
        display: none;
    }
}

/**************
 * Navigation *
 **************/

nav {
    display: none;
    flex: 0 1 100%;
}

input#nav-trigger-checkbox[type=checkbox]:checked ~ nav {
    display: block;
}

nav > ul a,
nav > ul label {
    display: block;
    font-weight: bold;
    padding: 0.5em;
    text-decoration: none !important;
}

nav > ul > li > ul > li > a,
nav > ul > li > ul > li > label {
    font-weight: 600;
}

nav a:hover,
nav label:hover {
    color: #5c6464;
}

nav ul {
    list-style: none inside none;
    margin: 0;
    padding: 0;
}

nav > ul > li > ul {
    display: none;
    margin-left: 1.5em;
}

input.submenu-trigger-checkbox[type=checkbox]:checked ~ ul {
    display: block;
}

nav > ul > li > label > span:after {
    content: ' \f054';
    font-family: 'Font Awesome', sans-serif;
    font-size: 0.75em;
    font-style: normal !important;
}

input.submenu-trigger-checkbox[type=checkbox]:checked ~ label > span:after {
    content: ' \f078';
}

.submenu-trigger-checkbox {
    display: none;
}

nav form {
    display: flex;
    margin: 0;
    width: 100%;
}

#nav-search-box {
    display: block;
    flex: 1;
    margin: 0.5em 0 0.5em 0.5em;
    min-width: 1px;
}

#nav-search-submit {
    background-color: #b8c8c8;
    border: none;
    font-family: 'Font Awesome', sans-serif;
    margin: 0.5em 0.5em 0.5em 0;
    padding: 0.2em 0.3em;
    width: auto;
}

nav #social-links {
    margin-top: 1em;
}

nav #social-links ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

nav #social-links li {
    margin: 0 0.5em;
}

nav #social-links a {
    text-decoration: none;
}

nav #social-links a:after {
    font-family: 'Font Awesome', sans-serif;
    font-size: 1.75em;
}

nav #social-links .github:after {
    content: '\f09b';
}

nav #social-links .linkedin:after {
    content: '\f0e1';
}

nav #social-links .twitter:after {
    content: '\f099';
}

nav #social-links .xing:after {
    content: '\f168';
}

@media (min-width: 768px) and (max-width: 1199px) {
    nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    input#nav-trigger-checkbox[type=checkbox]:checked ~ nav {
        display: flex;
    }

    nav form {
        display: none;
        order: 1;
        width: 61.8%;
    }

    input#nav-trigger-checkbox[type=checkbox]:checked ~ nav form {
        display: flex;
    }

    nav > ul {
        display: flex;
        flex: 0 1 100%;
        flex-direction: row;
        justify-content: center;
        order: 3;
    }

    nav > ul > li {
        margin: 0 1em;
        width: 100%;
    }

    nav > ul > li > ul {
        margin-left: 0;
        width: 100%;
    }

    input.submenu-trigger-checkbox[type=checkbox]:checked ~ label {
        border-bottom: 2px solid #b8c8c8;
    }

    nav > ul a,
    nav > ul label {
        text-align: center;
    }

    nav #social-links {
        align-items: center;
        display: none;
        justify-content: flex-end;
        margin: 0;
        order: 2;
    }

    input#nav-trigger-checkbox[type=checkbox]:checked ~ nav #social-links {
        display: flex;
    }

    nav #social-links ul {
        justify-content: flex-end;
    }
}

@media (min-width: 1200px) {
    nav {
        display: block;
        flex: 1;
    }
}

/***********
 * Content *
 ***********/

main {
    background-color: #ffffff;
    flex: 1;
    overflow: hidden;
    padding: 0.5em 1em;
    word-wrap: break-word;
}

/**********
 * Footer *
 **********/

footer {
    background-color: #ffffff;
    font-size: 0.75em;
    margin-bottom: 0.5em;
    padding: 0.5em 1em;
    text-align: center;
}