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;
}