assets/styles/style.css

+:root {
+    --bg-color1: #0f2140;
+    --bg-color2: #23355F;
+    --bg-color3: #f5c040;
+    --bg-color4: #FFE168;
+    --font-color: #ffffff;
+}
+
+
 @font-face {
     font-family: "roboto";
     src: url(../fonts/Roboto-Regular.ttf);
@@ -17,6 +26,8 @@ header {
 }
 
 body {
+    color:var(--font-color);
+    background-color: var(--bg-color1);
     border: 1px solid black;
     font-family: "roboto";
 }
@@ -27,16 +38,30 @@ header img {
 
 header nav {
     border: 1px solid green;
+    
 }
 
 header nav ul {
+    color: var(--font-color);
     list-style: none;
     padding: 0;
 }
 
+main {
+    background-image: url(../img/bg_light_rain.jpg);
+    background: linear-gradient(180deg, var(--bg-color1), var(--bg-color2));
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
 h1 {
     font-family: "paradise";
-    border: 1px solid purple;
+    color: var(--bg-color2);
+    text-shadow: 15px 2px 30px #0f2140;
+    background-color: var(--bg-color4);
+    padding: 1rem 5rem 0.5rem 5rem;
+    border-radius: 1em;
+    text-align: center;
 }
 
 #ephemerides, #temperatures {
@@ -76,7 +101,10 @@ main>div {
 }
 
 .soleil  * {
-    border: 1px solid Red;
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: nowrap;
+    border: 1px solid green;
 }
 
 table, th, td {
@@ -91,3 +119,26 @@ table {
 main>div> * {
     padding: 1em 0;
 }
+
+a {
+    color: var(--font-color);
+}
+
+li>a:hover {
+    background-color: var(--bg-color2);
+}
+
+li {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+}
+
+ul {
+    display:flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: flex-end;
+}
\ No newline at end of file