Add extra style sheet for rubric.

routes.js

@@ -77,4 +77,5 @@ module.exports = function(app){
 
     //2u RUBRICS
     app.get("/2u/rubrics/:num", (req, res)=>res.sendFile(`${__dirname}/rubrics/mod${req.params.num}.html`));
+    app.get("/2u/style", (req, res)=>res.sendFile(`${__dirname}/rubrics/style.css`));
 }

rubrics/mod1.html

@@ -8,6 +8,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
+    <link href="/2u/style" rel="stylesheet"/>
     <title>Module 1 HTML & CSS Challenge Rubric</title>
     <style>
       *,

rubrics/style.css

@@ -0,0 +1,65 @@
+@media screen and (max-width: 400px){
+    #app .card{
+        padding: 5px;
+    }
+
+    .card-header{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #app .input-group{
+        border-bottom: 1px solid black;
+        margin: 35px 0;
+        max-width: 100%;
+    }
+
+    #app.dark .input-group{
+        border-bottom: 1px solid white;
+    }
+
+    #app .title, #app .score{
+        font-size: 14px;
+        font-weight: 400;
+        margin-left: 0;
+    }
+
+    #app h2{
+        font-size: 22px;
+        margin: 0;
+    }
+
+    #app h3{
+        font-size: 16px;
+    }
+
+    #app legend{
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        color: black;
+        border-top: 1px solid black;
+        width: 100%;
+    }
+
+    #app fieldset *{
+        width: 100%;
+    }
+
+    #app fieldset b{
+        display: none;
+    }
+
+    #app.dark legend{
+        border-top: 1px solid white;
+    }
+
+    #app.dark legend{
+        color: white;
+    }
+
+    #app .cat-score{
+        margin-left: 0;
+    }
+}