@import "reset.css";

/* my css */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: lightgray;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  list-style: none;
  margin-bottom: 30px;
}

.canvas {
  background-color: white;
  width: 450px;
  height: 450px;
  margin: 30px 0;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

input {
  width: 100px;
}

button {
  font-size: 20px;
  padding: 10px;
  /* font-weight: bolder; */
  /* background-color: white; */
  border: none;
  color: gray;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

#jsRange {
  margin-left: 10px;
  color: black;
  background-color: aqua;
}

.controlBtn.clicked {
  color: black;
}

#jsSaveBtn {
  margin-left: 50px;
  color: white;
  background-color: #307ab0;
  border-radius: 5px;
}
#jsSaveBtn:active {
  color: black;
}
.controls__tools,
.controls__figures {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.controls__tools span,
.controls__figures span {
  font-weight: bolder;
}

.controlBtn {
  margin-left: 10px;
}

#controls__images {
  width: 100px;
}

.controls__image {
  display: none;
}

.controls__image.showing {
  display: block;
}

.controls__colors {
  display: flex;
  flex-direction: row;
}

.controls__basic_color {
  margin-left: 20px;
  display: flex;
  flex-direction: row;
}

.controls__color {
  border: 3px solid white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.controls__current_color {
  border: 3px solid black;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.brush_icon {
  position: relative;
  font-size: 20px;
  top: -5px;
  left: 19px;
  border-radius: 10px;
  border: 3px solid black;
  background-color: white;
}
#jsFillBtn {
}