style.css

body {
  height: 100vh;
  width: 100vw;
  background-color: hsla(0,0%,0%,0.8);
 margin: 25px;
}

canvas {
  background: rgb(79, 79, 90);
border: solid gray .7px;
border-radius: 5px;
}

canvas:hover, canvas:focus {
 cursor: pointer;
}



/* Color Palette Container */
.colors-container {
display: inline-block;
  background-color: rgb(79, 79, 90);
  border: solid gray .7px;
  border-radius: 5px;
 
  margin: 25px;
}

/* Color Swatches Look Like This */
.colors-container button {
  width: 65px;
  border: solid black 1px;
  border-radius: 5px;
  padding: 10px;
  margin: 5px;
}

.colors-container button:hover {
  border: white 1px solid;
}



button:hover {
  cursor: pointer;
}

#white {
  background-color: white;
  color: white;
}

#black {
  background-color: black;
  color: black;
}

#red {
  background-color: #ff0c2c;
  color: #ff0c2c;
}

#orange {
  background-color: #F58e16;
  color: #F58e16;
}

#yellow {
  background-color: #ffff00;
  color: #ffff00;
}

#green {
  background-color: #00ff00;
  color: #00ff00;
}

#blue {
  background-color: #0c43ff;
  color: #0c43ff;
}

#purple {
  background-color: #8000ff;
  color: #8000ff;
}

#pink {
  background-color: #ff00ff;
  color: #ff00ff;
}



/* Download & Erase Buttons */
button#download,
button#erase {
  background-color: lightgray;
  border: solid gray 1px;
  border-radius: 5px;
  margin: 25px;
}

button#download:hover,
button#erase:hover {
  background-color: white;
  border: solid white .7px;
}

html {
  overflow: hidden;
}