/************************************
MASTER LAYOUT
************************************/
body  {
  margin: 0 auto;
  color: gray;
  font-family: 'Inter', sans-serif;
  background-color: #121212;

  color: #3700b3;
  --color-purple: #3700b3;
  --color-blue: #4bb2f9;
  --color-gray: #dedede;
}

main {
  margin: auto;
  padding: 3%;
  max-width: 1000px;
}

h1, h2, h3, h4, h5, h6, p {
  color: #121212;
}

.container {
  margin: 0 auto;
  padding: 1% 10%;
}

h1 {
  font-weight: 600;
  padding: 1% 0;
  font-size: 3.1rem;
  letter-spacing: -0.6px;
}

h2 {
  font-size: 2.5rem;
  font-weight: 300;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .8px;
}

img {
  width: 100%;
}

a {
  color: gray;
  text-decoration: none;
  padding-bottom: 3px;
}

a:hover, button:hover {
  cursor: pointer;
}

#myCanvas {
      border: 1px solid black;
      width: 600px;
      height: 600px;
    }

    /*the height and width are the logical canvas dimensions used for drawing and are different from the style.height and style.width CSS attributes. If you don't set the CSS attributes, the intrinsic size of the canvas will be used as its display size; if you do set the CSS attributes, and they differ from the canvas dimensions, your content will be scaled in the browser. 
    */