.page-body {
    background: var(--light);
    max-width: 750px;
    margin: 10px auto;
    padding: 10px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    font-size: 1.1em;
    position: relative;
}

    .page-body > div {
        margin-bottom: 10px;
    }

.box {
    border: 2px solid #1e1d1b;
    border-radius: 15px;
    padding: 10px;
}

.width-100-percent {
    width: 100%;
    height: auto;
}

.code-sample {
    width: calc(100% - 20px);
    background: #1e1d1b;
    color: var(--light);
    border-radius: 15px;
    padding: 5px 10px;
    font-family: sans-serif;
    font-size: 0.9em;
    margin: 5px 0;
}

.code-comment {
    color: green;
}

.code-string {
    color: orange;
}

.code-for {
    color: hotpink;
}

.code-number {
    color: lightgreen;
}

.code-keyword {
    color: royalblue;
}
.code-void{
    color:papayawhip;
}

.indent-0 {
    padding-left: 1em;
    display: block;
}

.indent-1 {
    padding-left: 2em;
    display: block;
}

.indent-2 {
    padding-left: 4em;
    display: block;
}

.indent-3 {
    padding-left: 6em;
    display: block;
}

.indent-4 {
    padding-left: 8em;
    display: block;
}

.indent-5 {
    padding-left: 10em;
    display: block;
}

.publish-list {
    flex-direction: row;
    width: 100%;
    align-items: center;
}

    .publish-list > a {
        width: 20%;
    }

.gallery {
    width: 100%;
    height: 150px;
}

.gallery-row {
    height: 100%;
}

@media(max-width:1220px) {
    .gallery {
        position: relative;
        height: 150px;
    }

    .gallery-row {
        height: 100%;
        flex-wrap: nowrap;
    }

    .gallery-image {
        width: initial;
        height: calc(100% - 4px);
    }

        .gallery-image > img {
            height: 100%;
        }

    .publish-list {
        display: flex;
    }
}

@media(max-width:770px) {
    .gallery {
        display: initial;
    }

    .gallery-row {
        display: flex;
        height: 100%;
    }
}