<section class="canvas">
 
</section>

<section class="toolbox">
  <div class="canvas-tools">
    <h2>Canvas</h2>
  </div>

  <div class="painting-tools">
    <h2>Painting tools</h2>
  </div>

  <div class="styles-tools">
    <h2>Styles</h2>
  </div>

  <div class="background-tools">
    <h2>Background</h2>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<script src="paintbrushes.js"></script>
<script src="app.js"></script>

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&family=Nunito&display=swap');

body {
	margin: 0;
	overflow: hidden;
	background-color: #ffffff;

	font-family: Nunito, sans-serif;
	font-size: 14px;
	line-height: 1;
}

section {
	height: 100vh;
	position: fixed;
	top: 0;
}

section.toolbox {
	right: 0;
	width: 180px;
	overflow-y: scroll;

	background-color: #ffffff;
	border-left: 1px solid #545454;

	display: flex;
	flex-direction: column;
}

section.canvas {
	left: 0;
	width: calc(100vw - 180px);

	display: flex;
	justify-content: center;
	align-items: center;
}

section.toolbox > div {
	padding: 20px 16px 8px 16px;
	border-bottom: 1px solid #545454;
}

h2 {
	margin-bottom: 24px;

	font-family: Lexend Deca;
	font-size: 14px;
	text-transform: uppercase;
}