* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
overflow-y: scroll;
}
body {
font: 1em sans-serif;
height: 100%;
}

#wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
}
		
header {
position: fixed;
top: 0;
width: 100%;
background: #00c8b6;
}
header h2 {
color: #fff;
padding-left: 20px;
}
header div {
margin-left: auto;
}
header img {
float: left;
}
header a {
color: #fff;
text-decoration: none;
outline: none;
}

nav {
position: fixed;
top: 60px;
width: 100%;
height: 60px;
background: #e7faf8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 7px;
border-bottom: 1px solid #00c8b6;
}
nav div {
font-size: 2em;
}
nav span {
display: none;
}
nav a {
padding: 5px 7px;
text-decoration: none;
outline: none;
color: #000;
}
nav a:hover {
background: transparent;
}
nav a.pc {
display: none;
}

.subnav {
position: fixed;
top: 120px;
width: 100%;
height: 42px;
background: #e7faf8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-bottom: 1px solid #00c8b6;
}
.subnav a {
padding: 10px 20px;
text-decoration: none;
outline: none;
color: #000;
}
.subnav a:hover {
background: transparent;
}
.subnav a.current {
background: #00bab9;
}

main {
width: 100%;
padding: 120px 0 50px;
}
main.wine {
padding: 162px 0 50px;
}
main.recepten,
main.lyrics {
padding: 62px 0 50px;
}

article {
width: 90%;
margin: 20px 5% 30px 5%;
border: 1px solid #e3e4e6;
word-wrap: break-word;
}
article h2 {
padding: 5px 10px; /* hoofdzakelijk voor de wijn pagina's */
background: #19e0bf;
color: #fff;
}
article p {
padding: 5px 10px; /* hoofdzakelijk voor de wijn pagina's */
}
article.full p {
line-height: 30px;
}
article p.title {
padding: 10px;
color: #000;
background: #e3e4e6;
}
article p.computer { 
display: none; /* herhaalde articles hebben maar 1 kop in de mobiele weergave */
}
article a {
padding: 10px;
display: block;
text-decoration: none;
outline: none;
color: #000;
}
article a:hover {
background: #fff; 
}
article img {
max-width: 100%;
}
article a.img {
padding: 0; /* voor de wijn pagina's */
}
article a.pc {
display: none;
}
a.weatherwidget-io {
z-index: -10;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------*/


@media (min-width: 750px) {
nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0;
}
nav div {
font-size: 1em;
display: inline-block; /* uitlijning van de icoontje in de links */
width: auto;
}
nav span {
display: inline-block;
}
nav a {
padding: 20px 19px 19px;
}
nav a:hover {
background: #19e0bf;
border-top: 1px solid #00c8b6;
}

.subnav {
height: 40px;
}
.subnav a {
padding: 12px 20px 10px;
}
.subnav a:hover {
background: #19e0bf;
}

main {
margin: 0 auto;
width: 100%;
max-width: 1000px;
padding-top: 160px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
main.wine {
padding-top: 200px;
}
main.recepten,
main.lyrics {
padding: 100px 0 50px;
}

article {
width: 235px; /* 4 kolommen */
margin: 0 0 15px 0;
border: 1px solid #e3e4e6;
}
article a:hover {
background: #e7faf8; 
}
article.third {
width: 320px; /* 3 kolommen */
}
article.half {
width: 490px; /* 2 kolommen */
}
article.three-quarter {
width: 745px; /* 1 kolom */
}
article.full {
width: 1000px; /* 1 kolom */
}
article p.computer {
display: block;
padding: 10px;
background: #e3e4e6;
}
article a.pc {
display: block;
}
article.center {
text-align: center;
}
}


@media (min-width: 1020px) {
header h2 {
padding-left: 0;
}
nav a.pc {
display: block;
}
}