html
{
  background-color: gainsboro;
}

body
{
  margin: 0;
  padding: 0;

  overflow: hidden;
}

.button-container
{
  width: auto;
  display: flex;

  justify-content: space-evenly;

  margin-top: 20px;
}

.color-sample
{
  width: 50px;
  height: 50px;

  min-width: 50px;

  background-color: #ffffff;
  font-family:Arial, Helvetica, sans-serif;

  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.palette-container
{
  display: flex;
  overflow-x: hidden;
  width: auto;

  margin-right: 20px;
}

.slider-container
{
  display: grid;
  grid-template-columns: 0.9fr 1fr 0.3fr;
}

#control-panel-div
{
  position: absolute;
  top: 0;
  left: 0;
  width: fit-content;
  height: fit-content;

  padding: 10px;

  background-color: gainsboro;
  color: black;
  font-family:Arial, Helvetica, sans-serif;

  display: flex;
  flex-direction: column;
}

#selected-color-div
{
  margin-left: 20px;
  margin-right: 20px;
}

#toolbar-div
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;

  background-color: gainsboro;
  color: white;
  font-family:Arial, Helvetica, sans-serif;

  display: flex;
  justify-content: left;
  align-items: center;
}