body, html {
    margin: 0;
    padding: 0;
    font-size: 2.5vh;
    background-color: #141414;
}

#editor { 
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    height: 95%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.toolbar {
    background-color: #141414;
    position: absolute;
    top: 0;
    right: 0;
    height: 5%;
    width: 50%;
    overflow-y: scroll;

}

.lesson {
    box-sizing: border-box;
    position: absolute;
    padding: 1%;
    margin:0;
    top: 0;
    left: 0;
    height: 100%;
    width: 25%;
    background-color: #141414;
    overflow-x: hidden;
    overflow-y: scroll;
}

h1 { color: firebrick; }

li { margin-bottom: 12px;}
li:hover { background-color: white; color: black; }

input[type="checkbox"] {
    position: absolute;
    left: 0;
}

.toolbar button { height: 100%; font-size: 0.75em; background-color: #232323; color: white; border-color: #141414; white-space: nowrap;}
.toolbar button:hover { background-color: navy; color: yellow; }
.transport {display: none;}

.modal { position: absolute; width: 50%; height: 50%; left: 25%; top: 25%; background-color: black; padding: 1%; color: white; z-index: 100; display: none;}
.modal input, label, select {display: block; margin: 1%;}
#s {background-color: lawngreen; }
#c {background-color: red; color: white; }