body {
  font-family: sans-serif;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 98vh;
}

.colours {
  height: 81.6vh;
  width: 120vh;
  min-width: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.colourSpace {

}

.colour {
  height: 90%;
  width: 90%;
  transition: transform 0.1s ease;
  box-sizing: border-box;
}

.colour:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.info {
  margin-left: 3vw;
  height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hoverInfo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.clickInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#hoveredColour, #clickedColour {
  height: 10vh;
  width: 10vh;
}

#hoveredRGB, #clickedRGB {
  margin-bottom: 0;
}