paperSnake.css

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    background-color: #eeeeee;
}

#top {
    height: 85%;
}

canvas {
    display: inline-block;
    vertical-align: top;
    width: 85%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    /* background-size: 100%; */
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 85%;
    height: 100%;
}

#right {
    display: inline-block;
    vertical-align: top;
    width: 10%;
}

div span.variable {
    background-color: yellow;
}

div span.key {
    background-color: aquamarine;
}

button:hover {
    filter: brightness(80%);
}

/* general buttons: active vs normal */
button {
    background-color: white;
    margin: 1px;
    border-radius: 5px;
}

button.view {
    background-color: lightgrey;
}

button.view.active {
    background-color: lightgreen;
}

/* tool button: line vs area */
#button_area,
#buttonUndoArea {
    background-color: lightcoral;
}

.tool.active {
    border-width: 3px;
    /* border-color: blue; */
}

.tool.inactive,
.tool.inactive:hover {
    background-color: lightgray;
    filter: brightness(100%);
}

.tool {
    border-width: 2px;
}

.tooltips .title {
    text-decoration: underline;
}

#button_ROI,
#buttonUndoROI {
    background-color: lightblue;
}

.distance {
    background-color: yellow;
}

#buttonExportEntireProject {
    background-color: grey;
}

#bottom {
    width: 100%;
    height: 13%;
    text-align: justify;
}

#info {
    min-width: 210px;
}

#bottom div {
    height: 100%;
    vertical-align: top;
    margin-top: 10px;
    display: inline-block;
    /* border: 1px solid black; */
}

#buttonsBelow div {
    margin: 0px 0px 0px 10px;
}

.reversed {
    display: inline-block;
    transform: scaleX(-1);
    /* transform: rotate(180deg); */
    writing-mode: horizontal-tb;
}

.hidden {
    display: none;
}