/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

:root {
  --doc-height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4A98F7;
  height: 100vh;
}

.container {
  gap: 10px;
  padding: 10px;
  width: 100%;
  display: flex;
  user-select: none;
  height: 100vh;
}

section {
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.tools-board {
  width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 22px 0;
}

.tools-board .row {
  margin-bottom: 20px;
  width: 100%;
}

.row .title {
  color: #333;
  font-size: 1rem;
}

.row .options {
  list-style: none;
  margin: 10px 0 0 0;
}

.row .options .option {
  display: flex;
  user-select: none;
  cursor: pointer;
  align-items: center;
  margin-bottom: 10px;
}

.row .options .option .icon {
  font-size: 1.3rem;
  padding-left: 3px;
}

.row .options .option .name {
  padding-left: 8px;
}

.option :where(span, label) {
  color: #5A6168;
  cursor: pointer;
}

.option:is(:hover, .active) :where(span, label) {
  color: #4A98F7;
}

.option input[type="checkbox"] {
  height: 15px;
  width: 15px;
  margin: 0 10px 0 5px;
  cursor: pointer;
}

input[type="checkbox"]:checked~label {
  color: #4A98F7;
}


.option #brush-size-slider{
  width: 100%;
  height: 5px;
  margin-top: 10px;
}

.colors-tool{
  margin-top: 25px;
}

.colors{
  display: flex;
  justify-content: space-between;
}

.colors .option{
  position: relative;
  height: 20px;
  width: 20px;
  margin-top: 3px;
  border-radius: 50%;
}


.colors .option:nth-child(1){
  background-color: #fff;
  border: 1px solid #bfbfbf;
}

.colors .option:nth-child(2){
  background-color: #000;
}

.colors .option:nth-child(3){
  background-color: #f80202;
}

.colors .option:nth-child(4){
  background-color: #03f51c;
}

.colors .option:nth-child(5){
  background-color: #f3434f;
  background-image: linear-gradient(#3c3cff,#f3434f);
}

.colors .option.active:nth-child(5){
    background-image: none;
}

.colors .option.selected:before{
  content: "";
  top: 50%;
  left: 50%;
  height: 12px;
  width: 12px;
  background: inherit;
  position: absolute;
  border: 2px solid #fff;
  border-radius: inherit;
  transform: translate(-48%,-48%);
}

.colors .option:first-child.selected:before{
  border-color: #ccc;
}

.colors #color-picker{
  opacity: 0;
  cursor: pointer;
}

/* Designing the buttons together */

.buttons button{
width: 100%;
color: #fff;
border: none;
outline: none;
padding: 7px 0;
font-size: 1rem;
background: none;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 13px;
transition: all 0.3s ease;
}

.buttons button .icon {
  color: #fff;
  font-size: 1.2rem;
  transition: 0.2s ease;
}


/* Designing the clear canvas button */
.buttons .clear-canvas{
  color: #bfbfbf;
  border: 1px solid #bfbfbf;
}

.buttons .clear-canvas .icon{
  color: #bfbfbf;
  padding: 10px;
}

.buttons .clear-canvas:hover{
  color: #fff;
  background: #bfbfbf;
}
.buttons .clear-canvas:hover .icon{
  color: #fff
}


/* Designing the Save image button */
.buttons .save-img{
  color: #4A98F7;
  border: 1px solid #4A98F7;
}

.buttons .save-img .icon{
  color: #4A98F7;
  padding: 10px;
}

.buttons .save-img:hover{
  color: #fff;
  background: #4A98F7;
}
.buttons .save-img:hover .icon{
  color: #fff
}

.drawing-board{
  flex: 1;
  overflow: hidden;
}

.drawing-board canvas{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}