body {
  background-color: #111010;
}

.lesson-container {
  background-color: #2E2B2B;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}

.lesson-title {
  font-size: 35px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: bold;
  text-decoration: underline;
  color: hsl(212, 81%, 53%);
}


.container {
  width: 100%;
  height: auto;
  background-color: #2E2B2B;
  margin-top: 55px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-flow: wrap;
}

.container-2 {
  width: 100%;
  height: auto;
  background-color: #2E2B2B;
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-flow: wrap;
}

.red-box {
  width: 20%;
  height: 170px;
  background-color: red;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.black-box {
  width: 20%;
  height: 170px;
  background-color: black;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.gray-box {
  width: 20%;
  height: 170px;
  background-color: gray;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.white-box {
  width: 20%;
  height: 170px;
  background-color: white;
  margin: 15px;
  color: black;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.pink-box {
  width: 20%;
  height: 170px;
  background-color: pink;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.brown-box {
  width: 20%;
  height: 170px;
  background-color: brown;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.gold-box {
  width: 20%;
  height: 170px;
  background-color: gold;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.silver-box {
  width: 20%;
  height: 170px;
  background-color: silver;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.crimson-box {
  width: 20%;
  height: 170px;
  background-color: crimson;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.olive-box {
  width: 20%;
  height: 170px;
  background-color: olive;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.violet-box {
  width: 20%;
  height: 170px;
  background-color: violet;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.magenta-box {
  width: 20%;
  height: 170px;
  background-color: magenta;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.cyan-box {
  width: 20%;
  height: 170px;
  background-color: cyan;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.beige-box {
  width: 20%;
  height: 170px;
  background-color: beige;
  margin: 15px;
  color: black;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.maroon-box {
  width: 20%;
  height: 170px;
  background-color: maroon;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.blue-box {
  width: 20%;
  height: 170px;
  background-color: blue;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  font-family:Arial, Helvetica, sans-serif ;
}

.yellow-box {
  width: 20%;
  height: 170px;
  background-color: yellow;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  font-family:Arial, Helvetica, sans-serif;
}

.purple-box {
  width: 20%;
  height: 170px;
  background-color: purple;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  font-family:Arial, Helvetica, sans-serif;
}

.orange-box {
  width: 20%;
  height: 170px;
  background-color: orange;
  margin: 15px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif;
}

.green-box {
  width: 20%;
  height: 170px;
  background-color: green;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.topaz-box {
  width: 20%;
  height: 170px;
  background-color: #ffc87c;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.indigo-box {
  width: 20%;
  height: 170px;
  background-color: indigo;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.coral-box {
  width: 20%;
  height: 170px;
  background-color: coral;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.teal-box {
  width: 20%;
  height: 170px;
  background-color: teal;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.ivory-box {
  width: 20%;
  height: 170px;
  background-color: ivory;
  margin: 15px;
  color: black;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.plum-box {
  width: 20%;
  height: 170px;
  background-color: plum;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.salmon-box {
  width: 20%;
  height: 170px;
  background-color: salmon;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.peach-box {
  width: 20%;
  height: 170px;
  background-color: #ffb07c;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.tangerine-box {
  width: 20%;
  height: 170px;
  background-color: #f28500;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.copper-box {
  width: 20%;
  height: 170px;
  background-color: #c87533;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.emerald-box {
  width: 20%;
  height: 170px;
  background-color: #50cb78;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.sepia-box {
  width: 20%;
  height: 170px;
  background-color: #704214;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.rubyRed-box {
  width: 20%;
  height: 170px;
  background-color: #9b111e;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.sand-box {
  width: 20%;
  height: 170px;
  background-color: #d6b588;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.taupe-box {
  width: 20%;
  height: 170px;
  background-color: #54463a;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.platinum-box {
  width: 20%;
  height: 170px;
  background-color: #d9d9d9;
  margin: 15px;
  color: black;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.sapphire-box {
  width: 20%;
  height: 170px;
  background-color: #0f52ba;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.mint-box {
  width: 20%;
  height: 170px;
  background-color: #adebb3;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.bronze-box {
  width: 20%;
  height: 170px;
  background-color: #ceb946;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.rose-box {
  width: 20%;
  height: 170px;
  background-color: #ff1080;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.mauve-box {
  width: 20%;
  height: 170px;
  background-color: #e0afff;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

.mahogany-box {
  width: 20%;
  height: 170px;
  background-color: #cc4000;
  margin: 15px;
  color: white;
  text-align: center;
  font-size: 25px;
  font-family:Arial, Helvetica, sans-serif ;
  font-weight: bold;
}

@media (max-width: 320px) {
   .green-box, .orange-box, .purple-box, .yellow-box, .blue-box,
    .maroon-box, .beige-box,  .cyan-box, .magenta-box, .violet-box,
    .olive-box, .crimson-box, .silver-box, .gold-box, .brown-box,
    .pink-box, .white-box, .gray-box, .black-box, .red-box, .topaz-box, .indigo-box, .coral-box, .teal-box, .ivory-box, .plum-box, .salmon-box, .peach-box, .tangerine-box, .copper-box, .emerald-box, .sepia-box, .rubyRed-box, .sand-box, .taupe-box, .platinum-box, .sapphire-box, .mint-box, .bronze-box, .rose-box, .mauve-box, .mahogany-box{
    width: 35%;
    height: 80px;
    font-size: 15px;
  } 
  
  .lesson-title {
    font-size: 23px;
  }
}


@media (max-width: 700px) {
   .green-box, .orange-box, .purple-box, .yellow-box, .blue-box,
    .maroon-box, .beige-box,  .cyan-box, .magenta-box, .violet-box,
    .olive-box, .crimson-box, .silver-box, .gold-box, .brown-box,
    .pink-box, .white-box, .gray-box, .black-box, .red-box, .topaz-box, .indigo-box, .coral-box, .teal-box, .ivory-box, .plum-box, .salmon-box, .peach-box, .tangerine-box, .copper-box, .emerald-box, .sepia-box, .rubyRed-box, .sand-box, .taupe-box, .platinum-box, .sapphire-box, .mint-box, .bronze-box, .rose-box, .mauve-box, .mahogany-box{
    width: 35%;
    height: 80px;
    font-size: 15px;
  } 
  
  .lesson-title {
    font-size: 23px;
  }
}
              
@media (max-width: 1024px) {
   .green-box, .orange-box, .purple-box, .yellow-box, .blue-box,
    .maroon-box, .beige-box,  .cyan-box, .magenta-box, .violet-box,
    .olive-box, .crimson-box, .silver-box, .gold-box, .brown-box,
    .pink-box, .white-box, .gray-box, .black-box, .red-box, .topaz-box, .indigo-box, .coral-box, .teal-box, .ivory-box, .plum-box, .salmon-box, .peach-box, .tangerine-box, .copper-box, .emerald-box, .sepia-box, .rubyRed-box, .sand-box, .taupe-box, .platinum-box, .sapphire-box, .mint-box, .bronze-box, .rose-box, .mauve-box, .mahogany-box{
      width: 35%;
      height: 80px;
      font-size: 15px;
    } 
    
    .lesson-title {
      font-size: 23px;
    }
}