
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: sans-serif;
    font-size: 14px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.light {
    background-color: rgb(250, 250, 248);
}

.dark {
    background-color: rgb(25, 28, 30);
}

.fullscreen_canvas {
    touch-action: none;
    position: absolute;
}

#firstresponse_canvas {
    z-index: 10;
    display: none;
}

#contextmenu {
    z-index: 20;
    position: absolute;
    display: none;
    /*padding-top: 10px;*/
    padding-bottom: 10px;
    border-radius: 3px;
    cursor: default;
}

.menu-item {
    padding: 6px 10px 6px 10px;
}

.menu-row {
    display: flex;
    width: 100%;
}

.menu-button {
    padding-top: 8px;
    padding-bottom: 8px;
    flex: 1;
    text-align: center;
}

.menu-button:hover {
    cursor: pointer;
}

.link:hover {
    cursor: pointer;
}

.dark .menu-item:hover, .dark .menu-button:hover {
    background: rgba(255, 255, 255, 0.07);
}

.light .menu-item:hover, .light .menu-button:hover {
    background: rgba(50, 50, 50, 0.08);
}

.light #contextmenu {
    color: rgb(55, 53, 47);
    background: rgb(255, 255, 255);
    box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
                rgba(15, 15, 15, 0.1) 0px 3px 6px,
                rgba(15, 15, 15, 0.2) 0px 9px 24px;
}

.dark #contextmenu {
    color: rgb(202, 204, 206);
    background: rgb(63, 68, 71);
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, 
                rgba(15, 15, 15, 0.2) 0px 3px 6px, 
                rgba(15, 15, 15, 0.4) 0px 9px 24px;
}

#contextmenu_link {
    display: none;
    font-size: 18px;
    position: absolute;
    z-index: 15;
    top: 0;
    left: 0;
    padding: 5px;
    cursor: pointer;
}

.light #contextmenu_link {
    color: rgba(55, 53, 47, 0.25);
}

.dark #contextmenu_link {
    color: rgba(202, 204, 206, 0.3);
}

.pick-color, .pick-size {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 1px;
}

.dot {
    display: inline-flex;
    border-radius: 50%;
    position: absolute;  /* no idea why this is needed, but does weird things otherwise */
}

.pick-color:hover, .pick-size:hover {
    cursor: pointer;
}

.light .dot {
    background-color: #37352f;
}

.light .pick-size {
    background-color: rgba(55, 53, 47, 0.2);
}

.dark .dot {
    background-color: #caccce;
}

.dark .pick-size {
    background-color: rgba(202, 204, 206, 0.2);
}
