incorporating Joana's changes

web/app/hidden.py

     with open('content/section_3/intro-hidden.md', 'r') as f:
         text = f.read()
         text = markdown.markdown(text)
-    return render_template('text.html', text=text)
+    return render_template('hidden.html', text=text)
 
 # route for expanding theme page
 @hidden.route('/hidden/expanding/')

web/app/offrecord.py

     with open('content/section_4/I-Martha-gowans.md', 'r') as f:
         text = f.read()
         text = markdown.markdown(text)
-    return render_template('text.html', text=text)
+    return render_template('offrecord.html', text=text)

web/app/static/styles/custom.css

     margin: 0% 20%;
 }
 
+.themes h1 {
+    text-align: center;
+}
+
 .themes p {
     margin: 2rem 0rem;
 }
     background-color: var(--color-light-gray);
 }
 
+/* OFF THE RECORD */
+
+.offtherecord {
+    margin: 0% 20%;
+}
+
+.offtherecord h1 {
+    text-align: center;
+}
+
+.offtherecord p {
+    margin: 2rem 0rem;
+}
+
+.offtherecord img {
+    width: 100%;
+}
+
+.offtherecord h2, .offtherecord h3 {
+    margin: 2rem 0rem;
+    padding: 0rem 1rem;
+}
+
+.offtherecord h2 {
+    font-size: 2.25 rem;
+    background-color: var(--color-lightyellow);
+    border-radius: 0.5rem;
+}
+
+.offtherecord h3   {
+    border-bottom: 0.25rem dashed var(--color-lightyellow);
+}
+
+.offtherecord li {
+    
+}
+
 /***************** MOBILE ****************/
 
 @media screen and (min-width:0px) and (max-width: 768px) {

web/app/templates/hidden.html

+<div class="themes">
+    <a href="/contents/" class="arrow-back h1 text-left" title="back to index"> ⇽ </a>
+    
+{% extends "base.html" %}
+    
+{% block content %}
+
+{{ text|safe }}
+
+<div class="allThemes mt-5">
+    <a href="https://patents.copim.ac.uk/hidden/expanding/" target="_blank">EXPANDING citizens</a>
+    <a href="https://patents.copim.ac.uk/hidden/active/" target="_blank">ACTIVE citizens</a>
+    <a href="https://patents.copim.ac.uk/hidden/secret/" target="_blank">SECRET citizens</a>
+    <a href="https://patents.copim.ac.uk/hidden/leaking/" target="_blank">LEAKING citizens</a>
+    <a href="https://patents.copim.ac.uk/hidden/working/" target="_blank">WORKING citizens</a>
+    <a href="https://patents.copim.ac.uk/hidden/resourceful/" target="_blank">RESOURCEFUL citizens</a>
+</div> 
+
+{% endblock %}
+
+</div>

web/app/templates/offrecord.html

+<div class="offtherecord">
+    <a href="/contents/" class="arrow-back h1 text-left" title="back to index"> ⇽ </a>
+    
+{% extends "base.html" %}
+
+{% block content %}
+
+{{ text|safe }}
+
+{% endblock %}
+
+</div>