:root {
    --color-ocean: #80c5ef;
    --color-ocean-distant: #336d97;
    --color-beach-start: #99ddeb00;
    --color-beach-end: #d3c78c;
    --color-grass-start: #66ae60;
    --color-grass-end: #374b2e;
    --color-mountain-start: #715239;
    --color-mountain-end: #3e352d;
    --color-volcano-surface: #b75a3b;
    --color-volcano-deep: #cd8941;
    --color-tree-pine: #477c50dd;
    --color-hut-base: #9f9f9f;
    --color-hut-walls: #dacdad;
    --color-hut-roof: #b37d53;
    --loader-size: 16px;
}

#renderer-container {
    width: 100%;
    padding-bottom: 65%;
    position: relative;
    float: left;
    height: 0;
    margin-bottom: 16px;
}

#renderer {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
            ellipse at bottom,
            var(--color-ocean) 0,
            var(--color-ocean-distant) 100%);
    display: flex;
    flex-direction: column;
}

#renderer #canvas-wrapper {
    flex-grow: 1;
}

#renderer #canvas-wrapper #div-renderer {
    position: absolute;
    overflow: hidden;
}

#renderer #canvas-wrapper #div-renderer #slice-container {
    transform-origin: left top;
}

#renderer #canvas-wrapper #div-renderer #slice-container .slice {
    position: absolute;
    transform-origin: left top;
}

#renderer #canvas-wrapper #renderer-2d {
    position: absolute;
}

#renderer #canvas-wrapper #renderer-webgl {
    position: absolute;
}

#renderer #loader {
    background-color: #585858;
    width: 100%;
    height: var(--loader-size);
    user-select: none;
}

#renderer #loader #loaded {
    width: 0;
    height: 100%;
    background-color: var(--color-grass-start);
}

#renderer #controls-wrapper {
    position: absolute;
    display: flex;
    flex-direction: row;
    user-select: none;
}

#renderer #controls-wrapper #controls {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.62);
}

#renderer #controls-wrapper #controls table {
    padding: 4px;
}

#renderer #controls-wrapper #controls #controls-table {
    display: none;
}

#renderer #controls-wrapper #controls #controls-table.visible {
    display: block;
}

#renderer #controls-wrapper #controls select {
    width: 100%;
}

#renderer #controls-wrapper #controls button {
    width: 100%;
}