#buttons div {
margin-bottom: 1em;
}
+
+@media only screen and (max-width: 641px) {
+ body {
+ grid-template-areas:
+ "header header"
+ "main main"
+ "menu menu"
+ "footer footer";
+ }
+
+ #header-links {
+ position: sticky;
+ bottom: 0;
+ margin-left: 0;
+ margin-top: 0;
+ flex-direction: row;
+ background-color: white;
+ border-top: solid black;
+ flex-wrap: wrap;
+ }
+
+ header {
+ display: flex;
+ flex-direction: column;
+ }
+
+ #lang {
+ justify-items: center;
+ }
+
+ #main {
+ margin: 2em 1em 2em 1em;
+ }
+
+ #footer-main {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .pred-buttons {
+ align-self: center;
+ }
+}
<html lang="%lang%">
<head>
<meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
<link rel="icon" href="/img/favicon.gif" type="image/gif" />
<link rel="stylesheet" href="/css/style.css" />