.center {
    text-align: center;
    font-family:verdana;
}

body{
  max-width: 1200px;
  max-height: 600px;
  margin: auto;/*To align body center*/
  
  border-radius: 20px;
  background-color: #eeeeee;
  text-align: center;
  /*color: #ccc;*/
  font-family:Verdana;
  
  justify-content:center;
    /*margin:0px;*/
    /*padding: 20%;*/
    font-family: "Veradana";
    overflow: hidden;
    /*background:grey;*/
}
div.mainWindow {
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
  background-color: #ffffff;
  border: 3px solid black;
  border-radius: 20px;
  
}
input, select {
  width: 300px;
  margin: 4px 0;/*To align body center*/
  display: inline-block;
  border: 3px solid #777777;
  border-radius: 4px;
  font-size: 120%;
  text-align: center;
}
.input .prefix {
  font-weight: 300;
  font-size: 14px;
  color: red;
}




h1
{
    font-family: verdana;
    font-size: 100%;
}
h2
{
    font-family: verdana;
    font-size: 100%;
    color: #404040;
}

h3 {
    font-family: verdana;
    font-size: 100%;
    color: purple;
}
a {
    color: grey;
}

canvas{
    box-shadow: -2px 2px 6px 6px black;
    cursor: crosshair;
    /*justify-content:center;*/
    
    
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    /*width: 800px;*/
}
.tools{
    display: flex;
    justify-content:center;
    flex-direction: row;
    margin-top: 15px;
}

.tools .color-field{
    height: 40px;
    width: 40px;
    min-height:40px;
    min-width:40px;
    cursor: pointer;
    display: inline-block;
    cursor: pointer;
    box-sizing:border-box;
    border-radius: 50%;
    border: 2px solid white;
    align-self: center;
    margin:0 10px;
}

.tools .button{
    align-self: center;
    height: 40px;
    width: 120px;
    
    border: 2px solid white;
    cursor: pointer;
    color:white;/*Color of button text*/
    background: black;
    font-weight:bold;
    margin:0 10px;
}

.color-picker{
    align-self: center;
    margin:0 8px;
    width: 30px;
    height: 30px;
}

.pen-range{
    align-self: center;
    margin:0 10px;
    width: 100px;
}


#gradient {
  /*height: 100%;*/
  justify-content:center;
  background-color: red; /* For browsers that do not support gradients */
  background: linear-gradient(to bottom right, blue , grey,blue);
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


.vl {
  border-left: 3px solid blue;
  height: 100px;
  /*position: absolute;*/
  /*left: 50%;*/
  margin-left: -50px;
  margin-right: 25px;
  top: 10px;
}