@font-face {
    font-family: 'lucioleregular';
    src: url('luciole-regular-webfont.woff2') format('woff2'),
         url('luciole-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'inconsolatamedium';
    src: url('inconsolata-webfont.woff2') format('woff2'),
         url('inconsolata-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'quicksandregular';
    src: url('quicksand-regular-webfont.woff2') format('woff2'),
         url('quicksand-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@media screen and (max-device-width: 640px) {
    html {
        height: 100%;
    }
    body {
        background-color: #ffffff;
        opacity: 1.0;
        background-image: radial-gradient(#252627 0.4px, #ffffff 0.4px);
        background-size: 8px 8px;
        margin: 0;
        height: 100%;
    }
    body::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-color: rgba(255,255,255,0.90);
    }
    .content-container {
        height: auto;
        min-height: 100%;
        width: 70%;
        max-width: 55em;
        margin: 0 auto;
        padding: 5px;
        position: relative;
    }
    h1 {
        color: #CC5A71;
        font: 5em "lucioleregular", sans-serif;
        margin-block: 0px;
        text-shadow: #52489C 2px 2px 0px, #FF9F1C 4px 4px 0px;
    }
    h1 > a {
        color: #CC5A71;
        font: 1em "lucioleregular", sans-serif;
        margin-block: 0px;
        text-shadow: #52489C 2px 2px 0px, #FF9F1C 4px 4px 0px;
        text-decoration: none;
    }
    h3 {
        color: #252627;
        font: 2em "lucioleregular", sans-serif;
        margin-block: 0px;
    }
    p {
        color: #252627;
        font: 2em "quicksandregular", sans-serif;
        font-weight: 750;
    }
    pre {
        font-size: 2em;
        font-family: "inconsolataregular", monospace;
        overflow-x: scroll;
        border: 2px solid #FF9F1C;
        outline: 2px solid #252627;
        padding: 5px 15px 0px 15px;
        white-space: pre;
    }
    .title-header {
        margin: 0px 0px 15px 0px;
    }
    .title-subheader {
        text-align: right;
        margin: 10px 0px 10px 0px;
    }
    .subheader-nav-box {
        border: solid #CC5A71;
        margin: 5px 0px 5px 0px;
        padding: 10px;
        box-shadow: #52489C 1px 1px 0px, #FF9F1C 2px 2px 0px;
    }
    .nav-list {
        text-align: right;
        margin: 0px;
        padding-bottom: 5px;
        margin-block: 0px;
    }
    .nav-item {
        display: inline-block;
        font: 2.5em "lucioleregular", sans-serif;
        color: #CC5A71;
        text-shadow: #52489C 1px 1px 0px, #FF9F1C 2px 2px 0px;
        margin-right: 0.25em;
    }
    .nav-item:last-child {
        margin-right: 0px;
    }
    .nav-item a {
        color: #CC5A71;
        text-decoration: none;
    }
    .nav-item a:hover {
        color: #FF9F1C;
    }
    .title-border {
        border: 1px solid #CC5A71;
        box-shadow: #52489C 1px 1px 0px, #FF9F1C 2px 2px 0px;
        margin: 0px;
        margin-block: none;
    }
}
@media screen and (min-device-width: 640px) {
    html {
        height: 100%;
    }
    body {
        background-color: #ffffff;
        opacity: 1.0;
        background-image: radial-gradient(#252627 0.4px, #ffffff 0.4px);
        background-size: 8px 8px;
        margin: 0;
        height: 100%;
    }
    body::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-color: rgba(255,255,255,0.90);
    }
    .content-container {
        height: auto;
        min-height: 100%;
        width: 70%;
        max-width: 55em;
        margin: 0 auto;
        padding: 5px;
        position: relative;
    }
    h1 {
        color: #CC5A71;
        font: 3em "lucioleregular", sans-serif;
        margin-block: 0px;
        text-shadow: #52489C 2px 2px 0px, #FF9F1C 4px 4px 0px;
    }
    h1 > a {
        color: #CC5A71;
        font: 1em "lucioleregular", sans-serif;
        margin-block: 0px;
        text-shadow: #52489C 2px 2px 0px, #FF9F1C 4px 4px 0px;
        text-decoration: none;
    }
    h3 {
        color: #252627;
        font: 2em "lucioleregular", sans-serif;
        margin-block: 0px;
    }
    p {
        color: #252627;
        font: 1em "quicksandregular", sans-serif;
        font-weight: 750;
    }
    pre {
        font-size: 1em;
        font-family: "inconsolataregular", monospace;
        overflow-x: scroll;
        border: 2px solid #FF9F1C;
        outline: 2px solid #252627;
        padding: 5px 15px 0px 15px;
    }
    .title-header {
        margin: 0px 0px 15px 0px;
    }
    .title-subheader {
        text-align: right;
        margin: 10px 0px 10px 0px;
    }
    .subheader-nav-box {
        border: solid #CC5A71;
        margin: 5px 0px 5px 0px;
        padding: 10px;
        box-shadow: #52489C 1px 1px 0px, #FF9F1C 2px 2px 0px;
    }
    .nav-list {
        text-align: right;
        margin: 0px;
        padding-bottom: 5px;
        margin-block: 0px;
    }
    .nav-item {
        display: inline-block;
        font: 2em "lucioleregular", sans-serif;
        color: #CC5A71;
        text-shadow: #52489C 1px 1px 0px, #FF9F1C 2px 2px 0px;
        margin-right: 0.25em;
    }
    .nav-item:last-child {
        margin-right: 0px;
    }
    .nav-item a {
        color: #CC5A71;
        text-decoration: none;
    }
    .nav-item a:hover {
        color: #FF9F1C;
    }
    .title-border {
        border: 1px solid #CC5A71;
        box-shadow: #52489C 1px 1px 0px, #FF9F1C 2px 2px 0px;
        margin: 0px;
        margin-block: none;
    }
}