.colorTest {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 82vw;
  background-color: black;
  margin: 2vw auto;
  padding: 1vw;
}

.colorTest h2, h3 {
  color: lightgrey;
}

.ct {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1vw;
  padding: 1vw .5vw;
  width: 77vw;
  background-color: grey;
}

.Green {

}

.Blue {

}

.Purple {

}

.sct {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 11vw;
  height: 11vw;
}

.darkestG {background-color: var(--darkestG)}

.darkerG {background-color: var(--darkerG)}

.darkG {background-color: var(--darkG)}

.midG {background-color: var(--midG)}

.lightG {background-color: var(--lightG)}

.lighterG {background-color: var(--lighterG)}

.lightestG {background-color: var(--lightestG)}

.darkestB {background-color: var(--darkestB)}

.darkerB {background-color: var(--darkerB)}

.darkB {background-color: var(--darkB)}

.midB {background-color: var(--midB)}

.lightB {background-color: var(--lightB)}

.lighterB {background-color: var(--lighterB)}

.lightestB {background-color: var(--lightestB)}

.darkestP {background-color: var(--darkestP)}

.darkerP {background-color: var(--darkerP)}

.darkP {background-color: var(--darkP)}

.midP {background-color: var(--midP)}

.lightP {background-color: var(--lightP)}

.lighterP {background-color: var(--lighterP)}

.lightestP {background-color: var(--lightestP)}

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

.terminalTest {
  background-color: var(--darkestP);
  padding: .5vw;
  margin: auto;
}