body {
  height: 100%;
  overflow: hidden;
}
canvas{
  position:absolute;
  top: 0%;
  left: 0%;
  background-color: #e8e8e1;
}
div{
  position:absolute;
  width:20%;
  height: 100%;
  top:0%;
  right: 2%;
  background-color: #141413;
}
form{
  margin-left: 10%;
}
img{
  width: 80%;
  height: 80%;
}
button{
  width:65%;
  height: 200%;
  padding: none;
  outline: none;
  border: none;
  border-radius: 50%;
  margin-bottom: 10%;
  margin-top: 10%;
  margin-left: 10%;
}
#topColour{
  margin-top:0%;
}
#whiteButton{
  background: none;
}
label{
  color: #ffffff;
  margin-left: 5%;
}
#text{
  width: 55%;
  margin-bottom: 10%;
}
#set{
  border-radius: 0%;
  width:30%;
  margin-left:0%;
}
#brushSize{
 width: 85%;
 margin-bottom: 0%;
}
#size{
  margin-top: 0%;
  color: #ffffff;
  margin-left: 5%;
  margin-bottom: 0%;
}
#reset{
  border-radius: 0%;
  width:70%;
  margin-left: 10%;
}
#allProjects{
  border-radius: 0%;
  width:70%;
  height: 5%;
  margin-left: 15%;
}

@media (orientation:landscape){
  div{
    right:-7%;
    width: 20%;
    height:100%;
    top:0%;
  }
  button{
    width: 33%;
    height: 50%;
    margin-top: 0%;
    margin-left: 10%;
  }
  #text{
    width: 35%;
    margin-bottom: 5%;
  }
  #set{
    width:15%;
    margin-left: 0%;
  }
  #brushSize{
    width: 55%;
  }
  #size{
    margin-bottom: 7.2%;
  }
  #reset{
    width:55%;
    margin-left: 1.5%;
  }
  #allProjects{
    height: 3.5%;
    width: 55%;
    margin-left: 6%;  
    margin-top: 3%;
  }
}