/* Global stuff */

body {
  background-color: #f2f2f2; /* Light grey window background */
  font-family: sans-serif; /* No Times New Roman, please*/
  margin: 0; /* Make header and footer extend to window border */
}

header,
footer,
article {
  padding: 5px 15px 5px 15px; /* A bit of space from border to text: top, left, bottom, right */
}

/* Header */

header {
  background-color: #6b993b; /* Green */
}

nav,
h1 {
  margin-left: auto; /* Center on page */
  margin-right: auto; /* Center on page */
  max-width: 800px; /* Avoid too long lines, while still being responsive on small devices */
}

h1 {
  text-align: center; /* Center text on page */
}

h2 {
  /* English glimpse text */
}

h3 {
  /* Danish glimpse text */
}

nav ul {
  list-style: none; /* No bullets on menu items */
  margin: 0; /* No additional spacing */
  padding: 0 10px; /* Keep some spacing between menu items */
  text-align: right; /* Keep the menu items to the right */
}

nav ul li:first-child {
  float: left; /* Keep first menu item to the left */
}

nav ul li {
  display: inline-block; /* Keep the menu items on the same line */
  float: none; /* Keep the menu items on the same line */
  padding-left: inherit; /* Some distance between menu items */
}

nav ul li a {
  color: white; /* White menu item text */
  text-decoration: none; /* No underline on menu item text */
}

/* Footer */

footer {
  background-color: #6b993b; /* Green */
  font-size: small; /* Small text */
  margin-left: auto; /* Center on page */
  margin-right: auto; /* Center on page */
  max-width: 800px; /* Avoid too long lines, while still being responsive on small devices */
}

footer ul {
  list-style: none; /* No bullets on menu items */
  margin: 0; /* No additional spacing */
  padding: 0 10px; /* Keep some spacing between menu items */
  text-align: right; /* Keep the menu items to the right */
}

footer ul li {
  float: none; /* Keep the menu items on the same line */
}

footer ul li a {
  color: white; /* White menu item text */
  text-decoration: none; /* No underline on menu item text */
}

/* Main content */

article {
  background-color: white; /* White background on main content */
  border: 1px solid #dadada; /* Border around main content */
  margin-top: 20px; /* Space between menu and main content */
  margin-bottom: 20px; /* Space between main content and footer */
  margin-left: auto; /* Center on page */
  margin-right: auto; /* Center on page */
  max-width: 800px; /* Avoid too long lines, while still being responsive on small devices */
}

article p img {
  display: block; /* Center the image */
  height: auto; /* Preserve aspect ratio */
  margin-left: auto; /* Center the image */
  margin-right: auto; /* Center the image  */
  max-width: 70%; /* Scale to fit body */
}

article.post p {
  display: flex; /* Put next/prev icons next to image */
  align-items: center; /* Align next/prev icons to center of image */
}

article.post p a[rel] {
  /* Icon decoration */
  cursor: pointer; /* Enable pointer cursor */
  text-decoration: none; /* Disable link underline */

  /* Icon position from edge and click area */
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 200px;
  padding-bottom: 200px;

  /* Icon look */
  color: #6b993b; /* Green */
  font-weight: bold;
  font-size: 38px;

  /* Icon behavior */
  user-select: none;
}