body {
  background-color: black;
}

.main {
  height: 99vh;
  width: 99vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.selector {
  height: 90vh;
  width: 40vh;
}

#sizeSelector {
  height: 20%;
  width: 100%;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 10vh;
}

.sizeChange:hover, .colour:hover {
  cursor: pointer;
}

#colourSelector {
  height: 80%;
  width: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.frame {
  height: 90vh;
  min-width: 90vh;
  background-color: black;
}

#verticalFrame {
  position: absolute;
  display: flex;
  flex-direction: row;
}

#spotFrame {
  position: absolute;
}

.line {
  position: relative;
  height: 1vh;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.column {
  position: relative;
  height: 100%;
  width: 1vh;
}

.spot {
  height: 2vh;
  width: 2vh;
  border-radius: 50%;
  background-color: white;
  position: relative;
}

.sizeFrame {
  margin: 3vh;
  height: 5vh;
  width: 5vh;
}

.colour {
  min-height: 4vh;
  min-width: 4vh;
  margin: 1vh;
}