* {
  font-family: "JetBrains Mono",monospace;
  padding: 0px;
  margin: 0px;
}
.boxes {

  width: 100%;
  height: 100%;

  padding-top: 30px;
  padding-bottom: 30px;

  display: flex;
  justify-content: center;
  
  margin: auto;
}

.props {

  margin: auto;

  width: 100%;
  height: 100%;

  display: contents;
  justify-content: center;

  color: #36395A;

  font-size: 15px;
  font-weight: 500;
}


@media only screen and (min-width: 768px ) {
  .props {
    font-size: 20px;
  }   
}

#luminosity {

  width: auto;
  height: 50px;
  margin-top: 1px;
  display: flex;
  align-items: center;

  justify-content: center;
}

#coloroptions {

  width: auto;
  height: 50px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: transparent;
}

 #random {
  margin: auto;
  display: flex;

  width: 100px;
  height: 50px;

  align-items: center;
  text-align:center;
  justify-content: center;

  border-radius: 4px;
  border-width: 1px;

  color: #36395A;
  background-color: #fcfcfc;

  box-shadow: #36395A 0 2px 7px ;
  transition: box-shadow .15s,transform .15s;


  font-size: 15px;
  display: flex;

  
}

#random:focus {
  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

#random:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  transform: translateY(-2px);
}

#random:active {
  box-shadow: #D6D6E7 0 3px 7px inset;
  transform: translateY(2px);
}

#finalcolors {

  margin-top: 15px;
  text-align: center;

  color: #36395A;
  font-size: 17px;
  font-weight: 500;

}

#black {
  background-color: #3a3d58;
  border-radius: 0px;

  width: auto;
  height: 50px;
  margin: 0;
  vertical-align: top;
}



body {
  background-color: rgb(248, 245, 252);
}

div {
  text-align:center;
  width: 70px;
  height: 60px;
  margin: 3px;
  
  border-radius: 4px;
}

@media only screen and (min-width: 768px ) {
  div {
    text-align:center;
    width: 90px;
    height: 80px;
    margin: 3px;
   
    border-radius: 4px;
  }
}



h1 {

  position:static;
  padding-top: 80px;

  font-size: 40px;
  font-weight: 500;
  color: #3a3d58; 
  text-align: center;
  
  display: flex;
  justify-content: center;
  font-family: "JetBrains Mono",monospace; 
}