body {
    background-color:#b6d97e;
}

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

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

a {
    color:#ffffff;
    text-decoration:none;
    text-shadow: 2px 2px 2px #00B4FF;
}

a: hover {
    color:#ff8800;
}

img {
    style="margin: 10px 10px 10px 10px;"
}

div {
    width:1400px;
    height:1000px;
    background-color:#497502;
    margin-left:auto;
    margin-right:auto;
    border-radius:5px;
}

h1 , p {
    font-family:"Arial", "Helvatica", "Sans-serif";
    text-indent:10px;
    padding:10px 40px 10px 40px;
    color:#ffffff;
}

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

ul li {
    background-color:#497502;
    font-variant: small-caps;
    font-family:"Arial", "Helvatica", "Sans-serif";
    font-size: 20px;
    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; } }