@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
/* Body */
body {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #181818;
  gap: 30px;
}

#header {
  font-size: 75px;
  font-weight: bolder;
  color: rgb(62, 166, 255);
  font-family: "Open Sans";
}
/* Container0 */
.container0 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  height: 70px;
}
/* Reset  || Clear */
.blank {
  background-color: #2c2b2b;
  flex-basis: 300px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.reset,
.clear {
  font-weight: bolder;
  font-size: 25px;
  padding: 5px 30px 5px 30px;
  border-radius: 10%;
}
.clear {
  background-color: rgb(62, 166, 255);
}
.reset {
  background-color: rgb(211, 75, 75);
}

/* Background color, pen color */

.default {
  background-color: #2c2b2b;
  flex-basis: 700px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.pen-bg-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}

.color-picker,
.grid-size {
  display: flex;
  align-items: center;
  gap: 10px;
}

.size-adjust {
  display: flex;
  gap: 0px;
  flex-direction: column;
  align-items: center;
}
.size-adjust p {
  margin: 0;
  color: #ffffff;
  font-weight: 600;
}

label {
  color: white;
  font-weight: bold;
  font-family: sans-serif;
}

/* Container  */
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 30px;
}

/* Function */
.toggle {
  background-color: #2c2b2b;
  width: 300px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.container .toggle {
  height: 700px;
  flex-direction: column;
}

#draw,
#fill {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.toggle .title {
  color: rgb(62, 166, 255);
  font-weight: bolder;
  text-align: center;
  font-size: 50px;
}

button,
.grid-line {
  font-size: 20px;
  padding: 5px 40px 5px 40px;
  border: 0;
  border-radius: 10px;
  font-family: sans-serif;
}

.btn-on {
  background-color: rgb(62, 166, 255);
}
/* Grid */
.grid {
  width: 700px;
  height: 700px;
  /* New to learn (grid)*/
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.square {
  box-sizing: border-box;
}

.square-border {
  border-bottom: 1px rgb(156, 156, 156) solid;
  border-right: 1px rgb(156, 156, 156) solid;
}