The Doomsday of Dostoevsky

- fixed issue causing articles with '.htm' extension being not displayed

- improved performance for fetching articles from GitHub

README.md

@@ -1,37 +1,8 @@
-## Welcome to GitHub Pages
+## Welcome to RanchiMall Times
 
-You can use the [editor on GitHub](https://github.com/ranchimall/collabcontent/edit/master/README.md) to maintain and preview the content for your website in Markdown files.
+Here you find amazing articles which are a result of collaboration between people worldwide. 
 
-Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files.
+The best part? 
 
-### Markdown
+All of this is done through the blockchain using our p2p content collaboration app https://ranchimall.github.io/p2p-content-collaboration
 
-Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
-
-```markdown
-Syntax highlighted code block
-
-# Header 1
-## Header 2
-### Header 3
-
-- Bulleted
-- List
-
-1. Numbered
-2. List
-
-**Bold** and _Italic_ and `Code` text
-
-[Link](url) and ![Image](src)
-```
-
-For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/).
-
-### Jekyll Themes
-
-Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/ranchimall/collabcontent/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file.
-
-### Support or Contact
-
-Having trouble with Pages? Check out our [documentation](https://help.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out.

css/main.css

@@ -0,0 +1,403 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.hide {
+  display: none !important;
+}
+
+body {
+  font-family: "lora", serif;
+  font-size: 16px;
+  color: #2f2f2f;
+  background-color: #f9f7f1;
+  --accent-color: teal;
+  --text-color: 24, 24, 24;
+  --foreground-color: 255, 255, 255;
+  --error-color: #e53935;
+}
+
+header {
+  font-family: "Playfair Display", serif;
+  font-weight: 900;
+  width: 100%;
+  text-align: center;
+  font-size: 4rem;
+  text-transform: uppercase;
+  padding: 1rem 0;
+  letter-spacing: 6;
+}
+
+p {
+  margin: 1.2rem 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 8;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-align: justify;
+}
+
+p:not(:first-of-type)::first-letter {
+  margin-left: 4rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+#homepage {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.topnav {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+  justify-self: center;
+  text-align: center;
+  text-decoration: none;
+  margin-left: -6rem;
+}
+
+.rmtimeslogo_size {
+  height: 2rem;
+}
+
+.head {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+#news_columns {
+  padding: 1.5rem max(1.5rem, 4vw);
+  display: grid;
+  gap: 1.5rem;
+  margin-top: 1rem;
+  grid-template-columns: repeat(0, 1fr);
+}
+
+.column {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  font-size: 1.2rem;
+  line-height: 1.8;
+}
+
+.column .headline {
+  text-align: center;
+  line-height: normal;
+  font-family: "lora", serif;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl1 {
+  font-weight: 700;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl2 {
+  font-weight: 400;
+  font-size: 24px;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl2:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 7px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl2:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 13px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl3 {
+  font-weight: 400;
+  font-size: 36px;
+  padding: 0.8rem 0;
+  font-style: italic;
+  font-family: "Playfair Display", serif;
+}
+
+.column .headline.hl4 {
+  font-weight: 500;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl4:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 7px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl4:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 10px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl5 {
+  font-weight: 400;
+  font-size: 42px;
+  text-transform: uppercase;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl6 {
+  font-weight: 400;
+  font-size: 18px;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl6:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 7px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl6:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 10px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl7 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  display: block;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl8 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl9 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl10 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .citation {
+  font-family: "Playfair Display", serif;
+  font-size: 36px;
+  line-height: 44px;
+  /*font-style: italic;*/
+  text-align: center;
+  font-weight: 400;
+  display: block;
+  margin: 40px 0 40px 0;
+  font-feature-settings: "liga", "dlig";
+}
+
+.column .citation:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 16px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .citation:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 16px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .figure {
+  margin: 0 0 20px;
+}
+
+.column .figcaption {
+  font-style: italic;
+  font-size: 0.9rem;
+}
+
+.media {
+  filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8);
+  mix-blend-mode: multiply;
+  width: 100%;
+}
+
+:-webkit-any-link {
+  text-decoration: none;
+  color: #dc143c;
+  cursor: pointer;
+}
+
+:-moz-any-link {
+  text-decoration: none;
+  color: #dc143c;
+  cursor: pointer;
+}
+
+:any-link {
+  text-decoration: none;
+  color: #dc143c;
+  cursor: pointer;
+}
+
+.spinner {
+  -webkit-animation: Rotate 2.4s both infinite linear;
+          animation: Rotate 2.4s both infinite linear;
+}
+
+.path {
+  -webkit-animation: DrawLine 1.6s both infinite alternate linear;
+          animation: DrawLine 1.6s both infinite alternate linear;
+  fill: none;
+  stroke: #000;
+  stroke-width: 50;
+}
+
+@-webkit-keyframes Rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes Rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes DrawLine {
+  0% {
+    stroke-dasharray: 0 126;
+  }
+  100% {
+    stroke-dasharray: 126 126;
+  }
+}
+@keyframes DrawLine {
+  0% {
+    stroke-dasharray: 0 126;
+  }
+  100% {
+    stroke-dasharray: 126 126;
+  }
+}
+.thank {
+  transition: ease-in;
+  transition-delay: 10s;
+}
+
+.primary {
+  background-color: #ee75ee;
+  border-radius: 5px;
+  color: white;
+  width: 30%;
+  align-self: center;
+  margin-left: 33%;
+  margin-right: 33%;
+}
+
+.primary:hover {
+  box-shadow: 10px 10px 10px #e2e2e2;
+}
+
+.dispnum {
+  color: gray;
+  font-family: cursive;
+}
+
+@media screen and (max-width: 900px) {
+  .star {
+    height: 40%;
+    width: 40%;
+  }
+
+  .rating > label {
+    position: relative;
+    width: 1em;
+    font-size: 7vw;
+    color: #ffd500;
+    cursor: pointer;
+    justify-content: center;
+  }
+}
+/*________________________________________________________________________________________________________________________________*/
+/*MEDIAQUERIES*/
+@media all and (max-width: 640px) {
+  header {
+    font-size: 2.5rem;
+  }
+}
+@media all and (min-width: 640px) {
+  #news_columns {
+    gap: 3rem 2rem;
+    grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
+  }
+
+  .topnav {
+    padding: 1.5rem;
+  }
+
+  .rmtimeslogo_size {
+    height: 3rem;
+  }
+}

css/main.scss

@@ -0,0 +1,375 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.hide {
+  display: none !important;
+}
+
+body {
+  font-family: "lora", serif;
+  font-size: 16px;
+  color: #2f2f2f;
+  background-color: #f9f7f1;
+  --accent-color: teal;
+  --text-color: 24, 24, 24;
+  --foreground-color: 255, 255, 255;
+  --error-color: #e53935;
+}
+
+header {
+  font-family: "Playfair Display", serif;
+  font-weight: 900;
+  width: 100%;
+  text-align: center;
+  font-size: 4rem;
+  text-transform: uppercase;
+  padding: 1rem 0;
+  letter-spacing: 6;
+}
+
+p {
+  margin: 1.2rem 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 8;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-align: justify;
+}
+
+p:not(:first-of-type)::first-letter {
+  margin-left: 4rem;
+}
+.flex {
+  display: flex;
+}
+.align-center {
+  align-items: center;
+}
+.space-between {
+  justify-content: space-between;
+}
+
+#homepage {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+.topnav {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+  justify-self: center;
+  text-align: center;
+  text-decoration: none;
+  margin-left: -6rem;
+}
+
+.rmtimeslogo_size {
+  height: 2rem;
+}
+
+.head {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+#news_columns {
+  padding: 1.5rem max(1.5rem, 4vw);
+  display: grid;
+  gap: 1.5rem;
+  margin-top: 1rem;
+  grid-template-columns: repeat(0, 1fr);
+}
+
+.column {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  font-size: 1.2rem;
+  line-height: 1.8;
+}
+
+.column .headline {
+  text-align: center;
+  line-height: normal;
+  font-family: "lora", serif;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl1 {
+  font-weight: 700;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl2 {
+  font-weight: 400;
+  font-size: 24px;
+
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl2:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 7px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl2:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 13px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl3 {
+  font-weight: 400;
+  font-size: 36px;
+  padding: 0.8rem 0;
+  font-style: italic;
+  font-family: "Playfair Display", serif;
+}
+
+.column .headline.hl4 {
+  font-weight: 500;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl4:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 7px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl4:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 10px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl5 {
+  font-weight: 400;
+  font-size: 42px;
+  text-transform: uppercase;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl6 {
+  font-weight: 400;
+  font-size: 18px;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl6:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 7px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl6:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 10px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl7 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  display: block;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl8 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl9 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl10 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .citation {
+  font-family: "Playfair Display", serif;
+  font-size: 36px;
+  line-height: 44px;
+  /*font-style: italic;*/
+  text-align: center;
+  font-weight: 400;
+  display: block;
+  margin: 40px 0 40px 0;
+  font-feature-settings: "liga", "dlig";
+}
+
+.column .citation:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 16px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .citation:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 16px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .figure {
+  margin: 0 0 20px;
+}
+
+.column .figcaption {
+  font-style: italic;
+  font-size: 0.9rem;
+}
+
+.media {
+  -webkit-filter: sepia(80%) contrast(1) opacity(0.8);
+  filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8);
+  mix-blend-mode: multiply;
+  width: 100%;
+}
+
+:any-link {
+  text-decoration: none;
+  color: #dc143c;
+  cursor: pointer;
+}
+
+.spinner {
+  animation: Rotate 2.4s both infinite linear;
+}
+
+.path {
+  animation: DrawLine 1.6s both infinite alternate linear;
+  fill: none;
+  stroke: #000;
+  stroke-width: 50;
+}
+
+@keyframes Rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes DrawLine {
+  0% {
+    stroke-dasharray: 0 126;
+  }
+
+  100% {
+    stroke-dasharray: 126 126;
+  }
+}
+
+.thank {
+  transition: ease-in;
+  transition-delay: 10s;
+}
+
+.primary {
+  background-color: rgb(238, 117, 238);
+  border-radius: 5px;
+  color: white;
+  width: 30%;
+  align-self: center;
+  margin-left: 33%;
+  margin-right: 33%;
+}
+.primary:hover {
+  box-shadow: 10px 10px 10px rgb(226, 226, 226);
+}
+
+.dispnum {
+  color: gray;
+  font-family: cursive;
+}
+@media screen and (max-width: 900px) {
+  .star {
+    height: 40%;
+    width: 40%;
+  }
+  .rating > label {
+    position: relative;
+    width: 1em;
+    font-size: 7vw;
+    color: #ffd500;
+    cursor: pointer;
+    justify-content: center;
+  }
+}
+
+/*________________________________________________________________________________________________________________________________*/
+/*MEDIAQUERIES*/
+
+@media all and (max-width: 640px) {
+  header {
+    font-size: 2.5rem;
+  }
+}
+
+@media all and (min-width: 640px) {
+  #news_columns {
+    gap: 3rem 2rem;
+    grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
+  }
+  .topnav {
+    padding: 1.5rem;
+  }
+  .rmtimeslogo_size {
+    height: 3rem;
+  }
+}
+
+@media all and (min-width: 1920px) {
+}

css/review.css

@@ -0,0 +1,75 @@
+.rating {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    padding-left:1em;
+    }
+
+    .rating>input {
+    display: none;
+    color: rgb(241, 106, 106);
+    }
+    
+    .rating>label {
+    position: relative;
+    width: 1em;
+    font-size: 3vw;
+    color: #ffd500;
+    cursor: pointer
+    }
+    
+    .rating>label::before {
+    content: "\2605";
+    position: absolute;
+    opacity: 0
+    }
+    
+    .rating>label:hover:before,
+    .rating>label:hover~label:before {
+    opacity: 1 !important
+    }
+    
+    .rating>input:checked~label:before {
+    opacity: 1
+    }
+    
+    .rating:hover>input:checked~label:before {
+    opacity: 0.4
+    }
+.thank{
+    transition: ease-in;
+    transition-delay: 10s;
+}
+
+.primary{
+    background-color: rgb(238, 117, 238);
+    border-radius: 5px;
+    color: white;
+    width: 30%;
+    align-self: center;
+    margin-left: 33%;
+    margin-right: 33%;
+}
+.primary:hover{
+    box-shadow: 10px 10px 10px rgb(226, 226, 226);
+    
+}
+
+.dispnum{
+    color: gray;
+    font-family: cursive;
+}
+@media screen and (max-width:900px){
+    .star{
+        height: 40%;
+        width: 40%;
+    }
+    .rating>label {
+        position: relative;
+        width: 1em;
+        font-size: 7vw;
+        color: #ffd500;
+        cursor: pointer;
+        justify-content: center;
+        }
+}      

css/style.css

@@ -0,0 +1,326 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.hide {
+  display: none !important;
+}
+
+body {
+  font-family: "lora", serif;
+  font-size: 16px;
+  color: #2f2f2f;
+  background-color: #f9f7f1;
+  --accent-color: teal;
+  --text-color: 24, 24, 24;
+  --foreground-color: 255, 255, 255;
+  --error-color: #e53935;
+}
+
+header {
+  font-family: "Playfair Display", serif;
+  font-weight: 900;
+  width: 100%;
+  text-align: center;
+  font-size: 4rem;
+  text-transform: uppercase;
+  padding: 1rem 0;
+  letter-spacing: 6;
+}
+
+p {
+  margin: 1.2rem 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 8;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-align: justify;
+}
+
+p:not(:first-of-type)::first-letter {
+  margin-left: 4rem;
+}
+
+#homepage {
+  display: grid;
+}
+
+.head {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.columns {
+  padding-top: 2rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
+}
+
+.column {
+  font-size: 1.2rem;
+  line-height: 1.8;
+  display: flex;
+  flex-direction: column;
+  padding: 0 1.5rem;
+  vertical-align: top;
+  margin-bottom: 4rem;
+}
+
+.column .headline {
+  text-align: center;
+  line-height: normal;
+  font-family: "lora", serif;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl1 {
+  font-weight: 700;
+  font-size: 30px;
+  text-transform: uppercase;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl2 {
+  font-weight: 400;
+  font-size: 24px;
+
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl2:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 7px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl2:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 13px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl3 {
+  font-weight: 400;
+  font-size: 36px;
+  padding: 0.8rem 0;
+  font-style: italic;
+  font-family: "Playfair Display", serif;
+}
+
+.column .headline.hl4 {
+  font-weight: 500;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl4:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 7px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl4:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 10px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl5 {
+  font-weight: 400;
+  font-size: 42px;
+  text-transform: uppercase;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl6 {
+  font-weight: 400;
+  font-size: 18px;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl6:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 7px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl6:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 10px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .headline.hl7 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  display: block;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl8 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl9 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .headline.hl10 {
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 0.8rem 0;
+}
+
+.column .citation {
+  font-family: "Playfair Display", serif;
+  font-size: 36px;
+  line-height: 44px;
+  /*font-style: italic;*/
+  text-align: center;
+  font-weight: 400;
+  display: block;
+  margin: 40px 0 40px 0;
+  font-feature-settings: "liga", "dlig";
+}
+
+.column .citation:before {
+  border-top: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 16px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .citation:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: "";
+  width: 100px;
+  height: 16px;
+  display: block;
+  margin: 0 auto;
+}
+
+.column .figure {
+  margin: 0 0 20px;
+}
+
+.column .figcaption {
+  font-style: italic;
+  font-size: 0.9rem;
+}
+
+.media {
+  -webkit-filter: sepia(80%) contrast(1) opacity(0.8);
+  filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8);
+  mix-blend-mode: multiply;
+  width: 100%;
+}
+
+:any-link {
+  text-decoration: none;
+  color: #dc143c;
+  cursor: pointer;
+}
+
+.topnav {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+  position: absolute;
+  justify-self: center;
+  text-align: center;
+  text-decoration: none;
+  margin: 0;
+}
+
+.rmtimeslogo_size {
+  height: 2rem;
+}
+
+.spinner {
+  animation: Rotate 2.4s both infinite linear;
+}
+
+.path {
+  animation: DrawLine 1.6s both infinite alternate linear;
+  fill: none;
+  stroke: #000;
+  stroke-width: 50;
+}
+
+@keyframes Rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes DrawLine {
+  0% {
+    stroke-dasharray: 0 126;
+  }
+
+  100% {
+    stroke-dasharray: 126 126;
+  }
+}
+
+/*________________________________________________________________________________________________________________________________*/
+/*MEDIAQUERIES*/
+
+@media all and (max-width: 640px) {
+  header {
+    font-size: 2.5rem;
+  }
+}
+
+@media all and (min-width: 640px) {
+  .columns {
+    margin: 0 2vw;
+  }
+}
+
+@media all and (min-width: 1920px) {
+  .columns {
+    margin: 0 4vw;
+  }
+}