style.css

html, body, .flex {
    width: 100%;
    height:100%;
    padding:0px;
    margin:0px;
    font-family:sans-serif;
}
.flex {
    display: flex;
    flex-direction: row;
}

#result {
    width:100%;
    height:100%;
    margin-top:35px;
}
svg {
    max-height:85vh;
}

.nav {
    position:absolute;
    top:0px;
    left:0px;
    width:145px;
    height:30px;

    font-family:'Montserrat', sans-serif;
    font-weight:500;
    font-size:20px;
    color:#000;

    background-color:#cecece;
    border-style:none solid solid none;
    border-width:2px;
    padding:2px 1px 1px 2px;

    cursor:pointer;
}

.tool-button {
    position:absolute;
    top:0px;
    height:30px;
    width:30px;
    background-color:#cecece;
    border-style:none solid solid solid;
    border-width:2px;
    padding:2px 1px 1px 1px;
}
.tool-button:hover {
    background-color:#aaa;
    cursor:pointer;
}

#hidden-window {
    left:195px;
    display:none;
}
#download-svg {
    left:275px;
    display:none;
}

#github {
    left:155px;
}

#control {
    position:absolute;
    width:400px;
    top:100px;
    left:30px;
    background-color: #cecece;
    border-style:solid;
    border-width:2px;


    display:flex;
    flex-direction: column;

    font-size:20px;
    justify-content: center;
    padding:0px;
    margin:auto;
}
#control .contents {
    padding:0px 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#control-header {
    cursor: move;
    background-color: #aaa;
    height:30px;
    display:flex;
    flex-direction: row;
}

.drag-icon {
    margin-right:auto;
    padding:2px;
}

#hide-icon {
    margin-left: auto;
    padding:2px 5px 2px 5px;
}
#hide-icon:hover {
    background-color:#888;
    cursor:pointer;
}

button {
    width:100%;
}
select, input {
    font-size:20px;
}
.dim {
    margin: 10px 0px;
}