* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #222222;
  min-width: 800px;
}

.paintboard {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-auto-flow: column;
  gap: 10px;
  padding: 10px;
  width: 97vw;
  height: 800px;
  background-color: #1d1d1d;
  border-radius: 10px;
}

.paintboard__tools {
  position: relative;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(15, max-content);
  width: 150px;
  padding: 5px;
  border-radius: 10px 0 0 10px;
  grid-column: 1/2;
  background: #222222;
}

.title {
  width: fill;
  text-align: center;
  font-size: 0.8rem;
  color: #ffffff;
  font-weight: 100;
  padding: 5px;
  margin-left: 2px;
  margin-right: 2px;
  border-top-left-radius: 5px;
  border: 1px solid #13131399;
  background: #3f3f3f99;
  user-select: none;
}

.tools__title {
  grid-column: 1/span 4;
  font-weight: 600;
}

.buttons__tools {
  position: relative;
  width: 41px;
  height: 41px;
  margin: 3px;
  border: none;
  background: #2b2b2b;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  filter: grayscale(100%);
  border: 1px solid transparent;
}
.buttons__tools:hover {
  filter: grayscale(0%);
  border: 1px solid #b4b3b377;
}
.buttons__tools:hover::after {
  position: absolute;
  width: 60px;
  height: 15px;
  top: -20px;
  left: 0px;
  text-align: center;
  padding-top: 1px;
  background-color: #DDDDDDEE;
  z-index: 30;
}

.selectedButtonTools {
  filter: grayscale(0%);
  border: 1px solid #b4b3b377;
}

.tools__button--pencil {
  grid-column: 1/2;
  grid-row: 2/3;
  background-image: url("../icons/pencil.svg");
}
.tools__button--pencil:hover::after {
  content: "Pencil";
}

.tools__button--eraser {
  grid-column: 2/3;
  grid-row: 2/3;
  background-image: url("../icons/eraser.svg");
}
.tools__button--eraser:hover::after {
  content: "Eraser";
}

.tools__button--eraserselection {
  grid-column: 3/4;
  grid-row: 2/3;
  background-image: url("../icons/eraser_selection.svg");
}
.tools__button--eraserselection:hover::after {
  content: "Eraser Selection";
  height: 30px;
  top: -35px;
}

.tools__button--square {
  grid-column: 1/2;
  grid-row: 3/4;
  background-image: url("../icons/square.svg");
}
.tools__button--square:hover::after {
  content: "Rectangle";
}

.tools__button--circle {
  grid-column: 2/3;
  grid-row: 3/4;
  background-image: url("../icons/circle.svg");
}
.tools__button--circle:hover::after {
  content: "Circle";
}

.tools__button--ellipse {
  grid-column: 3/4;
  grid-row: 3/4;
  background-image: url("../icons/ellipse.svg");
}
.tools__button--ellipse:hover::after {
  content: "Ellipse";
}

.tools__button--triangle {
  grid-column: 1/2;
  grid-row: 4/5;
  background-image: url("../icons/triangle.svg");
}
.tools__button--triangle:hover::after {
  content: "Triangle";
}

.tools__button--roundrectangle {
  grid-column: 2/3;
  grid-row: 4/5;
  background-image: url("../icons/round_rectangle.svg");
}
.tools__button--roundrectangle:hover::after {
  content: "Round Rectangle";
  height: 30px;
  top: -35px;
}

.tools__button--line {
  grid-column: 3/4;
  grid-row: 4/5;
  background-image: url("../icons/line.svg");
}
.tools__button--line:hover::after {
  content: "Line";
}

.colors__title {
  grid-column: 1/span 4;
  grid-row: 5/6;
  font-weight: 600;
}

.container__colors_buttons {
  position: absolute;
  width: 150px;
  top: 300px;
  background-color: #2b2b2b;
}

.buttons__colors {
  position: relative;
  width: 41px;
  height: 41px;
  margin: 3px;
  border: none;
  background: #2b2b2b;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  border: 1px solid transparent;
}
.buttons__colors::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  left: calc(50% - 11px);
  top: calc(50% - 11px);
  border: 1px solid #8d8d8d88;
}
.buttons__colors:hover {
  border: 1px solid #b4b3b377;
  background-color: #ffffff33;
}

.selectedButtonColors {
  border: 1px solid #b4b3b377;
  background-color: #ffffff33;
}

.colors__button--white {
  grid-column: 1/2;
  grid-row: 6/7;
}
.colors__button--white::after {
  background-color: #ffffff;
}

.colors__button--black {
  grid-column: 2/3;
  grid-row: 6/7;
}
.colors__button--black::after {
  background-color: #000000;
}

.colors__button--gray {
  grid-column: 3/4;
  grid-row: 6/7;
}
.colors__button--gray::after {
  background-color: #808080;
}

.colors__button--red {
  grid-column: 1/2;
  grid-row: 7/8;
}
.colors__button--red::after {
  background-color: #ff0000;
}

.colors__button--green {
  grid-column: 2/3;
  grid-row: 7/8;
}
.colors__button--green::after {
  background-color: #008000;
}

.colors__button--blue {
  grid-column: 3/4;
  grid-row: 7/8;
}
.colors__button--blue::after {
  background-color: #0000ff;
}

.colors__button--yellow {
  grid-column: 1/2;
  grid-row: 8/9;
}
.colors__button--yellow::after {
  background-color: #ffff00;
}

.colors__button--pink {
  grid-column: 2/3;
  grid-row: 8/9;
}
.colors__button--pink::after {
  background-color: #FFC0CB;
}

.colors__button--orange {
  grid-column: 3/4;
  grid-row: 8/9;
}
.colors__button--orange::after {
  background-color: #FFA500;
}

.button__colorpicker {
  grid-column: 1/span 4;
  grid-row: 9/10;
  width: 96%;
  height: 25px;
  margin: 3px;
  border: none;
  background: #2b2b2b;
  padding: 3px;
  cursor: pointer;
  border: 1px solid transparent;
}

.buttons__settings {
  position: relative;
  width: 41px;
  height: 41px;
  margin: 3px;
  border: none;
  background: #2b2b2b;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  border: 1px solid transparent;
}
.buttons__settings:hover {
  border: 1px solid #b4b3b377;
  background-color: #ffffff33;
}

.settings__button--fill {
  grid-column: 1/2;
  grid-row: 6/7;
}
.settings__button--fill:hover::after {
  position: absolute;
  content: "Fill";
  width: 60px;
  height: 15px;
  top: -20px;
  left: 0px;
  text-align: center;
  padding-top: 1px;
  background-color: #DDDDDDEE;
  z-index: 30;
}

.settings__fillcolor {
  position: absolute;
  width: 24px;
  height: 24px;
  left: calc(50% - 12px);
  top: calc(50% - 12px);
  border: 1px solid #dddada88;
}

.settings__fillnull {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 36px;
  top: 232px;
  border: 1px solid white;
  background-color: #FFFFFF;
}

.settings__button--line {
  grid-column: 2/3;
  grid-row: 6/7;
}

.settings__linecolor {
  position: absolute;
  width: 24px;
  height: 24px;
  left: calc(50% - 12px);
  top: calc(50% - 12px);
  border: 4px solid #8d8d8d88;
}

.settings__linenull {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 86px;
  top: 232px;
  border: 1px solid white;
  background-color: #FFFFFF;
}

.settings__title {
  grid-column: 1/span 4;
  grid-row: 10/11;
  font-weight: 600;
}

.rangecontainer {
  font-size: 0.8rem;
  font-weight: 100;
  text-align: center;
  color: #FFFFFF;
  height: 50px;
  margin: 3px;
  border: none;
  background: #2b2b2b;
}

.eraser__linewidth {
  grid-column: 1/span 3;
  grid-row: 11/12;
}
.eraser__linewidth p:nth-of-type(2) {
  color: #8b8bfc;
  font-size: 0.9rem;
  font-weight: 400;
}

.settings__linewidth {
  grid-column: 1/span 3;
  grid-row: 12/13;
}
.settings__linewidth p:nth-of-type(2) {
  color: #8b8bfc;
  font-size: 0.9rem;
  font-weight: 400;
}

.edits__title {
  grid-column: 1/span 4;
  grid-row: 14/15;
  font-weight: 600;
}

.paintboard__canvas {
  display: grid;
  grid-template-columns: 30px 10px 1fr;
  grid-template-rows: 30px 10px 1fr;
  background: #222222;
  width: 100%;
  grid-column: 2/3;
  padding: 10px;
}

.paintboard__rule_x {
  display: flex;
  align-items: flex-end;
  position: relative;
  width: 100%;
  height: 20px;
  grid-row: 1/2;
  grid-column: 2/4;
  background: #bdbbbb;
  user-select: none;
  pointer-events: none;
}
.paintboard__rule_x div {
  position: relative;
  width: 10px;
  height: 7px;
  background-color: transparent;
  border-right: 1px solid #000000;
}
.paintboard__rule_x div p {
  font-size: 0.55rem;
  position: absolute;
  right: -10px;
  top: -10px;
}
.paintboard__rule_x span {
  position: absolute;
  width: 1px;
  height: 20px;
  top: 0;
  left: 10px;
  background-color: red;
}

.paintboard__rule_y {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 20px;
  height: 100%;
  grid-row: 2/4;
  grid-column: 1/2;
  background: #bdbbbb;
  user-select: none;
  pointer-events: none;
}
.paintboard__rule_y div {
  position: relative;
  width: 7px;
  height: 10px;
  background-color: transparent;
  border-bottom: 1px solid #000000;
}
.paintboard__rule_y div p {
  font-size: 0.55rem;
  position: absolute;
  left: -10px;
  top: 2px;
  rotate: 180deg;
  writing-mode: vertical-rl;
}
.paintboard__rule_y span {
  position: absolute;
  width: 20px;
  height: 1px;
  top: 10;
  left: 0px;
  background-color: red;
}

.container__canvas {
  position: relative;
  width: 100%;
  min-width: 500px;
  height: 720px;
  grid-row: 3/4;
  grid-column: 3/4;
  overflow-x: scroll;
  overflow-y: hidden;
}
.container__canvas::-webkit-scrollbar {
  height: 8px;
}
.container__canvas::-webkit-scrollbar-track {
  background: linear-gradient(145deg, #9e9e9e, #686767);
  border-radius: 4px;
}
.container__canvas::-webkit-scrollbar-thumb {
  background: #252525;
  border-radius: 4px;
}
.container__canvas::-webkit-scrollbar-thumb:hover {
  background: #535353;
}
.container__canvas div {
  position: absolute;
  left: 0;
  top: 0;
  background-color: transparent;
  border: 1px dashed whitesmoke;
  pointer-events: none;
  transform-origin: left top;
}

.canvas {
  position: relative;
  background: #274148;
}