@media (max-width:960px) {
     #input-box {
         width: 400px;
         height: 150px;
         padding: 5px 20px 20px 10px;
         position: absolute;
         left: calc(50% - 150px);
         box-sizing: border-box;
         border-radius: 10px;
         /*   outline: 3px dashed black;*/
         display: none;
         z-index: 100;
     }
 }
 
 @media (min-width:961px) {
     #input-box {
         width: 400px;
         height: 150px;
         padding: 5px 20px 20px 10px;
         position: absolute;
         left: calc(50% - 150px);
         box-sizing: border-box;
         border-radius: 10px;
         display: none;
           z-index: 100;
     }
 }
 
 #input-box textarea {
     margin: 0;
     width: 100%;
     height: 120px;
     padding: 8px 4px;
     border-radius: 5px;
     border: none;
     font-size: 20px;
     text-align: center;
     resize: none;
     overflow: hidden;
     font-family: "Arial";
 }
 
 ::placeholder {
     /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: gray;
     opacity: 1;
     /* Firefox */
     padding: 50px;
 }
 
 :-ms-input-placeholder {
     /* Internet Explorer 10-11 */
     color: gray;
     padding: 50px;
 }
 
 ::-ms-input-placeholder {
     /* Microsoft Edge */
     color: gray;
     padding: 50px;
 }
 canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}