*
{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a
{
  text-decoration: none;
}

p
{
  margin: .5em;
}

ol, ul
{
  margin-left: 2em;
}

#header a
{
  background: yellow;
  border-radius: 1em;
  border: 1px solid yellow;
  color: black;
  display: inline-block;
  font-size: 1em;
  margin: 0.5em;
  padding: 0 0.5em;
}

#header a[lang="en"]
{
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(flag_en.png) repeat 0 0;
  background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(flag_en.png) repeat 0 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(flag_en.png) repeat 0 0;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_en.png) repeat 0 0;
  background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_en.png) repeat 0 0;
  background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_en.png) repeat 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_en.png) repeat 0 0;
}

#header a[lang="nl"]
{
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(flag_nl.png) repeat 0 0;
  background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(flag_nl.png) repeat 0 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(flag_nl.png) repeat 0 0;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_nl.png) repeat 0 0;
  background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_nl.png) repeat 0 0;
  background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_nl.png) repeat 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_nl.png) repeat 0 0;
}

#header a[lang="de"]
{
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(flag_de.png) repeat 0 0;
  background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(flag_de.png) repeat 0 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(flag_de.png) repeat 0 0;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_de.png) repeat 0 0;
  background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_de.png) repeat 0 0;
  background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_de.png) repeat 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_de.png) repeat 0 0;
}

#header a[lang="fr"]
{
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(flag_fr.png) repeat 0 0;
  background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(flag_fr.png) repeat 0 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(flag_fr.png) repeat 0 0;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_fr.png) repeat 0 0;
  background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_fr.png) repeat 0 0;
  background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_fr.png) repeat 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(flag_fr.png) repeat 0 0;
}

#header a[lang]
{
  background-size: 100% 100%;
}

#header a:hover
{
  border: 1px solid red;
}



body
{
  background-attachment: fixed;
  background-color: burlywood;
  background-image: url("HogeVenen.jpg");
  background-position: bottom;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  background-size: cover;
  color: white;
}

/*
h1
{
  font-family: serif; color: yellow;
  display: inline-block;
}
*/

li
{
  list-style-type: none;
}




/* Default menu visibility for small devices. */

#header
{
  width: 100%;
}

#main_nav,
#main_title,
#viewportsize
{
  display: inline-block;
}

#main_nav
{
  text-align: left;
  vertical-align: top;
  width: 39%;
}

#main_title
{
  color: yellow;
  font-size: 1em;
  margin-top: .5em;
  text-align: left;
  vertical-align: top;
  width: 59%;
}

.center
{
  color: white;
  font-size: 2em;
  margin-top: 2em;
  text-align: center;
  vertical-align: center;
  width: 100%;
}

#viewportsize
{
  position: fixed;
  right: 0;
  top: 0;
}


#main_nav_header
{
  display: block;
}

#main_nav_list
{
  display: none;
}

.main_nav_item
{
  display: block;
}

.sub_nav_header
{
  display: inline-block;
}

.sub_nav_list
{
  display: none;
  position: absolute;
  vertical-align: top;
}

.sub_nav_item
{
  display: block;
}



#main_nav:focus         #main_nav_list,
#main_nav_header:focus  #main_nav_list,
#main_nav:hover         #main_nav_list

{
  display: block;
}

.main_nav_item:focus .sub_nav_list,
.main_nav_item:hover .sub_nav_list
{
  display: inline-block;
}


/* Progress */
#main_nav:focus-within #main_nav_list
{
  display: block;
}

.main_nav_item:focus-within .sub_nav_list
{
  display: inline-block;
}



.hello
{
  font-family: serif;
  font-size: 4em;
  text-align: center;

  position: fixed;
  bottom: 1em;
  left: 30vw;
}



.content
{
  font-family: sans-serif;
  font-size: 1em;
}

.textblock
{
  background-color: white;
  box-shadow: inset 0 0 1em;
  color: black;
  margin: 1em 1em;
  padding: 1em 1em;
}

#main_background_picture_attribution
{
  font-size: 1em;
  position: fixed;
  bottom: 0;
  right: 0;
  color: white;
  text-decoration: none;
}

#main_background_picture_attribution:hover
{
  background-color: yellow;
  border: 1px solid red;
  color: black;
}

.indent
{
  margin-left: 1em;
}