body {
font-family : "Trebuchet MS", sans-serif;
font-size : 1em;
padding : 0;
margin : 0;
}
header {
background-image : url("../afbeeldingen/achtergrond222.jpg");
background-repeat : no-repeat;
background-size : auto;
padding : 7em 1em;
}
table, th, td {
border : black solid 0px;
}
header h1 {
color : #F4FCF4;
font-family : Georgia, serif;
font-size : 2.5em;
font-variant : small-caps;
text-align : center;
text-shadow : 2px 2px #7219AA;
}
.topnav {
background-color : #09A909;
overflow : hidden;
}
.topnav a {
float : left;
display : block;
color : #FFFFFF;
text-align : center;
padding : 14px 16px;
text-decoration : none;
font-size : 17px;
background-color : #006400;
}
.topnav a:hover {
background-color : #0000FF;
color : #fff;
}
.topnav a.active {
background-color : #0166FF;
color : #FFC107;
}
.topnav .icon {
display : none;
}
article {
box-sizing : border-box;
padding : 2em;
min-height : 70vh;
}
aside {
float : right;
}
article img {
max-width : 100%;
}
article ul, #hoofdvak ol {
list-style-position : outside;
margin-left : 2em;
}
article h1 {
color : maroon;
}
article h2 {
color : maroon;
}
footer {
background-image : url("../afbeeldingen/footer1.jpg");
background-repeat : repeat-x;
background-color : #006400;
clear : both;
color : white;
text-shadow : 2px 2px #006400;
font-size : 0.8em;
padding : 0.3em;
text-align : center;
}
@media screen and (min-width: 600px) {
nav ul, article {
max-width : 1200px;
margin : 0 auto;
}
nav {
font-size : 1em;
}
nav ul {
display : flex;
}
nav ul {
border-top : none;
flex-grow : 1;
}
nav li {
text-align : center;
}
}
.gallery {
display : grid;
justify-content : center;
gap : 20px;
grid-template-columns : repeat(2,100px) minmax(200px,800px) repeat(2,100px);
grid-template-rows : repeat(5,100px);
}
.gallery__item {
cursor : pointer;
border-radius : 5px;
grid-row : span 1;
grid-column : span 1;
transition : transform 0.1s ease-in-out;
}
.gallery__item:hover {
transform : scale(1.1) rotate(5deg);
}
.gallery__select {
display : none;
}
.gallery__select:nth-of-type(1):checked ~ .gallery .gallery__item:nth-of-type(1) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(1):checked ~ .gallery .gallery__item:nth-of-type(1):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery {
gap : 10px;
grid-template-columns : repeat(auto-fit,50px);
grid-template-rows : 300px repeat(auto-fit,50px);
}
}
.gallery__filler {
grid-column : span 2;
}
@media (max-width: 768px) {
.gallery__filler {
display : none;
}
}
@media (min-width: 768px) {
body {
align-content : center;
}
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(1):checked ~ .gallery .gallery__item:nth-of-type(1) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(2):checked ~ .gallery .gallery__item:nth-of-type(2) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(2):checked ~ .gallery .gallery__item:nth-of-type(2):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(2):checked ~ .gallery .gallery__item:nth-of-type(2) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(3):checked ~ .gallery .gallery__item:nth-of-type(3) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(3):checked ~ .gallery .gallery__item:nth-of-type(3):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(3):checked ~ .gallery .gallery__item:nth-of-type(3) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(4):checked ~ .gallery .gallery__item:nth-of-type(4) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(4):checked ~ .gallery .gallery__item:nth-of-type(4):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(4):checked ~ .gallery .gallery__item:nth-of-type(4) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(5):checked ~ .gallery .gallery__item:nth-of-type(5) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(5):checked ~ .gallery .gallery__item:nth-of-type(5):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(5):checked ~ .gallery .gallery__item:nth-of-type(5) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(6):checked ~ .gallery .gallery__item:nth-of-type(6) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(6):checked ~ .gallery .gallery__item:nth-of-type(6):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(6):checked ~ .gallery .gallery__item:nth-of-type(6) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(7):checked ~ .gallery .gallery__item:nth-of-type(7) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(7):checked ~ .gallery .gallery__item:nth-of-type(7):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(7):checked ~ .gallery .gallery__item:nth-of-type(7) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(8):checked ~ .gallery .gallery__item:nth-of-type(8) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(8):checked ~ .gallery .gallery__item:nth-of-type(8):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(8):checked ~ .gallery .gallery__item:nth-of-type(8) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(9):checked ~ .gallery .gallery__item:nth-of-type(9) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(9):checked ~ .gallery .gallery__item:nth-of-type(9):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(9):checked ~ .gallery .gallery__item:nth-of-type(9) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(10):checked ~ .gallery .gallery__item:nth-of-type(10) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(10):checked ~ .gallery .gallery__item:nth-of-type(10):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(10):checked ~ .gallery .gallery__item:nth-of-type(10) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(11):checked ~ .gallery .gallery__item:nth-of-type(11) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(11):checked ~ .gallery .gallery__item:nth-of-type(11):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(11):checked ~ .gallery .gallery__item:nth-of-type(11) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(12):checked ~ .gallery .gallery__item:nth-of-type(12) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(12):checked ~ .gallery .gallery__item:nth-of-type(12):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(12):checked ~ .gallery .gallery__item:nth-of-type(12) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
.gallery__select:nth-of-type(13):checked ~ .gallery .gallery__item:nth-of-type(13) {
cursor : default;
display : grid;
align-items : center;
grid-row : 1 / -1;
grid-column : 3;
}
.gallery__select:nth-of-type(13):checked ~ .gallery .gallery__item:nth-of-type(13):hover {
transform : none;
}
@media (max-width: 768px) {
.gallery__select:nth-of-type(13):checked ~ .gallery .gallery__item:nth-of-type(13) {
grid-row : 1 / -3;
grid-column : 1 / -1;
}
}
@keyframes fadeIn {
from {
opacity : 0;
}
to {
opacity : 1;
}
#hamnav {
width : 100%;
background : #2426f0;
position : sticky;
top : 0;
}
#hamnav label, #hamburger {
display : none;
}
#hamitems {
display : flex;
}
#hamitems a {
width : 20%;
padding : 10px;
color : white;
text-decoration : none;
text-align : center;
}
#hamitems a:hover {
background : #FFCC02;
}

@media screen and (max-width: 768px) {
#hamnav label {
display : inline-block;
color : white;
background : #FFCC02;
font-style : normal;
font-size : 1.2em;
padding : 10px;
}
#hamitems a {
box-sizing : border-box;
display : block;
width : 100%;
border-top : 1px solid #333333;
}
#hamitems {
display : none;
}
#hamnav input:checked ~ #hamitems {
display : block;
}
}
html, body {
padding : 0;
margin : 0;
font-family : arial, sans-serif;
}