incorporate Stro's feedback

backend/static/style/base.css

@@ -1,5 +1,6 @@
 .nav ul {
     list-style-type: none;
+    font-weight: bold;
     margin: 0;
     padding: 0;
     overflow: hidden;
@@ -17,7 +18,7 @@
 
 .nav li a {
     display: block;
-    color: white;
+    color: antiquewhite;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
@@ -85,7 +86,7 @@ body {
 }
 
 .step {
-    border: 3px #bbb solid;
+    border: 3px antiquewhite solid;
     border-radius: 50px;
     margin: 0 5%;
     flex-grow: 1;
@@ -95,7 +96,7 @@ body {
 }
 
 .step h2 {
-    color: #bbb;
+    color: #ff7f00;
 }
 
 .step:hover {
@@ -134,17 +135,19 @@ p a {
 
 .contribute {
     display: inline;
-    padding: 20px;
+    padding: 15px;
     border-radius: 30px;
-    background-color: #ff7f00;
+    background-color: #A35200;
     -webkit-transition: all .2s ease-in-out;
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
 }
 
-.contribute a {
+.contribute,
-    color: black !important;
+.content a {
+    font-weight: bold;
+    color: antiquewhite !important;
 }
 
 .contribute a:hover {
@@ -156,10 +159,14 @@ p a {
 }
 
 .info div h3 {
-    color: #ff7f00;
+    color: antiquewhite;
     margin-bottom: 10px;
 }
 
+.info h3 {
+    color: antiquewhite;
+}
+
 .info div h1 {
     color: #ff7f00;
     margin-bottom: 20px;

backend/static/style/help.css

@@ -14,7 +14,7 @@
 
 .p_left {
     margin: 5px;
-    height: 70%;
+    height: 40%;
     width: 100%;
     clip-path: polygon(100% 0%, 50% 48%, 100% 100%, 50% 100%, 0% 50%, 50% 0);
     background-color: #A35200;
@@ -22,7 +22,7 @@
 
 .p_right {
     margin: 5px;
-    height: 70%;
+    height: 40%;
     width: 100%;
     background-color: #A35200;
     clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 100%, 50% 50%, 0% 0%);
@@ -66,7 +66,7 @@
     top: 100%;
     left: 50%;
     transform: translate(-50%, -120%);
-    color: #eee;
+    color: antiquewhite;
     font-size: 1.5em;
     margin: auto;
 }
@@ -108,7 +108,7 @@
 }
 
 .help_content_1 {
-    color: #eee;
+    color: antiquewhite;
 }
 
 .help_content_1>div {
@@ -134,7 +134,7 @@
 
 .help_content_2 h3 {
     margin: 5px;
-    color: #bbb;
+    color: antiquewhite;
 }
 
 .arrow {
@@ -151,7 +151,7 @@
 
 .content_wrapper ul {
     margin: 10px inherit;
-    color: #eee;
+    color: antiquewhite;
     font-size: 1.5em;
 }
 
@@ -160,7 +160,7 @@
 }
 
 .help_content_1 h2 {
-    color: #bbb;
+    color: antiquewhite;
     margin-top: 2em;
     font-size: 1.7;
 }
@@ -172,7 +172,7 @@ pre {
 
 pre code {
     background-color: #333;
-    border: 1px solid #eee;
+    border: 1px solid antiquewhite;
     display: block;
     padding: 20px;
 }

backend/static/style/style.css

@@ -2,6 +2,7 @@ html,
 body {
     margin: 0;
     padding: 0;
+    font-family: sans-serif;
 }
 
 .small {
@@ -90,7 +91,7 @@ body {
 
 .map {
     padding: 5px;
-    background-color: lightgray;
+    background-color: antiquewhite;
     color: black;
 }
 
@@ -111,7 +112,7 @@ body {
     /* width: 25%; */
     justify-content: space-between;
     align-items: center;
-    color: #aaa;
+    color: antiquewhite;
 }
 
 .creator h1 {

backend/templates/index.html.tera

@@ -8,7 +8,7 @@
             <h1>
                 Planetwars
             </h1>
-            <h3 style="color: #bbb">
+            <h3>
                 powered by MOZAIC
             </h3>
         </div>
@@ -36,7 +36,7 @@
             </a>
         </div>
         <div>
-            <p style="font-size: 1.4em;">If you want to build your own bot, and own the competition. Checkout <a href="/info">more information</a></p>
+            <p style="font-size: 1.4em;">To build your own bot and own the competition <a href="/info" class="contribute">more information</a></p>
         </div>
         <div>
             <h1 class="contribute">