* {
  box-sizing: border-box;

}
h1.head1 {
  color: red;
text-align: center;
}
.header1 {
  width: 100%;
  height: 20%;
  background: yellow;
  margin: 2px;
  padding: 10px;
  border: solid 2px;
  border-color: black;
}
.column {
  float: left;
  padding: 5px;
  border:  solid 2px;
  border-color: black;



  }

.column.left {
background: aqua;
width: 25%;
}
.column.right {
background: orange;
width: 25%;
}
#btn1 {
  background-color: aqua;
  border: none;
}
#gobtn {
padding: 0;
margin: auto;

  background-color: aqua;
}
#canvas1 {
  width: 480px;
  height: 320px;

  background-color: black;
display: block;
margin: auto;


}
.column.middle {
background: lightblue;
  width: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
body {
  background-color: teal;
}
@media screen and (max-width: 600px) {
  .column.side, .column.middle{
    width: 100%;
  }
}
.footer1 {
  background-color: green;
  width: 100%;

}