ArtRoom.css

body {
  background-color: rgb(2, 48, 146);
  color: white;
  min-height: 100vh;
  margin: 0;

}

h1 {
  text-align: center;
  background-image: linear-gradient(red,white,aqua);
  color:rgb(141, 6, 153);
  border-radius: 40%;
}

p {
  text-align: center;
}


.w3-bar-item {
  display: inline;
  color: pink;
  font-size: 25px;
  margin: 0 10px;

}

.w3-button {
  color: black;

}

.w3-button:hover {
  color: pink;
}

.w3-black {
  background-image: radial-gradient(yellow 5%,
      pink 10%,
      black 80%);
  text-align: center;
  position: fixed;
  width: 100%;
}


#drawing-board {
  border: 2px solid black;
  background-color: white;
}

canvas {

  border: 1px solid black;
  cursor: crosshair;
}

#color-buttons {
  margin-top: 10px;
}

.color-button {
  margin-right: 10px;
  padding: 5px 10px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background-color: #ddd;
}

#clear-button {
  margin-top: 10px;
  padding: 10px 20px;
  border: none;
  background-color: #333;
  color: white;
  cursor: pointer;
}

.board {

  text-align: center;
  ;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container>div {
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

.img1 {
  width: 150px;
  height: 150px;
}

.img2 {
  width: 150px;
  height: 150px;
}