html, body, svg { padding:0; margin:0; } #menu { font-family:"Segoe UI","Roboto","Ubuntu"; font-size:4vh; border-radius:0; box-shadow: 0px 0px 9px black; overflow:hidden; position:fixed; left:0; top:0; color:black; background-color:rgba(0,100,255,0.9); width:10vw; 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:100px; height:2em; transition-duration:1s; } #menu.closed h2{ /*Menu title ("Menu")*/ text-align:center; } #menu h2{ /*Menu title ("Menu")*/ font-size:6vh; font-family:monospace; letter-spacing:.5vw; text-shadow: 0px 0px 9px white; color:black; word-wrap:break-word; padding:0; margin:0; } #menu ul { list-style-type:none; padding:0; } #menu li { 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 li:hover { color:black; transition-duration:0.5s; } #menu li.curTool { box-shadow: 0 0 2px white; background-color:rgba(0,100,255,1); text-shadow: 0px 0px 3px white; transition-duration:0.5s; } #menu .tool-icon { padding:1vh; width:2vw; } #menu .tool-name { margin-left: .5vw; font-size:4vh; } @media (max-width: 1000px) { #menu { font-size:2.5vw; } #menu .tool-name { display: none; } #menu .tool-icon { width:100%; font-size:5vw } #menu h2 { white-space: nowrap; font-size:3vw; } #menu h3 { font-size:2.5vw; margin-top:0; } #chooseColor { width:100%; } #chooseSize { width:100%; padding:0; margin:0; } } input { font-size:16px; } #chooseColor { width:5vw; height:4vh; border:1px solid black; border-radius:3px; color:black; text-shadow: 0 0 6px white; } #chooseSize { width:5vw; }