Removed boilerplate. Set css breakpoints.

src/App.module.css

@@ -1,8 +1,35 @@
-.card {
-  padding: 2em;
-  --main-text-color: lightblue;
+.appContainer {
+  height: 100vh;
+  width: 100%;
 }
 
-.test {
-  color: var(--main-text-color);
+.mainContent {
+}
+
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+  .appContainer {
+    max-width: 1200px;
+    margin: 0 auto;
+    background-color: blue;
+  }
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+  .appContainer {
+    background-color: yellow;
+  }
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+  .appContainer {
+    background-color: red;
+  }
 }