/*=============================================================================
 * Basic Info
 *=============================================================================*/

:root {
    /* Measurements */
    --page-width: 870px;
    --content-width: 650px;
    --sidebar-width: calc(var(--page-width) - var(--content-width));
    --gutter: 10px;

    /* Colors */
    --dark-gray: #373736;
    --light-orange: #f5821f;
    --dark-orange: #ed1c24;
    --light-gray:  #efefef;
    --highlight-color: #fff;
    --content-color: #f9f9f9;
    --content-border-color: #ddd;
    --sidebar-color: var(--light-gray);

    /* Decorations */
    --content-item-border: 1px solid var(--content-border-color);

    /* Fonts */
    --sans-serif: Arial, Helvetica, sans-serif;
    --serif: Georgia, "Times New Roman", serif;
    --content-font: var(--serif);
}

/*=============================================================================
 * Default HTML tag styles
 *=============================================================================*/

* {
    box-sizing: border-box;
}

html {
    background: var(--dark-gray);
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
}

/* Links */
a, a:active {
    color: rgb(15, 117, 202);
}

/* Line Separator */
hr {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    border: 0;
    height: 3px;
    background-color: var(--light-orange);
    background-image: linear-gradient(to right, var(--light-orange), var(--dark-orange));
    margin: 0;
}

/* Quotes */
blockquote {
    font-size: 120%;
    color: #000;
    background-color: #fff;
    padding: 1em;
    margin-bottom: 1em;
    border-left: 5px solid #f5821f;
}

/* Images */
p + img {
    border: var(--content-item-border);
    max-width: 100%;
}

/* Inline Code*/
code, tt, kbd {
    font-family: Consolas, "Lucida Console", Monospace;
}

code {
    background: #efefef;
    border: var(--content-item-border);
}

/* Code Blocks */
pre {
    background: #333;
    border: var(--content-item-border);
    color: #f8f8f2;
    overflow: auto;
    overflow-y: hidden;
    padding: 1em 1.5em;
}

pre code .k,
pre code .kd {
    color: #66d9ef;
}

pre code .c1 {
    color: #aaa;
}

pre code .s2 {
    color: #e6db74;
}

pre code {
    background: inherit;
    border: none;
    line-height: 120%;
}

table {
    border: var(--content-item-border);
    border-collapse: collapse;
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

thead {
    background: var(--content-border-color);
}

th, td {
    padding: var(--gutter);
    text-align: left;
    white-space: nowrap;
}

tbody tr:nth-child(odd) {
    background: var(--highlight-color);
}

/*=============================================================================
 * Fonts
 *============================================================================*/

.content-font {
    font-family: var(--content-font);
    line-height: 1.3;
}

.smaller-font {
    font-size: 80%;
}

.bigger-font {
    font-size: 116%;
}

.all-caps {
    text-transform: uppercase;
}

.no-underline {
    text-decoration: none;
}

.bold {
    font-weight: bold;
}

/*=============================================================================
 * Dimensions
 *=============================================================================*/

/* Width of the whole page */
.page-width {
     max-width: var(--page-width);
}
 
.content-width {
    max-width: var(--content-width);
}

.sidebar-width {
    max-width: var(--sidebar-width);
}

/*=============================================================================
 * Alignments
 *=============================================================================*/

/* Remove margins */
.no-margin {
    margin: 0;
}

.no-margin-bottom {
    margin-bottom: 0;
}

.margin-top {
    margin-top: var(--gutter);
}

.margin-bottom {
    margin-bottom: var(--gutter);
}

/* Apply standard padding to block */
.gutters {
    padding: var(--gutter);
}

.gutter-top {
    padding-top: var(--gutter);
}

.gutter-bottom {
    padding-bottom: var(--gutter);
}

/* Allow horizontal scrolling when content doesn't fit */
.overflow-x-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Allow horizontal scrolling when content doesn't fit only on mobile */
.overflow-x-scroll-on-mobile {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    justify-content: left;
    text-align: left;
}

@media only screen and (min-width:414px) {
    .overflow-x-scroll-on-mobile {
        overflow-x: hidden;
        justify-content: unset;
        text-align: unset;
    }
}

/*=============================================================================
 * Hiding
 *=============================================================================*/

/* Elements that are removed on small screens */
.hide-on-small-screens {
    display: none;
}

@media only screen and (min-width:890px) {
    .hide-on-small-screens {
        display: initial;
    }
}

/* Elements that are removed on mobile */
.hide-on-mobile {
    display: none;
}

@media only screen and (min-width:414px) {
    .hide-on-mobile {
        display: initial;
    }
}

/* Accessibly Hide Offscreen */
.hide-offscreen {
    clip: rect(1px 1px 1px 1px); /* IE 6/7 */
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/*=============================================================================
 * Centering
 *=============================================================================*/

/* Center a block in an area */
.center {
    margin: 0 auto;
}

/* Center an element's children */
.center-text {
    text-align: center;
    justify-content: center;
}

/* Center an element's children on mobile */
.center-text-on-small-screens {
    /* noop */
}

@media only screen and (min-width:414px) {
    .center-text-on-small-screens {
        text-align: center;
        justify-content: center;
    }
}

/*=============================================================================
 * Colors
 *=============================================================================*/

/* Background for text */
.content-background {
    background: var(--content-color);
}

/* Background for sidebar */
.sidebar-background {
    background: var(--sidebar-color);
}

/* Background for highlighted areas */
.highlight-background {
    background: var(--highlight-color);
}

.dark-text {
    color: #000;
}

/* Invert foreground colors */
.inverted-colors {
    color: #fff;
}

/*=============================================================================
 * Borders
 *=============================================================================*/

/* Add borders to top */
.dark-border-top {
    border-top: 1px solid var(--dark-gray);
}

/* Add borders to top */
.dark-border-bottom {
    border-bottom: 1px solid var(--dark-gray);
}

/* Add borders to top */
.content-border-bottom {
    border-bottom: var(--content-item-border);
}

/*=============================================================================
 * Components
 *=============================================================================*/

/* List with items inline */
.inline-list {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

.inline-list li {
    display: inline-block;
}

/* List with images inline */
.inline-image-list {
    flex-wrap: wrap;
    line-height: 0;
}

/* Inline list with spacing in between items */
.inline-spaced-list li {
    margin-right: calc(var(--gutter) * 3);
}

.inline-spaced-list li:last-of-type {
    margin-right: 0;
}

/* Left-right block that collapses to centered */
.collapsible-corners {
    display: block;
}

@media only screen and (min-width:660px) {

    .collapsible-corners {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

}

/* Page grid */
.page-grid {
    display: block;
}

@media only screen and (min-width:660px) {
    .page-grid {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}

/* Grid with only columns of equal width in desktop mode */
.grid-columns {
    display: block;
}

@media only screen and (min-width:660px) {
    .grid-columns {
        display: grid;
        /*TODO: Figure out unlimited columns*/
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: var(--gutter);
    }
}

/*=============================================================================
 * Specific elements
 *=============================================================================*/

/* Carbon Ads */
#carbonads {
    display: block;
    overflow: hidden;
    margin: 10px 0;
    padding: 1em;
    background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(220, 23%, 97%, .8);
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

#carbonads a {
    color: inherit;
    text-decoration: none;
}

#carbonads a:hover {
    color: inherit;
}

#carbonads span {
    display: block;
    overflow: hidden;
}

.carbon-img {
    display: block;
    margin: 0 auto 8px;
    line-height: 1;
}

.carbon-text {
    display: block;
    margin-bottom: 8px;
}

.carbon-poweredby {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    line-height: 1;
}