basic responsive

sass/index.css

@@ -43,7 +43,7 @@ ol {
   font-family: "Roboto", sans-serif; }
 
 .header-title {
-  height: 300px;
+  margin: 100px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -123,4 +123,50 @@ ol {
     font-weight: normal;
     padding: 0 10%; }
 
+i {
+  margin-right: 20px; }
+
+@media screen and (max-width: 1000px) {
+  .navigation {
+    flex-direction: column; }
+    .navigation img {
+      margin: 10px 0;
+      padding: 0; }
+    .navigation * {
+      margin: 5px 0; }
+
+  .header-title {
+    text-align: center; }
+    .header-title h1 {
+      font-size: 50px;
+      letter-spacing: 20px; }
+    .header-title h2 {
+      font-size: 20px;
+      letter-spacing: 10px; }
+
+  .articles {
+    width: 95%; }
+    .articles div {
+      margin: 10px 0; }
+
+  h3 {
+    font-size: 130%; }
+
+  p {
+    font-size: 100%; }
+
+  .foot {
+    flex-direction: column; } }
+@media screen and (max-width: 500px) {
+  .header-title h1 {
+    font-size: 40px;
+    letter-spacing: 5px; }
+  .header-title h2 {
+    letter-spacing: 3px; }
+
+  .article-description p {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between; } }
+
 /*# sourceMappingURL=index.css.map */