Le contenu de la page se colle plus vers le bas

styles.css

@@ -33,24 +33,28 @@ div.container {
     box-shadow: 0 0 25px 0px rgba(0,0,0,0.15);
     background-color: #ffffff;
     width: 100%;
-    flex-grow: 1;
+    position: relative;
 }
 
 @media only screen and (min-width: 400px) {
+    html, body {
+        flex-direction: column;
+    }
     div.container {
         margin: 60px 0 0;
+        flex-grow: 1;
     }
 }
 
-@media only screen and (min-width: 530px) {
-    div.container {
-        margin: 100px auto 0;
-    }
+@media only screen and (min-width: 1200px) {
+    html, body {
+        flex-direction: row;
+        align-items: flex-end;
+        justify-content: center;
     }
-
-@media only screen and (min-width: 1220px) {
     div.container {
         margin: 150px auto 0;
+        min-height: 1000px;
         width: 1200px;
         border-radius: 7px 7px 0 0;
     }
@@ -59,7 +63,7 @@ div.container {
 .container .row { margin: 5px 10px; padding: 0 10px; }
 .container .row:first-of-type { margin-top: 15px; }
 .container .row:last-of-type { margin-bottom: 15px; }
-div.container { margin: 0 !important; flex-grow: 1; }
+div.container { margin: 0 !important; }
 
 section.container a, .container h3 {
     background-color: #222;
@@ -169,7 +173,7 @@ section.content {
 }
 
 section.content a { color: var(--accent-color); }
-section.content a:hover { opacity: 0.5; }
+section.content a:hover { color: var(--accent-color); opacity: 0.5; }
 
 section.cours a {
     background-color: var(--accent-color);