html, body, svg { padding:0; margin:0; } #canvas { transform-origin: 0 0; } #menu { font-family: "sans"; font-size:.7vw; border-radius:0; box-shadow: 0px 0px 9px black; overflow:hidden; position:fixed; left:0; top:0; color:black; background-color:rgba(87, 154, 255, 0.9); width:13vw; height:100%; transition-duration:1s; cursor:default; } #menu.closed { border-radius:3px; left:10px; top:10px; background-color:rgba(100,200,255,0.7); width:6vw; height:2em; transition-duration:1s; } #menu.closed h2{ /*Menu title ("Menu")*/ text-align:center; font-size: .9vw; } #menu h2{ /*Menu title ("Menu")*/ font-size:4vh; text-align: center; letter-spacing:.5vw; text-shadow: 0px 0px 5px white; color:black; padding:0; margin:0; } #menu h3 { /*Section titles ("tools", "configuration")*/ font-size:1vw; } #menu .tools { list-style-type:none; padding:0; } #menu .tool { text-overflow: ellipsis; white-space: nowrap; list-style-position:inside; color:#335; border:0; text-decoration:none; width:100%; transition-duration:0.5s; cursor:pointer; } #menu .tool:hover { color:black; transition-duration:0.5s; } #menu .tool.curTool { box-shadow: 0 0 2px white; background-color:rgb(255, 66, 66); text-shadow: 0px 0px 3px white; transition-duration:0.5s; color: black; } #menu .tool-icon { text-align:center; font-size:2.5vh; padding:.1vw; width:1.5vw; display: inline-block; } #menu .tool-name { margin-left: .5vw; font-size:2.5vh; } @media (max-width: 600px) { #menu { font-size:1vw; } #menu .tool-name { display: none; } #menu .tool-icon { width:100%; font-size:5vw; padding:0; } #menu h2 { white-space: nowrap; font-size:2.5vw; } #menu h3 { font-size:1.2vw; margin-top:0; } #chooseColor { width:100%; } .rangeChooser { width:100%; padding:0; margin:0; } } input { font-size:16px; } #chooseColor { width:5vw; height:2vh; border:1px solid black; border-radius:3px; color:black; text-shadow: 0 0 6px white; display: block; width: 100%; margin: 0; padding: 0; } .rangeChooser { width: 5vw; border: 0; display: block; width: 100%; margin:0; }