.leftframe,.options,.select{display:block;position:absolute}
body{background:#f2f2f2;font-family:sans-serif}
.leftframe{left:0;top:0;width:50%;height:100%;border:0}
iframe{width:50vw;height:100vh}
.options,.select{left:50%;bottom:0;transform:translate(-50%);z-index:1}
.select{bottom:20px}
.options li{display:inline-block;margin:0 10px;width:40px;height:40px;border:4px solid transparent;border-radius:50%;text-indent:-1000px;overflow:hidden;cursor:pointer}
.options li.selected{border:4px solid #fff}
.options li.lightblue{background:#70C0E7}
.options li.green{background:#80B845}
.options li.red{background:#C74334}
.options li.blue{background:#2C4463}    cursor: pointer;
    }

    .options li.selected {
        border: 4px solid white;
    }
    .options li.lightblue {
        background: #70C0E7;
    }
    .options li.green {
        background: #80B845;
    }
    .options li.red {
        background: #C74334;
    }
    .options li.blue {
        background: #2C4463;
    }