html { height: 100%; } body { margin: 0; padding: 0; height: 100%; overflow: hidden; } a { color: black; } body, canvas { background-color: #808080; } video { display: none; } #objects { outline: none; height: calc(100% - 18.4px); width: 110px; border: unset; } .select-panel { position: absolute; float: left; height: 100%; } #control { text-align: center; background-color: white; color: black; font-family: Arial; font-size: 18px; font-weight: bold; padding-top: 5px; padding-bottom: 5px; } .objects-wrapper { float: left; height: calc(100% - 15px); width: calc(100%); } .viewer-panel { position: absolute; top: 0; left: 0; } option { padding-left: 5px; font-size: 14px; padding-top: 3px; padding-bottom: 3px; } option:hover { cursor: pointer; } #colors { position: absolute; bottom: 20px; left: 130px; border-radius: 2px; padding: 5px; } #colors td { border: 1px solid white; } #colors td:hover { cursor: pointer; } .frames-wrapper { position: absolute; top: 0; right: 100px; } .bottom-links { position: absolute; bottom: 10px; right: 10px; margin: 0; } .bottom-links ul { list-style-type: none; } .bottom-links li { float: left; margin-left: 10px; list-style-type: none; } .custom-colors { position: absolute; bottom: 210px; left: 130px; } .custom-colors input:hover { cursor: pointer; } #control a { text-decoration: none; } #control a:hover, #control a.active { text-decoration: underline; } @media (prefers-color-scheme: dark) { body, canvas { background-color: #181818; } body, a, #objects, option { color: #f5f5f5 !important; } #objects { background-color: #292929; } option:checked, option:hover, .option:active { background-color: #4f4f4f !important; } #colors, .custom-colors input { background-color: #343434; } #colors td { border: 1px solid white; } .custom-colors input { border-radius: 2px; } #objects option:nth-child(2n) { background-color: #2e2e2e; } #control { background-color: #292929; color: #f5f5f5; } }