body{
  padding: 0px;
  margin: 0px;
  height: 100vh;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}
*{
margin: 0px;
padding: 0px;
}

section{
min-height: 58.4rem;
min-width: 99.9%;
/* border: 1px solid rebeccapurple; */
}

section>div.row{
/* border: 2px solid red; */
height: 58.55rem;
/* width: ; */
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
/* col-1 starts here */
section>div.row>.col-1{
/* border: 2px solid blue; */
width: 65%;
height: 99%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
gap: 20px;
}
/* col-1 ends here */

/* div.nav starts here */
section>div.row>.col-1>.nav{
display: flex;
flex-flow: row nowrap;
/* border: 1px solid black; */
width: 20rem;
height: 5rem;
justify-content: space-around;
align-items: center;
}
section>div.row>.col-1>.nav>button{
width: 60px;
height: 60px;
border: none;
border-radius: 30px;
}
/* div.nav ends here */

/* div.display-wrapper starts here */
section>div.row>.col-1>div.display-wrapper{
/* border: 2px solid greenyellow; */
width: 44em;
height: 52em;
display: flex;
justify-content: center;
align-items: center;
}
/* div.display-wrapper ends here */

/* div#display-RGB starts here */
section>div.row>.col-1>div.display-wrapper>#display-RGB{
/* border: 2px solid #2fff86; */
width: 40em;
height: 50em;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
align-items: center;

}
/* div.display-RGB ends here */

/* div.color-view-wrapper starts here*/
section>div.row>.col-1>div.display-wrapper>#display-RGB>div.color-view-wrapper{
border: 1px solid orangered;
height: 9em;
width: 20em;
display: flex;
justify-content: center;
align-items: center;
}
/* div.color-view-wrapper ends here*/

/* div-selection-view start here */
section>div.row>.col-1>div.display-wrapper>#display-RGB>div.color-view-wrapper>div.color-selection-view{
/* border: 2px solid forestgreen; */
height: 7em;
width: 18em;
}
/* div-selection-view ends here */

/* div.set-color-control-RGB starts here */
section>div.row>.col-1>div.display-wrapper>#display-RGB>div.set-color-control-RGB{
/* border: 2px solid chocolate; */
height: 15em;
width: 25em;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
align-items: center;
text-align: center;
/* display: none; */
}
section>div.row>.col-1>div.display-wrapper>#display-RGB>div.set-color-control-RGB>div.color-red-sec,div.color-green-sec,div.color-blue-sec{
/* border: 2px solid #2fff86; */
width: 22rem;
height: 4rem;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-content: center;
font-size: 20px;
}
section>div.row>.col-1>div.display-wrapper>#display-RGB>div.set-color-control-RGB input{
width: 21rem;
align-self: center;
}
/* div.set-color-control-RGB ends here */

/* div.set-color-control-HSL starts here */
section>div.row>.col-1>div.display-wrapper>#display-RGB>div.set-color-control-HSL{
  /* border: 2px solid chocolate; */
  height: 15em;
  width: 25em;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  display: none;
}

section>div.row>.col-1>div.display-wrapper>#display-RGB>div.set-color-control-HSL>div.color-red-sec,div.color-green-sec,div.color-blue-sec{
  /* border: 2px solid #2fff86; */
  width: 22rem;
  height: 4rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: center;
  font-size: 20px;
  }

/* div.set-color-control-HSL starts here */

/* div.set-hex-color-control starts here */
section>div.row>.col-1>div.display-wrapper div.set-hex-color-control{
/* border: 2px solid darkmagenta; */
height: 9em;
width: 15em;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
display: none;
}

div.set-hex-color-control>p{
font-size: 19px;
}

section>div.row>.col-1>div.display-wrapper div.set-hex-color-control>input{
width: 15em;
height: 8em;

}
/* div.set-hex-color-control ends here */

/* div.opacity-section  starts here */
div.opacity-section{
/* border: 2px solid #1203e7; */
height: 3em;
width: 20em;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
}
div.opacity-section>input{
width: 15em;
}
/* div.opacity-section  ends here */
/* div.color-code-section starts here */
div.color-code-section{
/* border: 2px solid wheat; */
height: 5em;
width: 20em;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
}
div.color-code-section>div#color-code-value{
border: 2px solid red;
width: 12em;
height: 3em;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
}
div.color-code-section>button{
width: 8em;
height: 4em;
}
/* div.color-code-section ends here */

/* div.color-field-section starts here */
div.color-field-section{
/* border: 2px solid darkorange; */
height: 10em;
width: 37em;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
}
div.color-field-section>div.color-field{
/* border: 2px solid #ff00d4; */
background-color: rgb(158, 156, 157);
color: white;
height: 8em;
width: 8em;
display: flex;
flex-flow:column nowrap;
justify-content: space-around;
align-items: center;

}
div.color-field-section>div.color-field>.color-view{
/* border: 2px solid #ff00d4; */
height: 6em;
width: 6em;
background-color: white;
}
div.color-field-section>div.color-field>p{
  font-size: 12px;
}
/* div.color-field-section ends here */

/* col-2 starts here */
section>div.row>.col-2{
/* border: 2px solid green; */
background-image: url("img/side_bg2.jpg");
background-repeat: no-repeat;
background-size: 580px;
background-position: right;
width: 30%;
height: 100%;
/* display:none !important; */

}

/* ============================================ */
/* DeskTop version starts here */
@media screen and (max-width: 800px) {
body{
  padding: 0px;
  margin: 0px;
  height: 100vh;
  width: 99%;
  /* background-color: #e0e0e0; */
}
*{
margin: 0px;
padding: 0px;
}

section{
  min-height: 58.4rem;
  min-width: 99.9%;
  /* border: 1px solid rebeccapurple; */
  }
  
  section>div.row{
  /* border: 2px solid red; */
  height: 100%;
  /* width: ; */
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  }
  /* col-1 starts here */
  section>div.row>.col-1{
  /* border: 2px solid blue; */
  width: 100%;
  height: 99%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  }
  /* col-1 ends here */
  
  /* div.nav starts here */
  section>div.row>.col-1>.nav{
  display: flex;
  flex-flow: row nowrap;
  /* border: 1px solid black; */
  width: 18rem;
  height: 5rem;
  justify-content: space-around;
  align-items: center;
  }
  section>div.row>.col-1>.nav>button{
  width: 60px;
  height: 60px;
  border: 2px solid #005cc8;
  border-radius: 30px;
  }
  /* div.nav ends here */
  
  /* div.display-wrapper starts here */
  section>div.row>.col-1>div.display-wrapper{
  /* border: 2px solid rgb(6, 235, 243); */
  width: 99%;
  height: 53em;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  /* div.display-wrapper ends here */
  
  /* div#display-RGB starts here */
  section>div.row>.col-1>div.display-wrapper>#display-RGB{
  /* border: 2px solid #2fff86; */
  width: 97%;
  height: 52em;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  
  }
  /* div.display-RGB ends here */
  
  /* div.color-view-wrapper starts here*/
  section>div.row>.col-1>div.display-wrapper>#display-RGB>div.color-view-wrapper{
  border: 2px solid orangered;
  height: 5em;
  width: 14em;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  /* div.color-view-wrapper ends here*/
  
  /* div-selection-view start here */
  section>div.row>.col-1>div.display-wrapper>#display-RGB>div.color-view-wrapper>div.color-selection-view{
  /* border: 2px solid forestgreen; */
  height: 4em;
  width: 13em;
  }
  /* div-selection-view ends here */
  
  /* div.set-color-control-RGB starts here */
  section>div.row>.col-1>div.display-wrapper>#display-RGB>div.set-color-control-RGB{
  /* border: 2px solid chocolate; */
  height: 15em;
  width: 18em;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  /* display: none; */
  }
  section>div.row>.col-1>div.display-wrapper>#display-RGB>div.set-color-control-RGB>div.color-red-sec,div.color-green-sec,div.color-blue-sec{
  /* border: 2px solid #2fff86; */
  width: 16rem;
  height: 3rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: center;
  font-size: 15px;
  }
  section>div.row>.col-1>div.display-wrapper>#display-RGB>div.set-color-control-RGB input{
  width: 16rem;
  align-self: center;
  }
  /* div.set-color-control-RGB ends here */
  
  /* div.set-color-control-HSL starts here */
  section>div.row>.col-1>div.display-wrapper>#display-RGB>div.set-color-control-HSL{
    /* border: 2px solid chocolate; */
    height: 15em;
    width: 18em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    display: none;
  }
  
  section>div.row>.col-1>div.display-wrapper>#display-RGB>div.set-color-control-HSL>div.color-red-sec,div.color-green-sec,div.color-blue-sec{
    /* border: 2px solid #2fff86; */
    width: 16rem;
    height: 3rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-content: center;
    font-size: 15px;
    }
  
  /* div.set-color-control-HSL starts here */
  
  /* div.set-hex-color-control starts here */
  section>div.row>.col-1>div.display-wrapper div.set-hex-color-control{
  /* border: 2px solid darkmagenta; */
  height: 9em;
  width: 15em;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  display: none;
  }
  
  div.set-hex-color-control>p{
  font-size:15px;
  }
  
  section>div.row>.col-1>div.display-wrapper div.set-hex-color-control>input{
  width: 15em;
  height: 8em;
  
  }
  /* div.set-hex-color-control ends here */
  
  /* div.opacity-section  starts here */
  div.opacity-section{
  /* border: 2px solid #1203e7; */
  height: 3em;
  width: 18em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  }
  div.opacity-section>input{
  width: 13em;
  }
  /* div.opacity-section  ends here */
  /* div.color-code-section starts here */
  div.color-code-section{
  /* border: 2px solid wheat; */
  height: 5em;
  width: 18em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  }
  div.color-code-section>div#color-code-value{
  border: 2px solid red;
  width: 12em;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  
  }
  div.color-code-section>button{
  width: 6em;
  height: 4em;
  }
  /* div.color-code-section ends here */
  
  /* div.color-field-section starts here */
  div.color-field-section{
  /* border: 2px solid darkorange; */
  height: 20em;
  width: 18em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}
div.color-field-section>div.color-field{
  /* border: 2px solid #ff00d4; */
  background-color: dimgrey;
  color: white;
  height: 7em;
  width: 8em;
  display: flex;
  flex-flow:column nowrap;
  justify-content: space-around;
  align-items: center;

  }
  div.color-field-section>div.color-field>.color-view{
  /* border: 2px solid #ff00d4; */
  height: 4em;
  width: 6em;
  background-color: white;
  }
  /* div.color-field-section ends here */
/* col-2 starts here */
section>div.row>.col-2{
border: 2px solid green;
background-image: url("img/side_bg2.jpg");
background-repeat: no-repeat;
background-size: 580px;
background-position: right;
width: 30%;
display:none !important;

}

}