/* css */

.monoInstructions {
  border-radius: 100px;
  border: 3px solid #4CCCE9;
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1rem 2rem;
}

.monochrome {
  border-radius: 100px;
  border: 3px solid #C04CE9;
  width: 100%;
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding: 1rem;
}

.monosquare {
  width: 100%;
  height: 13rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.roundStart {
  border-radius: 60px 0px 0px 60px;
}

.roundEnd {
  border-radius: 0px 60px 60px 0px;
}

.monohex {
  padding-top: 10.5rem;
  color: white;
  font-size: 60%;
}

.pst {
  font-size: 95%;
}


/* red */

.red1 {
  background-color: #ffc8c8;
}

.red2 {
  background-color: #ff9696;
}

.red3 {
  background-color: #ff6464;
}

.red4 {
  background-color: #ff3232;
}

.red5 {
  background-color: #ff0000;
}

.red6 {
  background-color: #cd0000;
}

.red7 {
  background-color: #9b0000;
}

.red8 {
  background-color: #690000;
}

.red9 {
  background-color: #370000;
}

.red10 {
  background-color: #1e0000;
}

/* orange */

.orange1 {
  background-color: #ffd7b4;
}

.orange2 {
  background-color: #ffc89b;
}

.orange3 {
  background-color: #ffb987;
}

.orange4 {
  background-color: #ff9c55;
}

.orange5 {
  background-color: #ff8732;
}

.orange6 {
  background-color: #ff6a00;
}

.orange7 {
  background-color: #c85700;
}

.orange8 {
  background-color: #913c00;
}

.orange9 {
  background-color: #5a2800;
}

.orange10 {
  background-color: #321600;
}

/* yellow */

.yellow1 {
  background-color: #ffffc8;
}

.yellow2 {
  background-color: #ffff96;
}

.yellow3 {
  background-color: #ffff64;
}

.yellow4 {
  background-color: #ffff00;
}

.yellow5 {
  background-color: #e6e600;
}

.yellow6 {
  background-color: #cdcd00;
}

.yellow7 {
  background-color: #9b9b00;
}

.yellow8 {
  background-color: #696900;
}

.yellow9 {
  background-color: #373700;
}

.yellow10 {
  background-color: #191900;
}

/* green */

.green1 {
  background-color: #c8ffc8;
}

.green2 {
  background-color: #96ff96;
}

.green3 {
  background-color: #64ff64;
}

.green4 {
  background-color: #00ff00;
}

.green5 {
  background-color: #00e100;
}

.green6 {
  background-color: #00cd00;
}

.green7 {
  background-color: #009b00;
}

.green8 {
  background-color: #006900;
}

.green9 {
  background-color: #003700;
}

.green10 {
  background-color: #001900;
}

/* light blue */

.blue1 {
  background-color: #c8ffff;
}

.blue2 {
  background-color: #96ffff;
}

.blue3 {
  background-color: #64ffff;
}

.blue4 {
  background-color: #00ffff;
}

.blue5 {
  background-color: #00e1e1;
}

.blue6 {
  background-color: #00cdcd;
}

.blue7 {
  background-color: #009b9b;
}

.blue8 {
  background-color: #006969;
}

.blue9 {
  background-color: #003737;
}

.blue10 {
  background-color: #002323;
}

/* dark blue */

.dblue1 {
  background-color: #c8e6ff;
}

.dblue2 {
  background-color: #96b4ff;
}

.dblue3 {
  background-color: #6482ff;
}

.dblue4 {
  background-color: #004bff;
}

.dblue5 {
  background-color: #0000ff;
}

.dblue6 {
  background-color: #0000cd;
}

.dblue7 {
  background-color: #00009b;
}

.dblue8 {
  background-color: #000069;
}

.dblue9 {
  background-color: #000037;
}

.dblue10 {
  background-color: #000023;
}

/* purple */

.purple1 {
  background-color: #c89bff;
}

.purple2 {
  background-color: #b978ff;
}

.purple3 {
  background-color: #a455ff;
}

.purple4 {
  background-color: #9532ff;
}

.purple5 {
  background-color: #8400ff;
}

.purple6 {
  background-color: #6300cd;
}

.purple7 {
  background-color: #4b009b;
}

.purple8 {
  background-color: #37006e;
}

.purple9 {
  background-color: #23004b;
}

.purple10 {
  background-color: #0f0037;
}

/* pink */

.pink1 {
  background-color: #ffc8ff;
}

.pink2 {
  background-color: #ff96ff;
}

.pink3 {
  background-color: #ff64ff;
}

.pink4 {
  background-color: #ff0aff;
}

.pink5 {
  background-color: #e100e1;
}

.pink6 {
  background-color: #cd00cd;
}

.pink7 {
  background-color: #9b009b;
}

.pink8 {
  background-color: #690069;
}

.pink9 {
  background-color: #370037;
}

.pink10 {
  background-color: #230023;
}

/* brown */

.brown1 {
  background-color: #ebc89b;
}

.brown2 {
  background-color: #d7af87;
}

.brown3 {
  background-color: #b99b78;
}

.brown4 {
  background-color: #a08264;
}

.brown5 {
  background-color: #826450;
}

.brown6 {
  background-color: #695041;
}

.brown7 {
  background-color: #503c2d;
}

.brown8 {
  background-color: #3c2d1e;
}

.brown9 {
  background-color: #302417;
}

.brown10 {
  background-color: #23190f;
}

/* gray */

.gray1 {
  background-color: #f5f5f5;
}

.gray2 {
  background-color: #e1e1e1;
}

.gray3 {
  background-color: #cdcdcd;
}

.gray4 {
  background-color: #afafaf;
}

.gray5 {
  background-color: #9b9b9b;
}

.gray6 {
  background-color: #7d7d7d;
}

.gray7 {
  background-color: #696969;
}

.gray8 {
  background-color: #4b4b4b;
}

.gray9 {
  background-color: #373737;
}

.gray10 {
  background-color: #191919;
}


/* primary, secondary, tertiary */

.primary1 {
  background-color: #ff0000;
}

.primary2 {
  background-color: #ffff00;
}

.primary3 {
  background-color: #0000ff;
}

.secondary1 {
  background-color: #FF6600;
}

.secondary2 {
  background-color: #00ff00;
}

.secondary3 {
  background-color: #6600FF;
}

.tertiary1 {
  background-color: #ffbf00;
}

.tertiary2 {
  background-color: #e34234;
}

.tertiary3 {
  background-color: #ff00ff;
}

.tertiary4 {
  background-color: #8f00ff;
}

.tertiary5 {
  background-color: #008080;
}

.tertiary6 {
  background-color: #7fff00;
}

/* pastel */

.pastel1 {
  background-color: #f5a0a0;
}

.pastel2 {
  background-color: #f5c8a0;
}

.pastel3 {
  background-color: #f5eba0;
}

.pastel4 {
  background-color: #baf5a0;
}

.pastel5 {
  background-color: #a0ebf5;
}

.pastel6 {
  background-color: #afc8f5;
}

.pastel7 {
  background-color: #c7aff5;
}

.pastel8 {
  background-color: #f5b4f5;
}

/* jewel */

.jewel1 {
  background-color: #82051e;
}

.jewel2 {
  background-color: #ebb900;
}

.jewel3 {
  background-color: #05504b;
}

.jewel4 {
  background-color: #3c7373;
}

.jewel5 {
  background-color: #053c69;
}

.jewel6 {
  background-color: #410a55;
}

.jewel7 {
  background-color: #69054b;
}

.jewel8 {
  background-color: #8c4678;
}

/* neon */

.neon1 {
  background-color: #ff5e36;
}

.neon2 {
  background-color: #eaff28;
}

.neon3 {
  background-color: #6fff4b;
}

.neon4 {
  background-color: #3cffd8;
}

.neon5 {
  background-color: #002fff;
}

.neon6 {
  background-color: #9b2dff;
}

.neon7 {
  background-color: #ff4b9c;
}

.neon8 {
  background-color: #ff4b4b;
}