html {
    overflow-y: scroll;
    position: relative;
    min-height: 100%;
}
body {
    font-size: .875rem;
    font-family: 'Noto Sans', sans-serif Extrabold;
    margin-bottom: 7rem;
}

.content-width-limit {
    max-width: 800px;
}

.content-centered {
    margin-left: auto;
    margin-right: auto;
}

.side-to-side {
    margin-left: -15px;
    margin-right: -15px;
}

.site-menu {
    background-color: rgba(255, 255, 255, .85);
}

.site-menu a {
    color: #000000;
    transition: ease-in-out color .15s;
}
.site-menu a:hover {
    color: #17b500;
    text-decoration: none;
}

.menu-active {
    color: rgb(22, 109, 29);
    font-weight: bold;
}

.article-summary-title a {
    color: #000000;
    transition: ease-in-out color .15s;
}
.article-summary-title a:hover {
    color: #636363;
    text-decoration: none;
}


.btn-article {
    color: #ffffff;
    background-color: #17b500;
    border-color: #17b500;
}

.btn-article:hover {
    color: #343a40;
    background-color: #00ffff;
    border-color: #00ffff;
}

.btn-article:focus, .btn-article.focus {
    color: #343a40;
    background-color: #00ffff;
    border-color: #00ffff;
    box-shadow: 0 0 0 0.0rem rgba(0, 255, 255, 0.5);
}

.btn-article.disabled, .btn-article:disabled {
    color: #ffffff;
    background-color: #9c9c9c;
    border-color: #848484;
}

.btn-article:not(:disabled):not(.disabled):active, .btn-article:not(:disabled):not(.disabled).active,
.show > .btn-article.dropdown-toggle {
    color: #343a40;
    background-color: #00ffff;
    border-color: #00ffff;
}

.btn-article:not(:disabled):not(.disabled):active:focus, .btn-article:not(:disabled):not(.disabled).active:focus,
.show > .btn-article.dropdown-toggle:focus {
    color: #343a40;
    background-color: #00ffff;
    border-color: #00ffff;
    box-shadow: 0 0 0 0.0rem rgba(0, 255, 255, 0.5);
}


.site-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 7rem;
    color: #FFFFFF;
    background-color: rgb(0, 255, 255);
}


.article-image {
    max-width: 100%;
    height: auto;
}


.ide {
    color: #000000;
}

pre.ide {
    background: #e7f3f9;
}

.ide-keyword {
    color: rgb(0, 151, 156);
}

.ide-system-keyword {
    color: rgb(94, 109, 3);
}

.ide-platform-function {
    color: rgb(211, 84, 0);
}

.ide-platform-class {
    color: rgb(211, 84, 0);
    font-weight: bold;
}

.ide-string {
    color: rgb(0, 92, 95);
}

.ide-line-comment {
    color: rgb(102, 78, 83);
}

.ide-block-comment {
    color: rgb(145, 165, 166);
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.h1 {
    font-weight: 700;
    margin-bottom: 1rem;
}

.h2 {
    font-weight: 700;
    margin-top: 7rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid;
    border-bottom-color: #FFFFFF;
    margin-bottom: 1rem;
}

.h3 {
    font-weight: 700;
    margin-top: 7rem;
    font-style: italic;
    margin-bottom: 1rem;
}

.h4 {
    font-weight: 700;
    margin-top: 2rem;
    font-style: italic;
    margin-bottom: 1rem;
}

.sticky-title {
    position: -webkit-sticky;
    position: sticky;
    top: -2px;
    z-index: 1020;
    background: rgba(255, 255, 255, 0.9);
}
.sticky-title-stuck {
    border-bottom: 2px solid;
    border-bottom-color: #00FFFF;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    box-shadow: 0 4px 2px -2px gray;
}


.step-spacer {
    position: relative; !important;
}

.step-border, .step-spacer-reserve {
    border: 5px solid #00FFFF !important;
    padding: 0.5rem !important;
    border-radius: 0.25rem !important;
}

.step-spacer-reserve {
    visibility: hidden; !important;
}

.step-position {
    position: absolute; !important;
    bottom: 0; !important;
    left: 0; !important;
    width: 100%; !important;
}