diff --git a/style.css b/style.css
index 8b13789..c38cb6e 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,84 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,700;0,800;1,200&display=swap");
+* {
+  padding: 0;
+  margin: 0;
+  font-family: 'Nunito Sans', sans-serif;
+  color: #fff;
+}
 
+#main {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  background: #fff;
+  margin: 15px 0;
+}
+
+#main nav, #main aside, #main article {
+  /* border: 5px solid white; */
+  padding: 20px;
+}
+
+#main nav, #main aside {
+  min-width: 250px;
+  background: #425942;
+}
+
+#main aside {
+  /* display: flex; */
+  -webkit-box-ordinal-group: 2;
+      -ms-flex-order: 1;
+          order: 1;
+}
+
+#main article p {
+  margin: 10px;
+}
+
+#main article {
+  background: grey;
+  margin: 0 15px;
+}
+
+header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 200px;
+}
+
+header h1 {
+  font-weight: 200;
+}
+
+header, footer {
+  background: orange;
+  font-size: 1.5em;
+}
+
+footer {
+  height: 100px;
+}
+
+@media (max-width: 800px) {
+  #main {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  #main article {
+    margin: 15px 0;
+  }
+}
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/style.css.map b/style.css.map
new file mode 100644
index 0000000..eb45870
--- /dev/null
+++ b/style.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,OAAO,CAAC,0GAAI;AAGZ,AAAA,CAAC,CAAA;EACG,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,yBAAyB;EACtC,KAAK,EANA,IAAI;CAOZ;;AAED,AAAA,KAAK,CAAA;EACD,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,MAAM;CAwBjB;;AA7BD,AAOI,KAPC,CAOD,GAAG,EAPP,KAAK,CAOG,KAAK,EAPb,KAAK,CAOS,OAAO,CAAA;EACb,8BAA8B;EAC9B,OAAO,EAAE,IAAI;CAChB;;AAVL,AAWI,KAXC,CAWD,GAAG,EAXP,KAAK,CAWG,KAAK,CAAA;EACL,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,OAAO;CAEtB;;AAfL,AAgBI,KAhBC,CAgBD,KAAK,CAAA;EACD,oBAAoB;EACpB,KAAK,EAAE,CAAC;CACX;;AAnBL,AAoBI,KApBC,CAoBD,OAAO,CAAC,CAAC,CAAA;EACL,MAAM,EAAE,IAAI;CACf;;AAtBL,AAuBI,KAvBC,CAuBD,OAAO,CAAA;EACH,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,MAAM;CAEjB;;AAGL,AAAA,MAAM,CAAA;EACF,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,KAAK;CAIhB;;AARD,AAKI,MALE,CAKF,EAAE,CAAA;EACE,WAAW,EAAE,GAAG;CACnB;;AAEL,AAAA,MAAM,EAAC,MAAM,CAAA;EACT,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,KAAK;CAEnB;;AACD,AAAA,MAAM,CAAA;EACF,MAAM,EAAE,KAAK;CAChB;;AACD,MAAM,EAAC,SAAS,EAAE,KAAK;EACnB,AAAA,KAAK,CAAA;IACD,cAAc,EAAE,MAAM;GAKzB;EAND,AAEI,KAFC,CAED,OAAO,CAAA;IACH,MAAM,EAAE,MAAM;GACjB",
+    "sources": [
+        "style.scss"
+    ],
+    "names": [],
+    "file": "style.css"
+}
\ No newline at end of file
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..8daff3b
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,68 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,700;0,800;1,200&display=swap');
+$white : #fff;
+
+*{
+    padding: 0;
+    margin: 0;
+    font-family: 'Nunito Sans', sans-serif;
+    color: $white;
+}
+
+#main{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    background: #fff;
+    margin: 15px 0;
+    
+    nav,aside,article{
+        /* border: 5px solid white; */
+        padding: 20px;
+    }
+    nav,aside{
+        min-width: 250px;
+        background: #425942;
+    
+    }
+    aside{
+        /* display: flex; */
+        order: 1;
+    }
+    article p{
+        margin: 10px;
+    }
+    article{
+        background: grey;
+        margin: 0 15px;
+    
+    }
+    
+}
+header{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    h1{
+        font-weight: 200;  
+    }
+}
+header,footer{
+    background: orange;
+    font-size: 1.5em;
+
+}
+footer{
+    height: 100px;
+}
+@media(max-width:800px){
+    #main{
+        flex-direction: column;
+        article{
+            margin: 15px 0;
+        }
+        
+    }
+
+
+}
\ No newline at end of file