init

css/articles/other/about-us.css

@@ -0,0 +1,46 @@
+article{
+    color: white;
+    padding: 1em;
+    text-align: center;
+}
+.about-us{
+    margin: 2em;
+    color: white;
+
+    position: relative;
+    display: grid;
+    z-index: 5;
+}
+
+
+.about-us-big{
+    display: none;
+}
+.about-us-small{
+    margin: auto;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+}
+.about-us-small header{
+    text-align: center;
+    margin: auto;
+    width: 80%;
+}
+.about-us-small header hr{
+    height: 0;
+    border-style: solid;
+}
+
+.about-us-small main{
+    margin: auto;
+    width: 80%; 
+}
+.about-us-small h2{
+    font-size: 1.2em;
+    text-align: center;
+}
+.about-us-small main p{
+    text-align: center;
+    margin: 1em;
+}

css/articles/other/reference.css

@@ -0,0 +1,48 @@
+.reference{
+    margin-top: 4em;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+.reference h1{
+    font-size: 1.5em;
+    margin-bottom: 1em;
+}
+.reference .desktop-img{
+    width: 80%;
+    margin: 1em;
+    
+}
+.reference .mobile-img{
+    margin: 1em;
+}
+.reference header{
+    width: 80%;
+    text-align: center;
+}
+/*.ref-hr{
+    border-color: gold !important;
+    height: 0;
+    width: 200%;
+    left: -50%;
+    position: relative;
+    background-color: gold;
+}*/
+
+@media screen and (min-width: 1000px){
+    .desktop-img{
+        display: none;
+    }
+    .reference header{
+        width: 35%;
+        text-align: center;
+    }
+}
+@media screen and (max-width: 1000px){
+    .mobile-img{
+        width: -webkit-fill-available !important;
+        display: none;
+    }
+}