body{
    margin:0;
    background:#121212;
    font-family:Arial, Helvetica, sans-serif;
    display:flex;
    padding:0;
}

code {
    color:rgb(152, 152, 252);
    font-size:16px;
}

.left-panel{
    width:800px;
    min-width:250px;
    max-width:1100px;
    min-height:100vh;
    max-height:100vh;

    background:#1c1c1c;

    box-sizing:border-box;

    position:relative;

    display:flex;
    flex-direction:column;
}
    .horizontal-resize-handle{
        position:absolute;
        top:0;
        right:0;
        width:6px;
        height:100%;
        cursor:ew-resize;
        background:transparent;
        z-index:100;
    }

        .no-select{
        user-select:none;
        }

    .horizontal-resize-handle:hover{
        background:#5686EE;
    }

    .top-panel {
        padding:30px 20px 20px;
        height:600px;
        overflow:auto;
        box-sizing:border-box;
    }

    .top-panel h1{
        color:#fff;
        font-size:34px;
        font-weight:700;
        margin:0;
    }

    .reference-img small{
        color:#5686EE;
        font-size:14px;
        font-weight:600;

        margin:10px 0px;

        display: inline-block;
    }

    details{
        margin-bottom:18px;
        border:2px solid #5686EE;
        border-radius:10px;
        overflow:hidden;
        background:#222;
    }

        summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;

            color:#fff;
            font-size:18px;
            font-weight:600;

            /* subtle blue outline around the text */
            text-shadow:
                -0.5px 0 #5686EE,
                0.5px 0 #5686EE,
                0 -0.5px #5686EE,
                0 0.5px #5686EE;
        }

        summary::after{
            content:"+";
            float:right;
            color:#5686EE;
            font-size:22px;
            font-weight:bold;
        }

        details[open] summary::after{
            content:"−";
        }

            .step-content{
                border-top:2px solid #5686EE;
                padding:18px 20px;
                color:white;
                line-height:1.6;
            }
            ol {
                padding-left: 0;
                list-style-position: inside;
            }
        .top-panel h2{
            color:white;
        }

    .vertical-resize{
        height:6px;
        background:transparent;
        cursor:ns-resize;
        flex-shrink:0;
    }

    .vertical-resize:hover{
        background:#5686EE;
    }
.bottom-panel {
    padding:20px 0px 20px 20px;
    overflow-y:auto;
}
.CodeMirror {
  height: auto;
}
.right-panel{
    flex:1;
    min-width:0;
    height:100vh;
}
    #preview {
      border: none;
      background: white;
      margin:0;
      height:100%;
      width:100%; 
    }