.color-wheel {
  grid-column: 2;
  grid-row: 1/3;
  display: grid;
}
.squarefield {
  grid-row: 3;
  grid-column: 2/5;
  display: grid;
  grid-template-columns: repeat(5,80px);
  grid-template-rows: repeat(8, 60px);
  margin-top: 50px;
  margin-left: 15%;
  margin-right:15%;
}
.squarefield i {
  grid-row: 8;
  grid-column: 1/6;
  text-align: right;
  font-size: 12pt;
}
.square {
  min-width: 50px;
  min-height: 50px;
  border-radius: 5px;
  background-color: red;
  margin: 10px 5px;
}
.square:nth-of-type(5n-4){
  grid-column: 1;
}
.square:nth-of-type(5n-3){
  grid-column: 2;
}
.square:nth-of-type(5n-2){
  grid-column: 3;
}
.square:nth-of-type(5n-1){
  grid-column: 4;
}
.square:nth-of-type(5n){
  grid-column: 5;
}

.conic-gradient {
  background: conic-gradient( hsl(0,100%,50%), hsl(30,100%,50%),
                              hsl(60,100%,50%), hsl(90,100%,50%),
                              hsl(120,100%,50%),hsl(150,100%,50%),
                              hsl(180,100%,50%),hsl(210,100%,50%),
                              hsl(240,100%,50%),hsl(270,100%,50%),
                              hsl(300,100%,50%),hsl(330,100%,50%),
                              hsl(0,100%,50%));
  width: 200px;
  height: 200px;
  border-radius: 100px;
  grid-row: 1;
  grid-column: 1;
}
.overlay-circle {
  width:130px;
  height:130px;
  margin: 35px;
  border-radius: 100%;
  background-color: rgb(127,127,127);
  z-index: 1;
  grid-row: 1;
  grid-column: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
  grid-column: 3/5;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
}
.slidecontainer p {
  width: 20%;
  padding-left: 5%;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 26px; /* Slider handle height */
  background: rgba(0,0,0,0); /* Green background */
  border: 1px solid black;
  cursor: pointer; /* Cursor on hover */
  transition: .2s;
}


.content {
  padding-left: 10px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: 5fr repeat(3,6fr);
  grid-template-rows: repeat(7, 100px);
}

body{
  font-family: 'Baloo 2', cursive;
  font-size: 14pt;
  background-color: rgb(127,127,127);
}

.color-wheel p {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.sidebar {
    grid-column: 1;
    grid-row: 3/8;
    overflow: hidden;
}

.sidebar .modeButton {
  border: 1px solid black;
}

#CopyText {
  position: absolute;
  width: 60px;
  height: 25px;
  font-size: 14pt;
  background-color: rgb(180,180,180);
  opacity: 0;
  top:0;
  left:0;
  transition: 0.4s;
  padding: 5px;
  border-radius: 5px;

}