body {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-image: url("../images/selketal.jpg");

  margin: 0%;
}

body.notLoggedIn {
  background-image: url("../images/blur.jpg");
}

* {
  box-sizing: border-box;
}

header h1 {
  font-family: sans-serif;
  font-weight: bold;
  color: #d6eab9;
  text-align: center;
  filter: drop-shadow(0.5rem 0.5rem 0.4rem #000);
}

header nav {
  text-align: center;
  background-color: rgba(255, 255, 240, 0.7);
  padding: 0.5em;
}

header nav ul {
  list-style-type: none;
  padding: 0%;
}

header nav ul>li {
  /*background-color: rgba(255, 255, 240, 0.7);*/
  padding: 0.5em;

  color: black;
  font-family: sans-serif;
}

main {
  background-color: rgba(255, 255, 240, 0.7);
  width: 100%;
  padding: 0%;
  margin: 0%;
  float: left;
}

article {
  padding: 1em;
}

figure {
  display: block;
  text-align: center;
  max-width: 100%;
}

img {
  max-width: 90%;
}

.spacer {
  display: none;
}

@media only screen and (min-width: 768px) {
  main {
    width: 70%;
    max-width: 700px;
    margin: auto;
    border-radius: 1em;
  }

  header nav ul>li {
    /*display: inline-block;*/
    padding: 1em;
  }

  nav {
    float: left;
    width: 25%;
    max-width: 300px;
    border-radius: 0em 1em 1em 0em;
    margin: auto;
    margin-right: 3em;
  }

  #navContainer {
    width: 75%;
  }

  .spacer {
    float: left;
    width: 25%;
    max-width: 300px;
    margin: 3em;
    display: block;
  }
}