<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;
}