@font-face {
font-family:'Nunito-Regular';
src:url('webfonts/Nunito-Regular.ttf');
font-weight:400;
font-stretch:normal;
}

*, *::before, *::after { box-sizing:border-box; }

@keyframes OpacityFadeIn {
  from { opacity:0; } 
  to { opacity:1; }
}

html {
font-size:12px;
overflow-x:hidden;
scroll-snap-points-y:repeat(100svh);
scroll-snap-type:y mandatory;
scroll-behavior:smooth;
}
@media only screen and (max-width: 900px) {
	html { font-size:12px; }
}

body {
font-family:'Nunito-Regular', 'Helvetica', sans-serif;
font-size:1em;
color:#000;
font-weight:400;
line-height:1.5;
padding:0;
margin:0;
}

.desktop {
display:block;
}
@media only screen and (max-width: 900px) {
	.desktop { display:none; }
}

.clear {
clear:both;
}

h1 {
color:#000;
font-size:1.4em;
font-weight:400;
letter-spacing:1px;
margin:0 0 0.5rem 0;
}
h2 {
color:#000;
font-size:1.2em;
font-weight:400;
letter-spacing:1px;
margin:0 0 0.3rem 0;
}
h3 {
color:#000;
font-size:1em;
font-weight:400;
letter-spacing:1px;
margin:0 0 0.3rem 0;
}
h4 {
color:#000;
font-size:0.9em;
font-weight:400;
letter-spacing:1px;
margin:0 0 0.3rem 0;
}
p {
font-size:1em;
margin:0;
}
a {
font-size:1em;
color:#000;
transition: all .5s ease 0s;
}
a:link {
color:#000;
text-decoration:none;
}
a:visited {
color:#000;
text-decoration:none;
}
a:active {
color:#000;
text-decoration:none;
}
a:hover {
color:#000;
text-decoration:underline;
}

header {
position:sticky;
top:0;
width:100%;
height:auto;
font-size:1em;
padding:2rem 2rem 0 2rem;
background:rgba(255,255,255,0.9);
display:flex;
flex-direction:row;
align-items:baseline;
gap:2rem;
z-index:1;
}
header h1 {
font-size:1em;
margin:0;
}
header h2 {
font-size:1em;
margin:0;
}
header p {
font-size:1em;
letter-spacing:1px;
margin:0 0 0 auto;
}
header .serienav {
font-size:1em;
letter-spacing:1px;
display:flex;
flex-direction:row;
align-items:baseline;
gap:1rem;
}
header .serienav a {
color:rgba(0,0,0,0.5);
}
header .serienav a:hover, header .serienav a.on {
color:rgba(0,0,0,1);
text-decoration:none;
}

main {
width:auto;
height:auto;
padding:0 2rem 8rem 2rem;
margin:0 auto;
}
@media only screen and (max-width: 900px) {
	main {
	padding-bottom:16rem;
	}
}

.paintingbox {
position:relative;
width:100%;
height:100svh;
padding-bottom:3svh;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
align-content:center;
justify-content:center;
scroll-snap-align:center;
}
.paintingbox img {
width:auto;
max-width:80svw;
height:auto;
max-height:80svh;
margin:0 auto;
border:none;
display:block;
}


footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:auto;
height:auto;
padding:2rem;
background:rgba(255,255,255,0.9);
display:flex;
align-items:baseline;
gap:2rem;
}
@media only screen and (max-width: 900px) {
	footer {
	padding:2.5rem 1rem 1rem 1rem;
	}
}
footer p {
font-size:0.8em;
letter-spacing:1px;
margin:0;
}


nav {
position:fixed;
bottom:1rem;
left:calc(100svw - 9rem);
width:8rem;
height:6rem;
padding:0;
margin:0;
display:flex;
align-items:center;
gap:0;
z-index:2;
}
@media only screen and (max-width: 900px) {
	nav {
	left:calc(100svw - 8rem);
	bottom:0.5rem;
	}
}
.startnav {
position:absolute;
}
.top-pijl {
position:relative;
top:0;
left:calc(50% - 1rem);
width:2rem;
height:auto;
font-size:1.5em;
line-height:1;
text-decoration:none;
padding:0.5rem;
margin:0;
transform:rotate(-90deg);
transition:all .5s ease 0s;
display:block;
z-index:3;
}
.top-pijl:hover {
top:-0.5rem;
color:#000;
text-decoration:none;
}

.terug-pijl {
position:absolute;
bottom:0;
left:1rem;
width:auto;
height:auto;
font-size:1.5em;
line-height:1;
text-decoration:none;
padding:0.5rem;
transition:all .5s ease 0s;
display:block;
z-index:3;
}
.terug-pijl:hover {
left:0.5rem;
color:#000;
text-decoration:none;
}
.heen-pijl {
position:absolute;
bottom:0;
right:1rem;
width:auto;
height:auto;
font-size:1.5em;
line-height:1;
text-decoration:none;
padding:0.5rem;
transition:all .5s ease 0s;
display:block;
z-index:3;
}
.heen-pijl:hover {
right:0.5rem;
color:#000;
text-decoration:none;
}