body {
    background: #dfdfd5;
}

#canvas {
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    background: #ffff00;
                    cursor: crosshair;
                    margin-left: 0px;
                    margin-top: 0px;
                    border: 1px solid cornflowerblue;
}			

div {
    margin: 0;
    position: absolute;
}

.centre {
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

fieldset {
    border-radius: 5px;
    background: #77888a;
    width: auto;
    margin: 0 auto;
    padding: 5px;		
}

.descriptionBot {
    position: absolute;
    left: 3px;
    bottom: 12vw;
    width: 80%
}

.descriptionTop {
    position: absolute;
    left: 3px;
    top: 20vw;
    width: 80%
}

flexbox.center {
    margin: 0 auto;
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */	
    }

textarea {
    caret-color: blue;
    background: #dfdfad;
    font-family: 'Palatino';
    font-size:7vw;
}

input {
    caret-color: red;
    font-family: 'Palatino';
    font-size:7vw;
}

input.lowerLeft {
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 80%
}

input.topLeft {
    position: absolute;
    left: 3px;
    top: 26px;
    width: 80%
}

button.topLeft {
    position: absolute;
    left: 85%;
    top: 32px;
    width: 50px;
    margin: 0px;
}

button.lowerLeft {
    position: absolute;
    left: 85%;
    bottom: 6px;
    width: 50px;
    margin: 0px;
}

button {
    font-family: 'Palatino';
    font-size:35px;
    height:40px;
    margin: 5px;
    padding: 0px;
    border-radius: 8px;
}

button.fixwidth {
    width: 100px;
}
.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-family: 'Palatino';
    font-size: 3vh;
    line-height: 50px;
    border-radius: 5px;
    background-color: #f1f1f1;
    cursor: pointer;
  }
  
.chip img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 50px;
    width: 50px;
    border-radius: 10%;
  }

H1 { 
      text-align: center;
}

H1.fixwidth {
    width: 305px;
}

button.okBut {
    background-color: greenyellow;
    width: 7vmax;
}

button.cancelBut {
    background-color: orangered;
    width: 7vmax;
}