.md-modal {
    /* This way it could be display flex or grid or whatever also. */
    display: block;

    /* Probably need media queries here */
    width: 600px;
    max-width: 90%;

    height: 300px;
    max-height: 100%;

    position: fixed;

    z-index: 100;

    left: 50%;
    top: 50%;

    /* Use this for centering if unknown width/height */
    transform: translate(-50%, -50%);

    /* If known, negative margins are probably better (less chance of blurry text). */
    /* margin: -200px 0 0 -200px; */

    background: white;
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}
.md-closed {
    display: none;
}

.md-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;

    background: rgba(0, 0, 0, 0.6);
}
.md-modal-guts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px 50px 20px 20px;
}
.md-modal .md-close-button {
    position: absolute;

    /* don't need to go crazy with z-index here, just sits over .modal-guts */
    z-index: 1;

    top: 10px;

    /* needs to look OK with or without scrollbar */
    right: 20px;

    border: 0;
    /*background: black;*/
    color: #333;
    padding: 5px 10px;
    font-size: 20px;
}

.md-open-button {
    border: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: lightgreen;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 21px;
}