*{
    box-sizing: border-box;
}   
body{
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    
    /* padding: 1em; */
}
.container{
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
    padding: 2.4em;
}
a{
    color: #CFB53B !important;
}
.canvas-container{
    padding: 0;
    margin: 0 auto;
    display: block;
}
.canvas-container canvas{
    width: 266px !important; 
    height: 333px !important; 
    border: 3px solid rgb(221, 37, 108);
}
.tombol{
    width: 303px;
    position: absolute;
    top: 320px;
    padding: 1em;
}
.headline{
    padding: 0;
    color: #CFB53B;
    position: relative;
    text-align: center;
}
.wrapper{
    box-shadow:0 0 20px 0 rgb(102, 101, 89);
    background: rgb(225, 243, 245);
    /* display: grid;
    grid-template-columns: 1fr  */
    /* background: rgb(225, 243, 245); */

}
/* .canvas-padding{
    padding: 1em;
    margin: 0 auto;
 
} */
.control, .canvas-padding, .about{
    padding: 1em;
}
.editor{
    background: rgb(225, 243, 245);
    height: 450px;
    position: relative;
  
    /* z-index: 0; */
}
.about{
    background: rgb(255, 231, 16);
}
.about p{
    text-indent: 1em;
    text-align: justify;
}
.control p{
    text-align: justify;
    text-indent: 1em;
}
.control{
    /* position: relative;
    z-index: 2; */
    background: rgb(225, 243, 245);
}

/* .tittle img{
    width: 80px;
    
} */
.contact{
    position: relative;
    z-index: 2;
    background-color: rgb(78, 73, 73);
    color: rgb(199, 175, 175);
    padding: 1em;
    padding-left: 20px;
    margin-left: 0;
    margin-right: 0;
    font-size: 12px;
    /* box-shadow:0 0 20px 0  rgb(78, 73, 73); */
}
ul{
    list-style: none;
    padding: 0;
}
.mdl-button--file input {
    cursor: pointer;
    height: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 300px;
    z-index: 4;
  }
  
  .mdl-textfield--file .mdl-textfield__input {
    box-sizing: border-box;
    width: calc(100% - 32px);
  }
  .mdl-textfield--file .mdl-button--file {
    right: 0;
  }

@media(min-width: 700px){
    .contact{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column: 1/4;
    }
    .editor{
        width: 300px;
    
    }
    .headline{
        text-align: left;
    }
    .control{
        grid-column: 2/4
    }
    .wrapper{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;

       
        /* grid-auto-rows: minmax(200px,400px);
        grid-auto-columns: (200px, 300px) !important; */
    }

}