init

css/articles/article-base.css

@@ -0,0 +1,46 @@
+article{
+    font-size: 0.9em;
+    color: white;
+    padding: 2em;
+}
+article header{
+    margin-bottom: 2em;
+    line-height: 2em;
+}
+article p, article section p{
+    line-height: 1.5em;
+    font-weight: 300;
+}
+article section{
+    font-weight: 300;
+    line-height: 1.5em
+}
+
+article div{
+    margin-top: 2em;
+    max-width: 100%;
+    display: flex;
+
+    gap: 2em;
+    justify-items: center;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: auto;
+    margin-top: 5em;
+    justify-content: center;
+}
+
+article div img{
+    width: 22%;
+    border-radius: 0.5em;
+}
+
+@media screen and (max-width: 1000px){
+    article div{
+        grid-template-columns: 1fr 1fr;
+        grid-template-areas: ". .";
+    }
+    article div img{
+        width: 44%;
+    }
+}

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;
+    }
+}