a {
    background-color: transparent;
}

select,
a,
blockquote,
body,
code,
div,
form,
h1,
h2,
h3,
html,
input,
li,
ol,
p,
pre,
table,
td,
textarea,
th,
tr,
ul {
    box-sizing: border-box;
}

.outline:focus,
.outline:hover {
    outline: 1px solid #000;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.15;
    margin: 0;
}

button,
select {
    text-transform: none;
}

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

textarea {
    overflow: auto;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

a,
a:link,
a:visited {
    color: #ec0000;
}

hr {
    border: 0;
    margin-top: 2rem;
}

hr,
h1,
h2 {
    margin-top: 3rem;
}

th,
td {
    text-align: left;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
}

tr:nth-child(even) {
    background-color: #f0f0f0;
}

li {
    padding: .125rem 0;
}

pre {
    font-size: .875rem;
    background-color: #111111;
    color: #aaaaaa;
    padding: 10px;
    tab-size: 8;
    overflow-x: auto;
}

.clean {
    font-size: 15px;
    line-height: 1.2;
    background-color: #ffffff;
    color: #000000;
    padding: 0px;
    tab-size: 8;
    overflow-x: auto;
}

.td-right {
    text-align: right;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
}

.site-title {
    color: #ec0000;
    text-decoration: none;
    font-weight: bold;
}

.site-title:hover {
    text-decoration: underline;
}

.f1 {
    font-size: 3rem;
}

.f2 {
    font-size: 2.25rem;
}

.f3 {
    font-size: 1.5rem;
}

.f4 {
    font-size: 1.25rem;
}

.f5 {
    font-size: 1rem;
}

.f6 {
    font-size: .875rem;
}

.f7 {
    font-size: .75rem;
}

.b {
    font-weight: bold;
}

.b--black {
    border-color: #000;
}

.b--yell {
    border-color: #ffc439;
}

.ba {
    border-width: 1px;
    border-style: solid;
}

.bg-white {
    background-color: #fff;
}

.bg-yell {
    background-color: #ffc439;
}

.bg-red {
    background-color: #e30012;
}

.black,
.black:link,
.black:visited,
hover-black:hover {
    color: #000;
}

.br-100 {
    border-radius: 100%;
}

.center {
    margin-right: auto;
    margin-left: auto;
}

.cf {
    *zoom: 1;
}

.cf:after {
    clear: both;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.code,
pre,
code {
    font-family: Consolas, monaco, monospace;
}

.db {
    display: block;
}

.dib {
    display: inline-block;
}

.fl {
    float: left;
    _display: inline;
}

.gray {
    color: #777;
}

.h25rem {
    height: 2.5rem;
}

.h70rem {
    height: 7rem;
}

.lh-copy {
    line-height: 1.5;
}

.lh-title,
h1,
h2 {
    line-height: 1.25;
}

.link {
    text-decoration: none;
}

.link:focus,
.outline:focus {
    outline: 1px solid #333;
}

.mb2 {
    margin-bottom: .5rem;
}

.mb4 {
    margin-bottom: 2rem;
}

.mr2 {
    margin-right: 1rem;
}

.mt2 {
    margin-top: 1rem;
}

.mt4 {
    margin-top: 2rem;
}

.mw-100 {
    max-width: 100%;
}

.mw5 {
    max-width: 16rem;
}

.mw6 {
    max-width: 32rem;
}

.mw7 {
    max-width: 48rem;
}

.mw8 {
    max-width: 53rem;
}

.mw9 {
    max-width: 64rem;
}

.ni {
    text-indent: -.5rem;
}

.pa2 {
    padding: .5rem;
}

.pa3 {
    padding: 1rem;
}

.ph3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.pl2 {
    padding-left: .5rem;
}

.pr2 {
    padding-right: .5rem;
}

.pv1 {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.pv2 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.sans-serif {
    font-family: sans-serif;
}

.tr {
    text-align: right;
}

.tracked-tight {
    letter-spacing: -.05em;
}

.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.w3 {
    width: 3rem;
}

.w4 {
    width: 8rem;
}

.w5 {
    width: 16rem;
}

.white,
.white:link,
.white:visited {
    color: #fff;
}

@media screen and (min-width: 30em) {
    .f1-ns {
        font-size: 3rem;
    }

    .f2-ns {
        font-size: 2.25rem;
    }

    .f3-ns {
        font-size: 1.5rem;
    }

    .f4-ns,
    h1 {
        font-size: 1.25rem;
    }

    .f5-ns,
    h2 {
        font-size: 1rem;
    }

    .f6-ns {
        font-size: .875rem;
    }

    .f7-ns {
        font-size: .75rem;
    }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
    .pl2-m {
        padding-left: .5rem;
    }

    .pr2-m {
        padding-right: .5rem;
    }

    .w-50-m {
        width: 50%;
    }

    .w-100-m {
        width: 100%;
    }

    .f1-m {
        font-size: 3rem;
    }

    .f2-m {
        font-size: 2.25rem;
    }

    .f3-m,
    h1 {
        font-size: 1.5rem;
    }

    .f4-m,
    h2 {
        font-size: 1.25rem;
    }

    .f5-m {
        font-size: 1rem;
    }

    .f6-m {
        font-size: .875rem;
    }

    .f7-m {
        font-size: .75rem;
    }
}

@media screen and (min-width: 60em) {
    .pl2-l {
        padding-left: .5rem;
    }

    .pr2-l {
        padding-right: .5rem;
    }

    .w-50-l {
        width: 50%;
    }

    .w-100-l {
        width: 100%;
    }

    .f1-l {
        font-size: 3rem;
    }

    .f2-l,
    h1 {
        font-size: 2.25rem;
    }

    .f3-l,
    h2 {
        font-size: 1.5rem;
    }

    .f4-l {
        font-size: 1.25rem;
    }

    .f5-l {
        font-size: 1rem;
    }

    .f6-l {
        font-size: .875rem;
    }

    .f7-l {
        font-size: .75rem;
    }
}

/* Mobile responsiveness - Add padding on smaller screens */
@media screen and (max-width: 30em) {
    body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (prefers-color-scheme: dark) {

    a,
    a:link,
    a:visited {
        color: #14a2bd;
    }

    .site-title {
        color: #14a2bd;
    }

    body,
    html {
        background-color: #111111;
        color: #888888;
    }

    pre {
        background-color: #111111;
        color: #aaaaaa;
    }

    .clean {
        background-color: #111111;
        color: #aaaaaa;
    }

    tr:nth-child(even) {
        background-color: #1a1a1a;
    }
}