jcubic/lips

.box {
    --width: 80ch;
    width: calc(var(--width) + 100px);
    height: calc((var(--height, 500) - 100) * 1px);
    margin: 20px auto;
    position: relative;
    max-width: 100%;
}
.screenshot-header {
    text-align: center;
    margin-top: 20px;
}
/*
 * button generated by
 *  https://www.bestcssbuttongenerator.com/
 */
.download {
    box-shadow:inset 0px -3px 7px 0px #29bbff;
    background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
    background-color:#2dabf9;
    border-radius:3px 3px 3px 0;
    border: none;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    padding:9px 23px;
    text-decoration:none;
    text-shadow:0px 1px 0px #263666;
}
.download:hover {
    background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
    background-color:#0688fa;
}
.download:active {
    position:relative;
    top:1px;
}
.wrapper {
    background: #ABB8C3;
    padding-block: 50px;
}
.position, .cm-shadow-box, .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}
.cm-dialog {
    width: var(--width);
    height: auto;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px;
    --background: #151718;
    background: var(--background, white);
    z-index: 100;
    overflow: hidden;
}
.cm-dialog header {
    padding: 10px;
}
.cm-dialog .cm_body {
    height: calc(100% - 38px);
}
.cm-dialog .CodeMirror {
    background: var(--background, white);
    line-height: 1.4em;
    height: 100%;
}
.cm-dialog .cm-s-seti .CodeMirror-gutters {
    background-color: var(--background, white);
}
.cm-icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 5px;
    padding: 2px 0;
}
.cm-icons li {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: red;
    border-radius: 50%;
}
.cm-icons li:first-child {
    background: #FF5F56;
}
.cm-icons li:nth-child(2) {
    background: #FFBD2E;
}
.cm-icons li:last-child {
    background: #27C93F;
}

.note a, .note a:visited {
    color: #005DB6;
    text-decoration: none;
}
.note a:hover {
    text-decoration: underline;
}
.cm-string {
    font-style: normal !important;
}
.hidden {
    position: absolute;
    left: -999999px;
}
.box footer {
    display: flex;
    justify-content: center;
    margin: 20px;
}