body {

    margin: 0;

    padding: 0;

    background: #f5f5f5;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.container {

    max-width: 700px;

    margin: 50px auto;

    padding: 30px;

    background: white;

    border-radius: 10px;

    box-shadow:
        0 2px 10px
        rgba(
            0,
            0,
            0,
            0.15
        );

    text-align: center;
}

h1 {

    margin-bottom: 5px;
}

h2 {

    margin-top: 35px;

    margin-bottom: 15px;

    color: #333333;
}

h3 {

    margin-top: 25px;

    color: #444444;
}

p {

    line-height: 1.6em;
}

li {

    line-height: 1.6em;
}

.versionBox {

    margin-top: 30px;

    margin-bottom: 30px;

    line-height: 1.8em;
}

.separator {

    margin-top: 25px;

    margin-bottom: 25px;

    border-top:
        1px solid
        #dddddd;
}

.languageBox {

    display: flex;

    justify-content: center;

    gap: 25px;

    margin-top: 30px;

    margin-bottom: 30px;
}

.languageButton {

    display: inline-block;

    min-width: 180px;

    padding: 15px 25px;

    text-decoration: none;

    font-size: 20px;

    font-weight: bold;

    color: #222;

    background: #eeeeee;

    border:
        1px solid
        #cccccc;

    border-radius: 8px;
}

.languageButton:hover {

    background: #dddddd;
}

.backButton {

    text-decoration: none;

    font-weight: bold;

    color: #444444;
}

.backButton:hover {

    text-decoration: underline;
}

.codeBox {

    background: #2b2b2b;

    color: #f0f0f0;

    padding: 15px;

    margin-top: 10px;
    margin-bottom: 20px;

    border-radius: 8px;

    border-left:
        5px solid
        #4caf50;

    overflow-x: auto;
}

.codeBox pre {

    margin: 0;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 15px;

    line-height: 1.6em;
}

code {

    background: #eeeeee;

    padding: 2px 6px;

    border-radius: 4px;

    font-family:
        Consolas,
        monospace;

    font-size: 0.95em;
}

.indexBox {

    text-align: left;

    max-width: 500px;

    margin: auto;
}

.indexBox li {

    margin-bottom: 8px;
}

.indexBox a {

    text-decoration: none;

    color: #1565c0;

    font-weight: bold;
}

.indexBox a:hover {

    text-decoration: underline;
}

/* ==========================
   DOCUMENTATION CONTENT
========================== */

.container p {

    text-align: left;
}

.container ul {

    text-align: left;

    margin-top: 5px;
    margin-bottom: 15px;

    padding-left: 30px;
}

.container li {

    margin-bottom: 6px;
}

.container h2[id] {

    text-align: left;
}

.container h3 {

    text-align: left;
}

.treeBox {

    background: #2b2b2b;

    color: #f0f0f0;

    padding: 15px;

    margin-top: 10px;
    margin-bottom: 20px;

    border-radius: 8px;

    border-left:
        5px solid
        #2196f3;

    overflow-x: auto;

    text-align: left;
}

.treeBox pre {

    margin: 0;

    padding: 0;

    text-align: left;

    white-space: pre;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 15px;

    line-height: 1.3em;

    display: block;
}

.scriptBox {

    background: #2b2b2b;

    color: #f0f0f0;

    padding: 15px;

    margin-top: 10px;
    margin-bottom: 20px;

    border-radius: 8px;

    border-left:
        5px solid
        #4caf50;

    overflow-x: auto;

    text-align: left;
}

.scriptBox pre {

    margin: 0;

    padding: 0;

    text-align: left;

    white-space: pre;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 14px;

    line-height: 1.35em;

    display: block;
}