diff --git a/__frontend/pages/admin/announcements.ejs b/__frontend/pages/admin/announcements.ejs
index 89af3ca..8065bda 100644
--- a/__frontend/pages/admin/announcements.ejs
+++ b/__frontend/pages/admin/announcements.ejs
@@ -61,7 +61,7 @@
               <label style="font-size:20px;" for="title">Titre de l'annonce :</label>
               <input type="text" class="title form-control" name="title" id="title">
               <label style="font-size:20px;" for="contenu">Ecrivez ci-dessous votre annonce :</label>
-              <textarea type="hidden" name="contenu" id="contenu"></textarea>
+              <textarea type="hidden" name="contenu" id="contenu" class="form-control"></textarea>
               <label style="font-size:20px;">Staff :</label>
               <label class="switch" id="switch">
                 <input type="checkbox" name="staff">
diff --git a/__frontend/pages/admin/badges.ejs b/__frontend/pages/admin/badges.ejs
index 67654f7..5f67646 100644
--- a/__frontend/pages/admin/badges.ejs
+++ b/__frontend/pages/admin/badges.ejs
@@ -10,7 +10,7 @@
   <%- include ('../include/bootstrap/bootstrap.css.ejs'); -%>
     <link rel="stylesheet" href="/static/css/main.css">
     <link rel="stylesheet" href="/static/css/footer.css">
-    <link rel="stylesheet" href="/static/css/admin/announcements.css">
+    <link rel="stylesheet" href="/static/css/admin/badges.css">
     <title>FGF Admin</title>
 </head>
 
@@ -18,7 +18,7 @@
   <%- include ('../include/nav.ejs'); -%>
     <main role="main">
 
-      <table class="table table-striped" id="table-announcements">
+      <table class="table table-striped" id="table-badges">
 
         <thead>
           <tr>
diff --git a/__frontend/pages/admin/forum.categorie.ejs b/__frontend/pages/admin/forum.categorie.ejs
index 32cc7eb..ed7348b 100644
--- a/__frontend/pages/admin/forum.categorie.ejs
+++ b/__frontend/pages/admin/forum.categorie.ejs
@@ -10,7 +10,7 @@
   <%- include ('../include/bootstrap/bootstrap.css.ejs'); -%>
     <link rel="stylesheet" href="/static/css/main.css">
     <link rel="stylesheet" href="/static/css/footer.css">
-    <link rel="stylesheet" href="/static/css/admin/announcements.css">
+    <link rel="stylesheet" href="/static/css/admin/form.categorie.css">
     <title>FGF Admin</title>
 </head>
 
@@ -26,7 +26,8 @@
               <label style="font-size:20px;" for="title">Titre de la catégorie :</label>
               <input type="text" class="title form-control" name="title" id="title" value="<%=categorie[0].cat_nom%>">
               <label style="font-size:20px;" for="content">Description de la catégorie (max 255 caractères) :</label>
-              <textarea type="hidden" name="content" id="content"><%=categorie[0].cat_description%></textarea>
+              <textarea class="form-control" type="hidden" name="content"
+                id="content"><%=categorie[0].cat_description%></textarea>
               <label style="font-size:20px;" for="icon">Icon de la catégorie :</label>
               <input type="text" class="icon form-control" name="icon" id="icon" value="<%=categorie[0].cat_icon%>">
               <label style="font-size:20px;" for="icon">Groupe de la catégorie :</label>
diff --git a/__frontend/pages/admin/forum.container.ejs b/__frontend/pages/admin/forum.container.ejs
index c4101de..6868dda 100644
--- a/__frontend/pages/admin/forum.container.ejs
+++ b/__frontend/pages/admin/forum.container.ejs
@@ -10,7 +10,7 @@
   <%- include ('../include/bootstrap/bootstrap.css.ejs'); -%>
     <link rel="stylesheet" href="/static/css/main.css">
     <link rel="stylesheet" href="/static/css/footer.css">
-    <link rel="stylesheet" href="/static/css/admin/announcements.css">
+    <link rel="stylesheet" href="/static/css/admin/forum.container.css">
     <title>FGF Album</title>
 </head>
 
diff --git a/__frontend/pages/admin/forum.ejs b/__frontend/pages/admin/forum.ejs
index 1538558..38b525c 100644
--- a/__frontend/pages/admin/forum.ejs
+++ b/__frontend/pages/admin/forum.ejs
@@ -10,7 +10,7 @@
   <%- include ('../include/bootstrap/bootstrap.css.ejs'); -%>
     <link rel="stylesheet" href="/static/css/main.css">
     <link rel="stylesheet" href="/static/css/footer.css">
-    <link rel="stylesheet" href="/static/css/admin/announcements.css">
+    <link rel="stylesheet" href="/static/css/admin/forum.css">
     <title>FGF Album</title>
 </head>
 
@@ -61,7 +61,7 @@
               <label style="font-size:20px;" for="title">Titre de la catégorie :</label>
               <input type="text" class="title form-control" name="title" id="title">
               <label style="font-size:20px;" for="content">Description de la catégorie (max 255 caractères) :</label>
-              <textarea type="hidden" name="content" id="content"></textarea>
+              <textarea class="form-control" type="hidden" name="content" id="content"></textarea>
               <label style="font-size:20px;" for="icon">Icon de la catégorie :</label>
               <input type="text" class="icon form-control" name="icon" id="icon">
               <label style="font-size:20px;" for="icon">Groupe (id) de la catégorie :</label>
diff --git a/__frontend/pages/admin/forum.modos.ejs b/__frontend/pages/admin/forum.modos.ejs
index 0cca3e9..a604462 100644
--- a/__frontend/pages/admin/forum.modos.ejs
+++ b/__frontend/pages/admin/forum.modos.ejs
@@ -10,7 +10,7 @@
   <%- include ('../include/bootstrap/bootstrap.css.ejs'); -%>
     <link rel="stylesheet" href="/static/css/main.css">
     <link rel="stylesheet" href="/static/css/footer.css">
-    <link rel="stylesheet" href="/static/css/admin/announcements.css">
+    <link rel="stylesheet" href="/static/css/admin/forum.modos.css">
     <title>FGF Album</title>
 </head>
 
@@ -58,7 +58,7 @@
         </section>
         <section id="form">
           <fieldset class="form-group">
-            <legend>Nouvelle catégorie</legend>
+            <legend>Nouveau modo</legend>
             <form action="/admin/forum/modos" method="POST">
               <div class="form-group d-flex flex-column">
                 <label style="font-size:20px;" for="pseudo">Pseudo du modérateur</label>
diff --git a/__frontend/pages/admin/update/album.ejs b/__frontend/pages/admin/update/album.ejs
index 139e2f0..cb31d31 100644
--- a/__frontend/pages/admin/update/album.ejs
+++ b/__frontend/pages/admin/update/album.ejs
@@ -26,13 +26,14 @@
             <img src="/uploads/album/<%=album[0].album_image%>" alt="Image" id="image">
             <form action="/admin/albums/update/<%=album[0].album_id%>" method="POST" id="form-update">
               <label for="statut">Statut de l'image :</label>
-              <select id="statut" name="statut">
-                <option value="0" <%if(album[0].album_statut===0){%> selected <%}%>>En attente</option>
-                <option value="1" <%if(album[0].album_statut===1){%> selected <%}%>>Validé</option>
+              <select id="statut" name="statut" class="form-control">
+                <option class="form-control" value="0" <%if(album[0].album_statut===0){%> selected <%}%>>En attente
+                </option>
+                <option class="form-control" value="1" <%if(album[0].album_statut===1){%> selected <%}%>>Validé</option>
               </select>
               <br>
               <label for="title">Titre de l'image</label>
-              <input type="text" name="title" value="<%=album[0].album_title%>">
+              <input class="form-control" type="text" name="title" value="<%=album[0].album_title%>">
               <br>
               <button type="submit" class="button button-primary" id="button-send">Envoyer</button>
             </form>
diff --git a/__frontend/pages/admin/update/article.ejs b/__frontend/pages/admin/update/article.ejs
index 3a6164d..19c35b4 100644
--- a/__frontend/pages/admin/update/article.ejs
+++ b/__frontend/pages/admin/update/article.ejs
@@ -7,6 +7,7 @@
 
   <%- include ('../../include/bootstrap/bootstrap.css.ejs'); -%>
     <link rel="stylesheet" href="/static/css/main.css">
+    <link rel="stylesheet" href="/static/css/admin/update/article.css">
     <link rel="stylesheet" href="/static/css/footer.css">
     <script src="/static/js/admin/update/article.js"></script>
     <link rel="stylesheet" href="/static/markdown/css/simplemde.css">
@@ -29,13 +30,15 @@
               <legend>Type d'article</legend>
               <div class="form-group d-flex flex-column">
                 <label for="categorie">Catégorie de votre article :</label>
-                <select id="categorie" name="categorie">
-                  <option value="1" <%if(article.categorie===1){%> selected <%}%>>Console</option>
-                  <option value="2" <%if(article.categorie===2){%> selected <%}%>>Jeux</option>
-                  <option value="3" <%if(article.categorie===3){%> selected <%}%>>Informatique</option>
-                  <option value="4" <%if(article.categorie===4){%> selected <%}%>>Musique</option>
-                  <option value="5" <%if(article.categorie===5){%> selected <%}%>>Partenaires</option>
-                  <option value="6" <%if(article.categorie===6){%> selected <%}%>>Divers</option>
+                <select id="categorie" name="categorie" class="form-control">
+                  <option class="form-control" value="1" <%if(article.categorie===1){%> selected <%}%>>Console</option>
+                  <option class="form-control" value="2" <%if(article.categorie===2){%> selected <%}%>>Jeux</option>
+                  <option class="form-control" value="3" <%if(article.categorie===3){%> selected <%}%>>Informatique
+                  </option>
+                  <option class="form-control" value="4" <%if(article.categorie===4){%> selected <%}%>>Musique</option>
+                  <option class="form-control" value="5" <%if(article.categorie===5){%> selected <%}%>>Partenaires
+                  </option>
+                  <option class="form-control" value="6" <%if(article.categorie===6){%> selected <%}%>>Divers</option>
                 </select>
               </div>
             </fieldset>
@@ -43,9 +46,9 @@
               <legend>Status de l'article</legend>
               <div class="form-group d-flex flex-column">
                 <label for="status">Catégorie de votre article :</label>
-                <select id="status" name="status">
-                  <option value="0" <%if(article.status===0){%> selected <%}%>>En attente</option>
-                  <option value="1" <%if(article.status===1){%> selected <%}%>>Validé</option>
+                <select id="status" name="status" class="form-control">
+                  <option value="0" class="form-control" <%if(article.status===0){%> selected <%}%>>En attente</option>
+                  <option value="1" class="form-control" <%if(article.status===1){%> selected <%}%>>Validé</option>
                 </select>
               </div>
             </fieldset>
@@ -69,7 +72,7 @@
                   Choisir un fichier
                 </label>
                 <label style="font-size:20px;" for="intro">Ecrivez ci-dessous l'intro de l'article :</label>
-                <textarea type="hidden" name="intro" id="intro"><%=article.intro%></textarea>
+                <textarea class="form-control" type="hidden" name="intro" id="intro"><%=article.intro%></textarea>
                 <label style="font-size:20px;" for="contenu">Ecrivez ci-dessous votre article :</label>
                 <textarea type="hidden" name="contenu" id="contenu"><%= article.content %></textarea>
 
diff --git a/__frontend/pages/admin/view.job.ejs b/__frontend/pages/admin/view.job.ejs
index 2057845..20786dd 100644
--- a/__frontend/pages/admin/view.job.ejs
+++ b/__frontend/pages/admin/view.job.ejs
@@ -56,10 +56,10 @@
                         <%=request[0].q6%>
                       </p>
                       <form action="/admin/jobs/update/<%=request[0].id%>" method="POST">
-                        <select name="statut" id="statut">
-                          <option value="0">En attente</option>
-                          <option value="1">Accepté</option>
-                          <option value="2">Refuser</option>
+                        <select name="statut" id="statut" class="form-control">
+                          <option class="form-control" value="0">En attente</option>
+                          <option class="form-control" value="1">Accepté</option>
+                          <option class="form-control" value="2">Refuser</option>
                         </select>
                         <button type="submit" class="button button-warning">Mettre a jour la demande</button>
                       </form>
diff --git a/__frontend/pages/admin/view.partner.ejs b/__frontend/pages/admin/view.partner.ejs
index ab77412..166db10 100644
--- a/__frontend/pages/admin/view.partner.ejs
+++ b/__frontend/pages/admin/view.partner.ejs
@@ -10,8 +10,7 @@
   <%- include ('../include/bootstrap/bootstrap.css.ejs'); -%>
     <link rel="stylesheet" href="/static/css/main.css">
     <link rel="stylesheet" href="/static/css/footer.css">
-    <link rel="stylesheet" href="/static/css/admin/members.css">
-    <script src="/static/js/admin/members.js"></script>
+    <link rel="stylesheet" href="/static/css/admin/view.partner.css">
 
     <title>French Gaming Family</title>
 </head>
@@ -57,10 +56,10 @@
                         <%=request[0].q6%>
                       </p>
                       <form action="/admin/partners/update/<%=request[0].id%>" method="POST">
-                        <select name="statut" id="statut">
-                          <option value="0">En attente</option>
-                          <option value="1">Accepté</option>
-                          <option value="2">Refuser</option>
+                        <select class="form-control" name="statut" id="statut">
+                          <option class="form-control" value="0">En attente</option>
+                          <option class="form-control" value="1">Accepté</option>
+                          <option class="form-control" value="2">Refusé</option>
                         </select>
                         <button type="submit" class="button button-warning">Mettre a jour la demande</button>
                       </form>
@@ -71,12 +70,4 @@
 
 </body>
 
-</html>
-
-<style>
-  #container-demande {
-    width: 70%;
-    margin-left: 15%;
-    background-color: #ffffff;
-  }
-</style>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/__frontend/pages/admin/view.request.ejs b/__frontend/pages/admin/view.request.ejs
index fe7ee56..458ba48 100644
--- a/__frontend/pages/admin/view.request.ejs
+++ b/__frontend/pages/admin/view.request.ejs
@@ -33,9 +33,9 @@
                         <%=request[0].demande%>
                       </p>
                       <form action="/admin/demandes/update/<%=request[0].id%>" method="POST">
-                        <select name="statut" id="statut">
-                          <option value="0">En attente</option>
-                          <option value="1">Traitée</option>
+                        <select name="statut" id="statut" class="form-control">
+                          <option class="form-control" value="0">En attente</option>
+                          <option class="form-control" value="1">Traitée</option>
                         </select>
                         <button type="submit" class="button button-warning">Mettre a jour la demande</button>
                       </form>
diff --git a/__frontend/pages/forum/categorie.ejs b/__frontend/pages/forum/categorie.ejs
index a06c774..b75aa95 100644
--- a/__frontend/pages/forum/categorie.ejs
+++ b/__frontend/pages/forum/categorie.ejs
@@ -66,6 +66,7 @@
                       <button id="send" class="button button-success">Envoyer</button>
                     </form>
                   </fieldset>
+
                 </div>
                 <div id="text-center">
                   <a href="#" class="button button-info" id="precedent">
diff --git a/__frontend/pages/forum/topic.ejs b/__frontend/pages/forum/topic.ejs
index 4822c15..58a5f29 100644
--- a/__frontend/pages/forum/topic.ejs
+++ b/__frontend/pages/forum/topic.ejs
@@ -40,30 +40,31 @@
                 <a onclick="report(<%=element.topic_id%>, <%=element.post_id%>)" href="#"><img class="button-control right" src ="/static/images/btn_report.svg"></a>
                 </p>
                 <% arrayBadges.forEach(badge => { %>
-                  <%  const colorBadge = badge.split(' -') %>
-                            <% if(colorBadge[1]){%>
-                              <% const badgeName=colorBadge[0] %>
-                                <!--<span class="badge bg-<%=//colorBadge[1]%> rounded-pill" ><%=//badgeName%></span>-->
-                                <span class="badge bg-<%=colorBadge[1]%>">
-                                  <%=badgeName%>
-                                </span>
-                                <% }else{ %>
-                                  <!--<span class="badge bg-secondary rounded-pill" ><%=//badge%></span>-->
-                                  <span class="badge bg-secondary">
-                                    <%=badge%>
+                  <%  const colorBadge = badge.split(`-`) %>
+                              <% if(colorBadge[1]){%>
+                                <% const badgeName=colorBadge[0] %>
+                                  <!--<span class="badge bg-<%=//colorBadge[1]%> rounded-pill" ><%=//badgeName%></span>-->
+                                  <span class="badge bg-<%=colorBadge[1]%>">
+                                    <%=badgeName%>
                                   </span>
-                                  <% } %>
-                                    <% }); %>
-                                      <p><a href="#<%=element.post_id%>" class="link-msg">
-                                          <%= `${date}/${month}/${year}`%>
-                                        </a></p>
-                                      <div id='<%=element.post_id%>'></div>
-                                      <div id="edit-<%=element.post_id%>"></div>
-                                      <hr>
-                                      <p>
-                                        <%= element.post_texte %>
-                                      </p>
+                                  <% }else{ %>
+                                    <!--<span class="badge bg-secondary rounded-pill" ><%=//badge%></span>-->
+                                    <span class="badge bg-secondary">
+                                      <%=badge%>
+                                    </span>
+                                    <% } %>
+                                      <% }); %>
+                                        <p><a href="#<%=element.post_id%>" class="link-msg">
+                                            <%= `${date}/${month}/${year}`%>
+                                          </a></p>
+                                        <div id=' <%=element.post_id%>'>
         </div>
+        <div id="edit-<%=element.post_id%>"></div>
+        <hr>
+        <p>
+          <%= element.post_texte %>
+        </p>
+      </div>
       </div>
       <% }); %>
         <div id="container-reply">
diff --git a/__frontend/pages/index.ejs b/__frontend/pages/index.ejs
index a824c44..71d557f 100644
--- a/__frontend/pages/index.ejs
+++ b/__frontend/pages/index.ejs
@@ -119,6 +119,10 @@
                         <div class="card-intro mt-3">
                           <%=article.intro.substring(0,90)%>...
                         </div>
+                        <div class="button-margin">
+                          <a href="/articles/view/<%=article.id%>" class="button button-danger button-article">Lire
+                            l'article</a>
+                        </div>
                       </div>
                       <% }); %>
                         <%}else{%>
diff --git a/__frontend/pages/jobs.ejs b/__frontend/pages/jobs.ejs
index 88c17e3..bc12465 100644
--- a/__frontend/pages/jobs.ejs
+++ b/__frontend/pages/jobs.ejs
@@ -81,7 +81,7 @@
                         <div class="form-group d-flex flex-column">
                             <label for="q6">Avez vous une demande, question, remarque à laisser a l'intention des admins
                                 ?</label>
-                            <textarea class="question" name="q6" id="q6" cols="40" rows="4"> </textarea>
+                            <textarea class="form-control question" name="q6" id="q6" cols="40" rows="4"> </textarea>
                         </div>
                         <a>
                             <div class="g-recaptcha" data-sitekey="6Lc2VNsUAAAAACUt1YxoQYnV2KuxwWumlQETVM_E"></div>
diff --git a/__frontend/pages/member/articles.ejs b/__frontend/pages/member/articles.ejs
index e8bf5fc..a87c8be 100644
--- a/__frontend/pages/member/articles.ejs
+++ b/__frontend/pages/member/articles.ejs
@@ -66,12 +66,11 @@
 
       </div>
 
-      <main role="main">
+    </main>
 
 
-
-        <%- include('../include/footer.ejs') %>
-          <%- include ('../include/bootstrap/bootstrap.js.ejs'); -%>
+    <%- include('../include/footer.ejs') %>
+      <%- include ('../include/bootstrap/bootstrap.js.ejs'); -%>
 
 </body>
 
diff --git a/__frontend/pages/member/articleupdate.ejs b/__frontend/pages/member/articleupdate.ejs
index e43bc8e..77c3b5a 100644
--- a/__frontend/pages/member/articleupdate.ejs
+++ b/__frontend/pages/member/articleupdate.ejs
@@ -28,13 +28,15 @@
               <legend>Type d'article</legend>
               <div class="form-group d-flex flex-column">
                 <label for="categorie">Catégorie de votre article :</label>
-                <select id="categorie" name="categorie">
-                  <option value="1" <%if(article.categorie===1){%> selected <%}%>>Console</option>
-                  <option value="2" <%if(article.categorie===2){%> selected <%}%>>Jeux</option>
-                  <option value="3" <%if(article.categorie===3){%> selected <%}%>>Informatique</option>
-                  <option value="4" <%if(article.categorie===4){%> selected <%}%>>Musique</option>
-                  <option value="5" <%if(article.categorie===5){%> selected <%}%>>Partenaires</option>
-                  <option value="6" <%if(article.categorie===6){%> selected <%}%>>Divers</option>
+                <select id="categorie" name="categorie" class="form-control">
+                  <option class="form-control" value="1" <%if(article.categorie===1){%> selected <%}%>>Console</option>
+                  <option class="form-control" value="2" <%if(article.categorie===2){%> selected <%}%>>Jeux</option>
+                  <option class="form-control" value="3" <%if(article.categorie===3){%> selected <%}%>>Informatique
+                  </option>
+                  <option class="form-control" value="4" <%if(article.categorie===4){%> selected <%}%>>Musique</option>
+                  <option class="form-control" value="5" <%if(article.categorie===5){%> selected <%}%>>Partenaires
+                  </option>
+                  <option class="form-control" value="6" <%if(article.categorie===6){%> selected <%}%>>Divers</option>
                 </select>
               </div>
             </fieldset>
@@ -53,7 +55,7 @@
                   Choisir un fichier
                 </label>
                 <label style="font-size:20px;" for="intro">Ecrivez ci-dessous l'intro de l'article :</label>
-                <textarea type="hidden" name="intro" id="intro"><%=article.intro%></textarea>
+                <textarea class="form-control" type="hidden" name="intro" id="intro"><%=article.intro%></textarea>
                 <label style="font-size:20px;" for="contenu">Ecrivez ci-dessous votre article :</label>
                 <textarea type="hidden" name="contenu" id="contenu"><%= article.content %></textarea>
                 <label style="font-size:20px;" for="button_submit">Poster votre article :</label>
diff --git a/__frontend/pages/member/login.ejs b/__frontend/pages/member/login.ejs
index 2f6b2c2..fae0d5f 100644
--- a/__frontend/pages/member/login.ejs
+++ b/__frontend/pages/member/login.ejs
@@ -12,6 +12,7 @@
                 rel="stylesheet">
             <link rel="stylesheet" href="/static/css/main.css">
             <link rel="stylesheet" href="/static/css/footer.css">
+            <link rel="stylesheet" href="/static/css/member/login.css">
             <script src="https://www.google.com/recaptcha/api.js"></script>
             <script src="/static/js/member/login.js"> </script>
 
@@ -25,33 +26,29 @@
 <body>
     <%- include ('../include/nav.ejs'); -%>
         <main role="main">
-
             <h1 class="mb-5 text-center">French Gaming Family</h1>
 
-            <section class="container-fluid pl-0 pr-0">
-
-                <section class="col-xl-12 text-center">
-
-                    <form action="/member/login" method="post" class="text-center  col-sm-4 mx-auto  d-flex flex-column"
-                        id="form_login">
-                        <h1 class="h3 mb-3 font-weight-normal">Login</h1>
+            <form action="/member/login" method="post" id="form_login">
+                <div id="margin-container">
+                    <fieldset class="form-group">
+                        <h2>Connexion à votre compte</h2>
+                        <label for="in_login">Pseudo :</label>
                         <input type="text" id="in_login" class="form-control mb-3" placeholder="Pseudo" required=""
                             autofocus="" name="pseudo">
+                        <label for="in_pass">Mot de passe :</label>
                         <input type="password" id="in_pass" class="form-control mb-3" placeholder="Password" required=""
                             name="pass">
                         <div id="error"></div>
                         <button class="button button-success g-recaptcha"
                             data-sitekey="6LcgLPIUAAAAAE3WY-fLlh4HjVM6yiY7NNa0mETn" data-callback='onSubmit'
                             data-action='submit'>Se connecter</button>
-                    </form>
-                </section><!-- /.container -->
-            </section>
+                    </fieldset>
+                </div>
+            </form>
         </main>
         <%- include ('../include/footer.ejs'); -%>
             <%- include ('../include/bootstrap/bootstrap.js.ejs'); -%>
 
-
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/__frontend/pages/member/post.album.ejs b/__frontend/pages/member/post.album.ejs
index 3dee548..32ff97c 100644
--- a/__frontend/pages/member/post.album.ejs
+++ b/__frontend/pages/member/post.album.ejs
@@ -31,8 +31,9 @@
               <div class="form-group d-flex flex-column">
                 <label for="title">Le titre de votre image</label>
                 <input type="text" class="form-control" id="title" name="title" placeholder="Titre">
+                <br>
                 <label class="custom-file-upload" for="album-upload">
-                  <input id="album-upload" type="file" onchange="preview_image(event,'album-form')"
+                  <input class="form-control" id="album-upload" type="file" onchange="preview_image(event,'album-form')"
                     name="album-upload" />
                   Choisir un fichier
                 </label>
diff --git a/__frontend/pages/member/postarticle.ejs b/__frontend/pages/member/postarticle.ejs
index d048240..846aae9 100644
--- a/__frontend/pages/member/postarticle.ejs
+++ b/__frontend/pages/member/postarticle.ejs
@@ -48,13 +48,13 @@
               <legend>Type d'article</legend>
               <div class="form-group d-flex flex-column">
                 <label for="categorie">Catégorie de votre article :</label>
-                <select id="categorie" name="categorie">
-                  <option value="1">Console</option>
-                  <option value="2">Jeux</option>
-                  <option value="3">Informatique</option>
-                  <option value="4">Musique</option>
-                  <option value="5">Partenaires</option>
-                  <option value="6">Divers</option>
+                <select class="form-control" id="categorie" name="categorie">
+                  <option class="form-control" value="1">Console</option>
+                  <option class="form-control" value="2">Jeux</option>
+                  <option class="form-control" value="3">Informatique</option>
+                  <option class="form-control" value="4">Musique</option>
+                  <option class="form-control" value="5">Partenaires</option>
+                  <option class="form-control" value="6">Divers</option>
                 </select>
               </div>
             </fieldset>
@@ -64,14 +64,15 @@
               <div class="form-group d-flex flex-column">
                 <label for="title">Le titre de votre article</label>
                 <input type="text" class="form-control" id="title" name="title" placeholder="Titre">
+                <br>
                 <label class="custom-file-upload" for="miniature-upload">
-                  <input id="miniature-upload" type="file" onchange="preview_image(event,'miniature-form')"
-                    name="miniature-upload" />
+                  <input class="form-control" id="miniature-upload" type="file"
+                    onchange="preview_image(event,'miniature-form')" name="miniature-upload" />
                   Choisir un fichier
                 </label>
                 <img style="width:30%;height:30%;" id="miniature-form">
                 <label style="font-size:20px;" for="intro">Ecrivez ci-dessous l'intro de l'article :</label>
-                <textarea type="hidden" name="intro" id="intro"></textarea>
+                <textarea class="form-control" type="hidden" name="intro" id="intro"></textarea>
                 <label style="font-size:20px;" for="contenu">Ecrivez ci-dessous votre article :</label>
                 <textarea type="hidden" name="contenu" id="contenu"></textarea>
                 <h6>Poster votre article :</h6>
diff --git a/__frontend/pages/member/register.ejs b/__frontend/pages/member/register.ejs
index 8e2f28d..4751b7b 100644
--- a/__frontend/pages/member/register.ejs
+++ b/__frontend/pages/member/register.ejs
@@ -10,6 +10,7 @@
     <!-- CSS FILES -->
     <link rel="stylesheet" href="/static/css/main.css">
     <link rel="stylesheet" href="/static/css/footer.css">
+    <link rel="stylesheet" href="/static/css/member/register.css">
     <title>French Gaming Family</title>
     <script src="https://www.google.com/recaptcha/api.js"></script>
     <script>
diff --git a/__frontend/pages/partners.ejs b/__frontend/pages/partners.ejs
index 278f88c..f9e6b59 100644
--- a/__frontend/pages/partners.ejs
+++ b/__frontend/pages/partners.ejs
@@ -165,7 +165,7 @@
                                     <label for="q6">Avez-vous une demande, question, remarque à laisser à notre
                                         intention ?</label>
 
-                                    <textarea class=" question" id="q6" name="q6" id="question" cols="40"
+                                    <textarea class="form-control question" id="q6" name="q6" id="question" cols="40"
                                         rows="4"> </textarea>
 
                                 </div>
diff --git a/__frontend/pages/request.ejs b/__frontend/pages/request.ejs
index 0b3a628..72af40c 100644
--- a/__frontend/pages/request.ejs
+++ b/__frontend/pages/request.ejs
@@ -41,7 +41,8 @@
                                 <p> Pour toute demande de partenariat cliquez : <a href="/partners">ici</a></p>
                             </label>
                             <p> Pour toute demande lié à l'équipe du staff cliquez : <a href="/jobs">ici</a></p></label>
-                            <textarea name="ta_message" id="ta_message" cols="40" rows="4"> </textarea>
+                            <textarea class="form-control" name="ta_message" id="ta_message" cols="40"
+                                rows="4"> </textarea>
                         </div>
 
                         <input type="hidden" name="a" value="demande">
diff --git a/__frontend/public/css/admin/adminupdatepage.css b/__frontend/public/css/admin/adminupdatepage.css
index 85c344b..4340c65 100644
--- a/__frontend/public/css/admin/adminupdatepage.css
+++ b/__frontend/public/css/admin/adminupdatepage.css
@@ -1,3 +1,4 @@
+@import '../theme-variable.css';
 #overlay1{
     display: none;
     position: fixed;
@@ -8,6 +9,9 @@
 #overlay1:target{
     display: block;
 }
+.form-control{
+    background: var(--container-color) ;
+  }
 #overlay2{
     display: none;
     position: fixed;
@@ -19,7 +23,7 @@
     display: block;
 }
 .popup_block{
-    background: #fff;
+    background: var(--container-color);
     padding: 20px;
     border: 20px solid #ddd;
     position: relative;
diff --git a/__frontend/public/css/admin/albums.css b/__frontend/public/css/admin/albums.css
index 250f6f4..57e55a8 100644
--- a/__frontend/public/css/admin/albums.css
+++ b/__frontend/public/css/admin/albums.css
@@ -1,9 +1,10 @@
+@import "../theme-variable.css";
 table,td {
-    border: 1px solid #333;
+    border: var(--border-size) var(--border-type) var(--border-color);
 }
 thead,tfoot {
-    background-color: #333;
-    color: #fff;
+    background-color: var(--background-color);
+    color: var(--color);
 }
 
 #center{
diff --git a/__frontend/public/css/admin/announcements.css b/__frontend/public/css/admin/announcements.css
index dcaf32a..2569a74 100644
--- a/__frontend/public/css/admin/announcements.css
+++ b/__frontend/public/css/admin/announcements.css
@@ -1,3 +1,7 @@
+@import '../theme-variable.css';
+.form-control{
+  background: var(--container-color) ;
+}
 .switch {
     position: relative;
     display: inline-block;
@@ -61,13 +65,13 @@
   }
 
 
-  table,td {
-    border: 1px solid #333;
-}
-thead,tfoot {
-    background-color: #333;
-    color: #fff;
-}
+  table,td,th {
+    border: var(--border-size) var(--border-type) var(--border-color);
+  }
+  thead,tfoot {
+    background-color: var(--background-color);
+    color: var(--color);
+  }
 
 #center{
     display: block;
diff --git a/__frontend/public/css/admin/badges.css b/__frontend/public/css/admin/badges.css
new file mode 100644
index 0000000..9f95235
--- /dev/null
+++ b/__frontend/public/css/admin/badges.css
@@ -0,0 +1,28 @@
+@import '../theme-variable.css';
+table,td,th {
+  border: var(--border-size) var(--border-type) var(--border-color);
+}
+thead,tfoot {
+  background-color: var(--background-color);
+  color: var(--color);
+}
+
+#center{
+  display: block;
+  text-align: center;
+}
+#table-badges{
+  margin: auto;
+  max-width: 70%;
+}
+.avatar{width: 60px;border-radius: 50%;}
+
+@media screen and (max-width: 550px){
+  table{
+      zoom:0.65;
+  }
+  #table-members{
+      margin: auto;
+      max-width: 95%;
+  }
+}
\ No newline at end of file
diff --git a/__frontend/public/css/admin/forum.categorie.css b/__frontend/public/css/admin/forum.categorie.css
new file mode 100644
index 0000000..20f50d3
--- /dev/null
+++ b/__frontend/public/css/admin/forum.categorie.css
@@ -0,0 +1,27 @@
+table,td,th {
+  border: var(--border-size) var(--border-type) var(--border-color);
+}
+thead,tfoot {
+  background-color: var(--background-color);
+  color: var(--color);
+}
+
+#center{
+  display: block;
+  text-align: center;
+}
+#table-announcements{
+  margin: auto;
+  max-width: 70%;
+}
+.avatar{width: 60px;border-radius: 50%;}
+
+@media screen and (max-width: 550px){
+  table{
+      zoom:0.65;
+  }
+  #table-members{
+      margin: auto;
+      max-width: 95%;
+  }
+}
\ No newline at end of file
diff --git a/__frontend/public/css/admin/forum.container.css b/__frontend/public/css/admin/forum.container.css
new file mode 100644
index 0000000..14408d0
--- /dev/null
+++ b/__frontend/public/css/admin/forum.container.css
@@ -0,0 +1,27 @@
+table,td,th {
+    border: var(--border-size) var(--border-type) var(--border-color);
+  }
+  thead,tfoot {
+    background-color: var(--background-color);
+    color: var(--color);
+  }
+
+#center{
+    display: block;
+    text-align: center;
+}
+#table-announcements{
+    margin: auto;
+    max-width: 70%;
+}
+.avatar{width: 60px;border-radius: 50%;}
+
+@media screen and (max-width: 550px){
+    table{
+        zoom:0.65;
+    }
+    #table-members{
+        margin: auto;
+        max-width: 95%;
+    }
+}
\ No newline at end of file
diff --git a/__frontend/public/css/admin/forum.css b/__frontend/public/css/admin/forum.css
new file mode 100644
index 0000000..14408d0
--- /dev/null
+++ b/__frontend/public/css/admin/forum.css
@@ -0,0 +1,27 @@
+table,td,th {
+    border: var(--border-size) var(--border-type) var(--border-color);
+  }
+  thead,tfoot {
+    background-color: var(--background-color);
+    color: var(--color);
+  }
+
+#center{
+    display: block;
+    text-align: center;
+}
+#table-announcements{
+    margin: auto;
+    max-width: 70%;
+}
+.avatar{width: 60px;border-radius: 50%;}
+
+@media screen and (max-width: 550px){
+    table{
+        zoom:0.65;
+    }
+    #table-members{
+        margin: auto;
+        max-width: 95%;
+    }
+}
\ No newline at end of file
diff --git a/__frontend/public/css/admin/forum.modos.css b/__frontend/public/css/admin/forum.modos.css
new file mode 100644
index 0000000..20f50d3
--- /dev/null
+++ b/__frontend/public/css/admin/forum.modos.css
@@ -0,0 +1,27 @@
+table,td,th {
+  border: var(--border-size) var(--border-type) var(--border-color);
+}
+thead,tfoot {
+  background-color: var(--background-color);
+  color: var(--color);
+}
+
+#center{
+  display: block;
+  text-align: center;
+}
+#table-announcements{
+  margin: auto;
+  max-width: 70%;
+}
+.avatar{width: 60px;border-radius: 50%;}
+
+@media screen and (max-width: 550px){
+  table{
+      zoom:0.65;
+  }
+  #table-members{
+      margin: auto;
+      max-width: 95%;
+  }
+}
\ No newline at end of file
diff --git a/__frontend/public/css/admin/index.css b/__frontend/public/css/admin/index.css
index c176591..20048fa 100644
--- a/__frontend/public/css/admin/index.css
+++ b/__frontend/public/css/admin/index.css
@@ -1,3 +1,4 @@
+@import '../theme-variable.css';
 #container{
     display: flex;
     justify-content: space-around;
@@ -14,6 +15,7 @@
     padding: 1%;
     border: 1px black solid ;
     position: relative;
+    background-color: var(--container-color);
 }
 
 .icon{
diff --git a/__frontend/public/css/admin/infos.css b/__frontend/public/css/admin/infos.css
index 4f80209..6784e3d 100644
--- a/__frontend/public/css/admin/infos.css
+++ b/__frontend/public/css/admin/infos.css
@@ -5,7 +5,7 @@
 #container{
     width: var(--width);
     margin-left: var(--margin-left);
-    background-color: var(--light);
+    background-color: var(--container-color);
 }
 
 @media screen and (max-width: 550px){
diff --git a/__frontend/public/css/admin/members.css b/__frontend/public/css/admin/members.css
index 5dbdd48..de9d158 100644
--- a/__frontend/public/css/admin/members.css
+++ b/__frontend/public/css/admin/members.css
@@ -1,3 +1,4 @@
+@import '../theme-variable.css';
 table,td {
     border: 1px solid #333;
 }
@@ -15,13 +16,10 @@ thead,tfoot {
     max-width: 70%;
 }
 tr:nth-child(even) {
-    background-color: #f2f2f2;
+    background-color: var(--container-color);
   }
 .avatar{width: 60px;border-radius: 50%;}
-/*::selection{
-color: #fff;
-background: #664AFF;
-}*/
+
 
 .wrapper{
     max-width: 450px;
diff --git a/__frontend/public/css/admin/procedures.css b/__frontend/public/css/admin/procedures.css
index 4f80209..6784e3d 100644
--- a/__frontend/public/css/admin/procedures.css
+++ b/__frontend/public/css/admin/procedures.css
@@ -5,7 +5,7 @@
 #container{
     width: var(--width);
     margin-left: var(--margin-left);
-    background-color: var(--light);
+    background-color: var(--container-color);
 }
 
 @media screen and (max-width: 550px){
diff --git a/__frontend/public/css/admin/update/album.css b/__frontend/public/css/admin/update/album.css
index de0efdb..a664b82 100644
--- a/__frontend/public/css/admin/update/album.css
+++ b/__frontend/public/css/admin/update/album.css
@@ -1,6 +1,6 @@
 #container{
     max-width: 70%;
-    background-color: #ffffff;
+    background-color: var(--container-color);
     margin-left: 15%;
     padding: 10px;
 
diff --git a/__frontend/public/css/admin/update/article.css b/__frontend/public/css/admin/update/article.css
new file mode 100644
index 0000000..17135ae
--- /dev/null
+++ b/__frontend/public/css/admin/update/article.css
@@ -0,0 +1,4 @@
+@import '../../theme-variable.css';
+.form-control{
+  background: var(--container-color);
+}
\ No newline at end of file
diff --git a/__frontend/public/css/admin/view.job.css b/__frontend/public/css/admin/view.job.css
index 0a5c8ca..c10c484 100644
--- a/__frontend/public/css/admin/view.job.css
+++ b/__frontend/public/css/admin/view.job.css
@@ -1,5 +1,5 @@
 #container-demande{
     width: 95%;
     margin-left: 2.5%;
-    background-color: #ffffff;
+    background-color: var(--container-color);
 }
\ No newline at end of file
diff --git a/__frontend/public/css/admin/view.partner.css b/__frontend/public/css/admin/view.partner.css
new file mode 100644
index 0000000..35a76ff
--- /dev/null
+++ b/__frontend/public/css/admin/view.partner.css
@@ -0,0 +1,5 @@
+#container-demande{
+  width: 70%;
+  margin-left: 15%;
+  background-color: var(--container-color);
+}
\ No newline at end of file
diff --git a/__frontend/public/css/admin/view.request.css b/__frontend/public/css/admin/view.request.css
index 4affdbc..f803ed4 100644
--- a/__frontend/public/css/admin/view.request.css
+++ b/__frontend/public/css/admin/view.request.css
@@ -1,5 +1,5 @@
 #container-demande{
     width: 70%;
     margin-left: 15%;
-    background-color: #ffffff;
+    background-color: var(--container-color);
   }
\ No newline at end of file
diff --git a/__frontend/public/css/album/album.css b/__frontend/public/css/album/album.css
index eb55c0c..9f4fe0a 100644
--- a/__frontend/public/css/album/album.css
+++ b/__frontend/public/css/album/album.css
@@ -1,6 +1,6 @@
-
+@import '../theme-variable.css';
 #container{
-    background-color: #ffffff;
+    background-color: var(--container-color);
     width: 98%;
     margin-left: 1%;
     display: flex;
@@ -85,7 +85,7 @@
 
 #buttons-page{
     text-align: center;
-    background-color: #ffffff;
+    background-color: var(--container-color); ;
     margin-bottom: 15px;
     width : 98%;
     margin-left: 1%;
diff --git a/__frontend/public/css/articles/articles.css b/__frontend/public/css/articles/articles.css
index 66c13e3..151eb2e 100644
--- a/__frontend/public/css/articles/articles.css
+++ b/__frontend/public/css/articles/articles.css
@@ -9,7 +9,7 @@
     font-weight: 1000;
 } 
 .article{
-    background-color: #ffffff;
+    background-color: var(--container-color);
     margin-left: 1%;
     margin-right: 1%;
     margin-top: 2%;
diff --git a/__frontend/public/css/forum/categorie.css b/__frontend/public/css/forum/categorie.css
index 4de4c0f..3e0d143 100644
--- a/__frontend/public/css/forum/categorie.css
+++ b/__frontend/public/css/forum/categorie.css
@@ -3,11 +3,10 @@
 #container{
     width: 70%;
     margin: auto;
-    background-color: #f2f2f2;
+    background-color: var(--container-color);;
     margin-top: 15px;
     margin-bottom: 15px;
 }
-
 table,td,th {
     border: var(--border-size) var(--border-type) var(--border-color);
 }
@@ -16,7 +15,9 @@ thead,tfoot {
     color: var(--color);
 }
 
-
+.form-control{
+    background: var(--container-color) ;
+}
 
 #table-forums{
     width: 80%;
diff --git a/__frontend/public/css/forum/categories.css b/__frontend/public/css/forum/categories.css
index 3725844..b41995a 100644
--- a/__frontend/public/css/forum/categories.css
+++ b/__frontend/public/css/forum/categories.css
@@ -4,7 +4,7 @@
     margin-bottom: 2%;
     width: 80%;
     margin-left: 10%;
-    background-color: var(--light);
+    background-color: var(--container-color);;
 }
 .cat_container{
     display: flex;
diff --git a/__frontend/public/css/forum/topic.css b/__frontend/public/css/forum/topic.css
index 9e8dafa..79b7f35 100644
--- a/__frontend/public/css/forum/topic.css
+++ b/__frontend/public/css/forum/topic.css
@@ -1,3 +1,4 @@
+@import '../theme-variable.css';
 #container{
     margin-top: 10px;
     display: flex;
@@ -5,7 +6,10 @@
 }
 #container-topic{
     width: 60%;
-    background-color: #ffffff;
+    background-color: var(--container-color);
+}
+.form-control{
+    background: var(--container-color) ;
 }
 #element{
     margin-top: 15px;
@@ -36,7 +40,7 @@
 
 /*REPLY*/
 #container-reply{
-    background-color: #e9ecef;
+    background-color: var(--container-color);
     margin: auto;
     width : 100%;
     padding: 1px;
@@ -46,7 +50,7 @@
     margin-bottom: 10px;
     margin-left: auto;
     margin-right: auto;
-    width : 50%;
+    width : 70%;
 }
 /*PAGES*/
 #button-pages{
@@ -58,7 +62,6 @@
 @media screen and (max-width: 1200px ){
     #container-topic{
         width: 80%;
-        background-color: #ffffff;
     }
     .reply-legent{
         font-size: 20px;
@@ -68,7 +71,6 @@
 @media screen and (max-width: 700px){
     #container-topic{
         width: 98%;
-        background-color: #ffffff;
     }
     .button-control{
         width: 5%;
diff --git a/__frontend/public/css/home.css b/__frontend/public/css/home.css
index 92f5376..7eef733 100644
--- a/__frontend/public/css/home.css
+++ b/__frontend/public/css/home.css
@@ -14,7 +14,16 @@
 .separation-title{
   margin-left:1%;
 }
+.button-margin{
+  margin-top: 75px;
+}
+.button-article{
+  margin-top: 5px;
+  position: absolute;
+  right : 5px;
+  bottom: 5px;
 
+}
 
 /*  ANNONCES  */
 
diff --git a/__frontend/public/css/main.css b/__frontend/public/css/main.css
index a7e822f..5f1457b 100644
--- a/__frontend/public/css/main.css
+++ b/__frontend/public/css/main.css
@@ -2,7 +2,7 @@
 * {
     margin: 0;
     padding: 0;
-    color: whitesmoke
+    color: whitesmoke;
 }
 body{
     background-color: rgb(24, 0, 56);
@@ -10,6 +10,7 @@ body{
     height: 100vh;
     flex-direction: column;
 }
+
 main{
     flex: 1 0 auto;
 }
@@ -17,7 +18,6 @@ main{
     color: #fff;
     background: black;
 }
-a:hover{color:black}
 hr{color:white}
 .grecaptcha-badge { z-index : 10 ; }
 .margin-5-right{margin-right: 5px;}
@@ -27,7 +27,7 @@ hr{color:white}
 .navigation-bar{background-color:#013650}
 .ban{width:400px;margin-top : -20px}
 #menu-compte{margin-right: 10px;}
-
+.form-control{color:white;font-weight: 600;background: var(--container-color);}
 
 #img-article{max-width: 90%;}
 #avatar{border-radius: 50%;width: 64px;height:64px;border:1px solid black}
@@ -57,7 +57,9 @@ hr{color:white}
 }
 #text-center{text-align: center;}
 
-a{color : black}
+a{color : rgb(179, 179, 179)}
+a:hover{color:#333}
+
 
 fieldset.form-group {
     border: 1px groove black !important;
@@ -174,5 +176,7 @@ legend {
     .nav-li,.nav-item{
         margin-left: 10px;
     }
-
+    * {
+        zoom: 0.97;
+    }
 }
\ No newline at end of file
diff --git a/__frontend/public/css/member/account.css b/__frontend/public/css/member/account.css
index 2d1da77..e2668aa 100644
--- a/__frontend/public/css/member/account.css
+++ b/__frontend/public/css/member/account.css
@@ -9,6 +9,7 @@
     background-color: var(--container-color);
     box-shadow: 0px 3px 10px black;
     padding: 20px;
+    margin-bottom: 2%;
 }
 
 
diff --git a/__frontend/public/css/member/edit.css b/__frontend/public/css/member/edit.css
index 259d718..048bc76 100644
--- a/__frontend/public/css/member/edit.css
+++ b/__frontend/public/css/member/edit.css
@@ -4,20 +4,23 @@ legend {
     font-weight: bold;
     font-variant: small-caps;
   }
-   
+
 label {
     min-width: 200px;
     display: inline-block;
     vertical-align: top;
     margin: 6px;
 }
+.form-control{
+    background: var(--container-color) ;
+}
 
 .account-infos{
     margin-top: 1%;
     margin-bottom: 1%;
     width: 98%;
     margin-left : 1%;
-    background-color: var(--light);
+    background-color: var(--container-color);
     border : 1px solid;
     border-radius: 5px;
     
@@ -29,6 +32,8 @@ label {
     border : 1px solid;
     border-radius: 7px;
     border-color: grey;
+    background: var(--container-color) ;
+
 }
 
 .container-champ{display: flex;justify-content: flex-start;margin-top: 10px;}
diff --git a/__frontend/public/css/member/login.css b/__frontend/public/css/member/login.css
new file mode 100644
index 0000000..441bbb3
--- /dev/null
+++ b/__frontend/public/css/member/login.css
@@ -0,0 +1,11 @@
+@import "../theme-variable.css";
+
+#margin-container{
+  margin-left: 25%;
+  width: 50%;
+
+}
+
+.form-control{
+  background: var(--container-color) ;
+}
diff --git a/__frontend/public/css/member/register.css b/__frontend/public/css/member/register.css
new file mode 100644
index 0000000..4c6f264
--- /dev/null
+++ b/__frontend/public/css/member/register.css
@@ -0,0 +1,9 @@
+@import "../theme-variable.css";
+
+fieldset{
+  background-color: var(--container-color);
+}
+
+.form-control{
+  background: var(--container-color) ;
+}
diff --git a/__frontend/public/css/member/requests.css b/__frontend/public/css/member/requests.css
index bed4fae..a98dfeb 100644
--- a/__frontend/public/css/member/requests.css
+++ b/__frontend/public/css/member/requests.css
@@ -1,9 +1,10 @@
-table,td {
-    border: 1px solid #333;
+@import '../theme-variable.css';
+table,td,th {
+    border: var(--border-size) var(--border-type) var(--border-color);
 }
 thead,tfoot {
-    background-color: #333;
-    color: #fff;
+    background-color: var(--background-color);
+    color: var(--color);
 }
 
 .table-requests{
diff --git a/__frontend/public/css/site/announcements.css b/__frontend/public/css/site/announcements.css
index 14ea786..1d21684 100644
--- a/__frontend/public/css/site/announcements.css
+++ b/__frontend/public/css/site/announcements.css
@@ -9,7 +9,7 @@
 .author-avatar{width: 12%;}
 
 .announcement{
-    background-color: var(--light);
+    background-color: var(--container-color);;
     border-radius: 1%;
     margin-top :  2%;
     margin-right: 2%;
diff --git a/__frontend/public/css/theme-variable.css b/__frontend/public/css/theme-variable.css
index 053973c..0a2bc11 100644
--- a/__frontend/public/css/theme-variable.css
+++ b/__frontend/public/css/theme-variable.css
@@ -1,7 +1,7 @@
 :root{
     --color-grey : #666969;
-    --container-color : #e2f653;
-
+    --container-color : #1b1e3d;
+    --default-color: #1b1e3d;
 
     --blue:#007bff;
     --indigo:#6610f2;
@@ -48,12 +48,12 @@
 }
 table,td{
     --border-size : 1px;
-    --border-color : #333;
+    --border-color : whitesmoke;
     --border-type : solid;
 }
 thead,tfoot{
-    --background-color : #333;
-    --color : #f2f2f2;
+    --background-color : #1b1e3d;
+    --color : whitesmoke;
 }
 
 #container{
diff --git a/__frontend/public/markdown/css/simplemde.css b/__frontend/public/markdown/css/simplemde.css
index c81376a..f16233f 100644
--- a/__frontend/public/markdown/css/simplemde.css
+++ b/__frontend/public/markdown/css/simplemde.css
@@ -4,4 +4,4 @@
  * @link https://github.com/NextStepWebs/simplemde-markdown-editor
  * @license MIT
  */
- .CodeMirror{color:#000}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-ruler{border-left:1px solid #ccc;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:0;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected,.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}.CodeMirror{height:auto;min-height:300px;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:10px;font:inherit;z-index:1}.CodeMirror-scroll{min-height:300px}.CodeMirror-fullscreen{background:#fff;position:fixed!important;top:50px;left:0;right:0;bottom:0;height:auto;z-index:9}.CodeMirror-sided{width:50%!important}.editor-toolbar{position:relative;opacity:.6;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;padding:0 10px;border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;border-top-left-radius:4px;border-top-right-radius:4px}.editor-toolbar:after,.editor-toolbar:before{display:block;content:' ';height:1px}.editor-toolbar:before{margin-bottom:8px}.editor-toolbar:after{margin-top:8px}.editor-toolbar:hover,.editor-wrapper input.title:focus,.editor-wrapper input.title:hover{opacity:.8}.editor-toolbar.fullscreen{width:100%;height:50px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-top:10px;padding-bottom:10px;box-sizing:border-box;background:#fff;border:0;position:fixed;top:0;left:0;opacity:1;z-index:9}.editor-toolbar.fullscreen::before{width:20px;height:50px;background:-moz-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));background:-webkit-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-o-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:linear-gradient(to right,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);position:fixed;top:0;left:0;margin:0;padding:0}.editor-toolbar.fullscreen::after{width:20px;height:50px;background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);position:fixed;top:0;right:0;margin:0;padding:0}.editor-toolbar a{display:inline-block;text-align:center;text-decoration:none!important;color:#2c3e50!important;width:30px;height:30px;margin:0;border:1px solid transparent;border-radius:3px;cursor:pointer}.editor-toolbar a.active,.editor-toolbar a:hover{background:#fcfcfc;border-color:#95a5a6}.editor-toolbar a:before{line-height:30px}.editor-toolbar i.separator{display:inline-block;width:0;border-left:1px solid #d9d9d9;border-right:1px solid #fff;color:transparent;text-indent:-10px;margin:0 6px}.editor-toolbar a.fa-header-x:after{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:65%;vertical-align:text-bottom;position:relative;top:2px}.editor-toolbar a.fa-header-1:after{content:"1"}.editor-toolbar a.fa-header-2:after{content:"2"}.editor-toolbar a.fa-header-3:after{content:"3"}.editor-toolbar a.fa-header-bigger:after{content:"▲"}.editor-toolbar a.fa-header-smaller:after{content:"▼"}.editor-toolbar.disabled-for-preview a:not(.no-disable){pointer-events:none;background:#fff;border-color:transparent;text-shadow:inherit}@media only screen and (max-width:700px){.editor-toolbar a.no-mobile{display:none}}.editor-statusbar{padding:8px 10px;font-size:12px;color:#959694;text-align:right}.editor-statusbar span{display:inline-block;min-width:4em;margin-left:1em}.editor-preview,.editor-preview-side{padding:10px;background:#fafafa;overflow:auto;display:none;box-sizing:border-box}.editor-statusbar .lines:before{content:'lines: '}.editor-statusbar .words:before{content:'words: '}.editor-statusbar .characters:before{content:'characters: '}.editor-preview{position:absolute;width:100%;height:100%;top:0;left:0;z-index:7}.editor-preview-side{position:fixed;bottom:0;width:50%;top:50px;right:0;z-index:9;border:1px solid #ddd}.editor-preview-active,.editor-preview-active-side{display:block}.editor-preview-side>p,.editor-preview>p{margin-top:0}.editor-preview pre,.editor-preview-side pre{background:#eee;margin-bottom:10px}.editor-preview table td,.editor-preview table th,.editor-preview-side table td,.editor-preview-side table th{border:1px solid #ddd;padding:5px}.CodeMirror .CodeMirror-code .cm-tag{color:#63a35c}.CodeMirror .CodeMirror-code .cm-attribute{color:#795da3}.CodeMirror .CodeMirror-code .cm-string{color:#183691}.CodeMirror .CodeMirror-selected{background:#d9d9d9}.CodeMirror .CodeMirror-code .cm-header-1{font-size:200%;line-height:200%}.CodeMirror .CodeMirror-code .cm-header-2{font-size:160%;line-height:160%}.CodeMirror .CodeMirror-code .cm-header-3{font-size:125%;line-height:125%}.CodeMirror .CodeMirror-code .cm-header-4{font-size:110%;line-height:110%}.CodeMirror .CodeMirror-code .cm-comment{background:rgba(0,0,0,.05);border-radius:2px}.CodeMirror .CodeMirror-code .cm-link{color:#7f8c8d}.CodeMirror .CodeMirror-code .cm-url{color:#aab2b3}.CodeMirror .CodeMirror-code .cm-strikethrough{text-decoration:line-through}.CodeMirror .CodeMirror-placeholder{opacity:.5}.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:rgba(255,0,0,.15)}
\ No newline at end of file
+ .CodeMirror{color:#000}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#1b1e3d}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-ruler{border-left:1px solid #ccc;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#1b1e3d}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:0;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected,.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}.CodeMirror{height:auto;min-height:300px;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:10px;font:inherit;z-index:1}.CodeMirror-scroll{min-height:300px}.CodeMirror-fullscreen{background:#1b1e3d;position:fixed!important;top:50px;left:0;right:0;bottom:0;height:auto;z-index:9}.CodeMirror-sided{width:50%!important}.editor-toolbar{position:relative;opacity:.6;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;padding:0 10px;border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;border-top-left-radius:4px;border-top-right-radius:4px}.editor-toolbar:after,.editor-toolbar:before{display:block;content:' ';height:1px}.editor-toolbar:before{margin-bottom:8px}.editor-toolbar:after{margin-top:8px}.editor-toolbar:hover,.editor-wrapper input.title:focus,.editor-wrapper input.title:hover{opacity:.8}.editor-toolbar.fullscreen{width:100%;height:50px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-top:10px;padding-bottom:10px;box-sizing:border-box;background:#1b1e3d;border:0;position:fixed;top:0;left:0;opacity:1;z-index:9}.editor-toolbar.fullscreen::before{width:20px;height:50px;background:-moz-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));background:-webkit-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-o-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:linear-gradient(to right,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);position:fixed;top:0;left:0;margin:0;padding:0}.editor-toolbar.fullscreen::after{width:20px;height:50px;background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);position:fixed;top:0;right:0;margin:0;padding:0}.editor-toolbar a{display:inline-block;text-align:center;text-decoration:none!important;color:#2c3e50!important;width:30px;height:30px;margin:0;border:1px solid transparent;border-radius:3px;cursor:pointer}.editor-toolbar a.active,.editor-toolbar a:hover{background:#fcfcfc;border-color:#95a5a6}.editor-toolbar a:before{line-height:30px}.editor-toolbar i.separator{display:inline-block;width:0;border-left:1px solid #d9d9d9;border-right:1px solid #1b1e3d;color:transparent;text-indent:-10px;margin:0 6px}.editor-toolbar a.fa-header-x:after{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:65%;vertical-align:text-bottom;position:relative;top:2px}.editor-toolbar a.fa-header-1:after{content:"1"}.editor-toolbar a.fa-header-2:after{content:"2"}.editor-toolbar a.fa-header-3:after{content:"3"}.editor-toolbar a.fa-header-bigger:after{content:"▲"}.editor-toolbar a.fa-header-smaller:after{content:"▼"}.editor-toolbar.disabled-for-preview a:not(.no-disable){pointer-events:none;background:#1b1e3d;border-color:transparent;text-shadow:inherit}@media only screen and (max-width:700px){.editor-toolbar a.no-mobile{display:none}}.editor-statusbar{padding:8px 10px;font-size:12px;color:#959694;text-align:right}.editor-statusbar span{display:inline-block;min-width:4em;margin-left:1em}.editor-preview,.editor-preview-side{padding:10px;background:#1b1e3d;overflow:auto;display:none;box-sizing:border-box}.editor-statusbar .lines:before{content:'lines: '}.editor-statusbar .words:before{content:'words: '}.editor-statusbar .characters:before{content:'characters: '}.editor-preview{position:absolute;width:100%;height:100%;top:0;left:0;z-index:7}.editor-preview-side{position:fixed;bottom:0;width:50%;top:50px;right:0;z-index:9;border:1px solid #ddd}.editor-preview-active,.editor-preview-active-side{display:block}.editor-preview-side>p,.editor-preview>p{margin-top:0}.editor-preview pre,.editor-preview-side pre{background:#eee;margin-bottom:10px}.editor-preview table td,.editor-preview table th,.editor-preview-side table td,.editor-preview-side table th{border:1px solid #ddd;padding:5px}.CodeMirror .CodeMirror-code .cm-tag{color:#63a35c}.CodeMirror .CodeMirror-code .cm-attribute{color:#795da3}.CodeMirror .CodeMirror-code .cm-string{color:#183691}.CodeMirror .CodeMirror-selected{background:#d9d9d9}.CodeMirror .CodeMirror-code .cm-header-1{font-size:200%;line-height:200%}.CodeMirror .CodeMirror-code .cm-header-2{font-size:160%;line-height:160%}.CodeMirror .CodeMirror-code .cm-header-3{font-size:125%;line-height:125%}.CodeMirror .CodeMirror-code .cm-header-4{font-size:110%;line-height:110%}.CodeMirror .CodeMirror-code .cm-comment{background:rgba(0,0,0,.05);border-radius:2px}.CodeMirror .CodeMirror-code .cm-link{color:#7f8c8d}.CodeMirror .CodeMirror-code .cm-url{color:#aab2b3}.CodeMirror .CodeMirror-code .cm-strikethrough{text-decoration:line-through}.CodeMirror .CodeMirror-placeholder{opacity:.5}.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:rgba(255,0,0,.15)}
\ No newline at end of file