body {
    margin: 0;

    background:
        #090a08;

    color:
        #c6c2a6;

    font-family:
        Georgia,
        serif;
}


.container {
    max-width: 950px;

    margin:
        40px auto;

    padding:
        20px;
}


header {
    text-align:
        center;
}


.agency {
    color:
        #6f765d;

    font-size:
        12px;

    letter-spacing:
        3px;
}


h1 {
    margin-bottom:
        8px;

    color:
        #d0c59d;

    font-size:
        40px;

    letter-spacing:
        6px;
}


.subtitle {
    color:
        #747965;

    letter-spacing:
        2px;
}


.system-panel,
.notice,
.terminal,
.field-note {
    margin-top:
        24px;

    border:
        1px solid #484b3d;

    background:
        #10120e;
}


.status-line {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        10px;

    padding:
        18px;

    color:
        #747965;

    font-family:
        monospace;

    font-size:
        12px;
}


.status-line strong {
    display:
        block;

    margin-top:
        5px;

    color:
        #c6c2a6;
}


.status-line .online {
    color:
        #8caf78;
}


.notice {
    padding:
        20px;

    line-height:
        1.6;
}


.notice strong {
    color:
        #b79855;

    letter-spacing:
        2px;
}


.terminal {
    overflow:
        hidden;

    background:
        #050704;

    font-family:
        monospace;
}


.terminal-title {
    padding:
        13px 16px;

    border-bottom:
        1px solid #484b3d;

    background:
        #161912;

    color:
        #9ca687;

    letter-spacing:
        2px;
}


.terminal label {
    display:
        block;

    padding:
        18px 18px 7px;

    color:
        #69735e;

    font-size:
        11px;

    letter-spacing:
        2px;
}


.request-row {
    display:
        flex;

    gap:
        10px;

    padding:
        0 18px 15px;
}


.method {
    display:
        flex;

    align-items:
        center;

    padding:
        0 13px;

    border:
        1px solid #42523a;

    color:
        #89a078;
}


.request-row input {
    flex:
        1;

    min-width:
        0;

    padding:
        12px;

    border:
        1px solid #363a30;

    background:
        #0b0e09;

    color:
        #94b981;

    font-family:
        monospace;

    font-size:
        15px;
}


button {
    border:
        1px solid #59634d;

    background:
        #252b20;

    color:
        #c6c2a6;

    cursor:
        pointer;

    font-family:
        monospace;
}


#sendButton {
    padding:
        10px 18px;
}


button:hover {
    background:
        #343d2d;
}


button:disabled {
    opacity:
        0.5;

    cursor:
        default;
}


.examples {
    padding:
        0 18px 18px;

    color:
        #69735e;

    font-size:
        12px;
}


.example-link {
    margin-left:
        7px;

    padding:
        5px 8px;

    border:
        none;

    background:
        transparent;

    color:
        #9aae86;

    text-decoration:
        underline;
}


.response-heading {
    display:
        flex;

    justify-content:
        space-between;

    padding:
        10px 18px;

    border-top:
        1px solid #363a30;

    border-bottom:
        1px solid #363a30;

    color:
        #69735e;

    font-size:
        11px;

    letter-spacing:
        2px;
}


#responseOutput {
    min-height:
        240px;

    margin:
        0;

    padding:
        20px;

    overflow-x:
        auto;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    color:
        #90b17d;

    line-height:
        1.6;
}


.field-note {
    padding:
        20px;

    color:
        #7f816f;

    line-height:
        1.6;
}


.field-note-title {
    margin-bottom:
        10px;

    color:
        #a38b58;

    font-size:
        12px;

    letter-spacing:
        2px;
}


footer {
    margin-top:
        30px;

    text-align:
        center;

    color:
        #484b3d;

    font-size:
        11px;

    letter-spacing:
        2px;
}


@media (
    max-width: 650px
) {

    .status-line {
        grid-template-columns:
            1fr;
    }


    .request-row {
        flex-wrap:
            wrap;
    }


    .request-row input {
        flex-basis:
            calc(
                100% - 80px
            );
    }


    #sendButton {
        width:
            100%;
    }

}