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

#header {
  font-size: 11px;
  font-weight: bold;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}
/* Container0 */
.container0 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 15px;
}
/* Reset  || Clear */
.blank {
  flex-basis: 100px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  
}

.reset,
.clear {
  font-weight: bolder;
  font-size: 11px;
  padding: 5px 30px 5px 30px;
  border-radius: 10%;
}
.clear {
  background-color: #0066CC ;
}
.reset {
  background-color: #0066FF;
}

/* Background color, pen color */

.default {
  background-color: transparent;
  flex-basis: 750px;
  display: flex;
  justify-content: space-around;
  align-items: center;
    opacity: 1.0;
	z-index:100;
}

.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: aqua;
  font-weight: 400;
}

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

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

/* Function */
.toggle {
  background-color:  chocolate;
  width: 200px;
  display: flex;
  align-items: center;
}
.container .toggle {
  height: 220px;
  flex-direction: column;
  top:-10px;
}

#draw,
#fill {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toggle .title {
  color: yellow;
  font-weight: bolder;
  text-align: center;
  font-size: 11px;
}

button,
.grid-line {
  font-size: 11px;
  padding: 2px 30px 2px 30px;
  border: 0;
  border-radius: 5px;
  font-family: sans-serif;

}

.btn-on {
  background-color: #FFFF00;
}
/* Grid */
.grid {
  width: 600px;
  height: 400px;
  /* 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;
}