body {
    background-color:#497502; width: 100%;
}

h1 , p {
    font-family:"Arial", "Helvatica", "Sans-serif";
    text-indent: 10px;
}

h2 , p {
    font-family:"Arial", "Helvatica", "Sans-serif";
    text-indent: 15px;
}

li {
    display:inline;
    margin-left:100px;
}

a {
    color:#466b0a;
    text-decoration:none;
    text-shadow: 1px 1px 1px #466b0a;
}

a: hover {
    color:#284001;
}

img.alignleft {
    float: left;
    padding: 0 10px 10px 0;
}

img.alignright {
    float: right;
    padding: 0 0 10px 10px;
}

div {
    width:1100px;
    height:800px;
    background-color:#b6d97e;
    margin-left:auto;
    margin-right:auto;
    border-radius:5px;
}

h1 , p {
    font-family:"Arial", "Helvatica", "Sans-serif";
    text-indent:11px;
    padding:0px 20px 0px 20px;
    color:#284001;
    float:left;
}

h2 , p {
    font-family:"Arial", "Helvatica", "Sans-serif";
    text-indent:11px;
    padding:0px 20px 0px 20px;
    color:#284001;
    float:left;
}

ul {
    max-width: 100%;
    height:40px;
    background-color:#ffffff;
    text-align: left;
    padding: 20px 100px 15px 100px;
}

ul li {
    background-color:#b6d97e;
    font-variant: small-caps;
    font-family:"Arial", "Helvatica", "Sans-serif";
    font-size: 25px;
    padding: 5px 10px 5px 10px;
}

.fotogalerij {width: 950px; max-width: 100%; margin: 20px auto; text-align: center;
}

.fotogalerij img { border: 1px solid darkgrey; margin: 4px; }

.foto-popup { display: none; }
.foto-popup:target { display: block; position: fixed; z-index: 999; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); text-align: center; }
.foto-popup img { max-width: 90%; position: relative; top: 50%; transform: translateY(-50%); }
.vorige, .volgende { position: fixed; top: 50%; transform: translateY(-50%); text-decoration: none; color: darkgrey; font-size: 5em; }
.vorige:hover, .volgende:hover { color: white; }
.vorige { left: 20px; }
.volgende { right: 20px; }
@media screen and (max-width: 400px) { .vorige, .volgende { font-size: 3em; } }