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

h1 {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    padding-bottom: 1.5rem;
}

h2 {
    font-family: 'Oswald', sans-serif;
    padding-bottom: 1.5rem;
}

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

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

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

.side-to-side-yellow {
    margin-left: -15px;
    margin-right: -15px;
    background-color: rgba(254, 227, 167, 0.19);
}

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

.site-menu a {
    color: #57557D;
    transition: ease-in-out color .15s;
    font-size: 1.1rem;
}
.site-menu a:hover {
    color: #BEBDD3;
    text-decoration: none;
}

.menu-like-text {
    color: #57557D;
    font-size: 1.1rem;
}

.text-link {
    color: inherit;
    text-decoration: underline;
}

.menu-active {
    color: #BEBDD3;
}

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


.btn-clickable {
    border-color: #000000;
    border-radius: 0 !important;
}

.btn-clickable:hover {
    color: #ffffff;
    background-color: #57557D;
    border-color: #57557D;
}

.btn-clickable:focus, .btn-clickable.focus {
    color: #ffffff;
    background-color: #57557D;
    border-color: #57557d;
    box-shadow: 0 0 0 0.0rem rgba(87, 85, 125, 0.5);
}


.site-footer {
    width: 100%;
}

.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%;
}