/**
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select {
 background:inherit;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline;
}
**/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
 display:block;
}
body {
 line-height:1;
}
abbr[title],dfn[title]{
 border-bottom:1px dotted;cursor:help;
}
blockquote,q {
 quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after
{
 content:none}del{text-decoration:line-through;
}
hr
{
 background:transparent;border:0;clear:both;color:transparent;height:1px;margin:0;padding:0;
}
mark
{
 background-color:#ffffb3;font-style:italic;
}
input,select {
 vertical-align:middle;
}
ins
{
 background-color:red;color:white;text-decoration:none;
}
ol,ul {
 list-style:none;
}
table {
 border-collapse:collapse;border-spacing:0;
}

.clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;width:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;height:0;line-height:0;visibility:hidden;width:0}* html .clearfix,:first-child+html .clearfix{zoom:1}


* { 
  color: inherit;
  background-color: none;
  text-align: left;
  vertical-align: top;
/**  display: block; **/
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: inherit;
/**  overflow: auto; **/
}

html {
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
}

body {
 height: 100%;
 background-color: lightgrey;
 background-image: linear-gradient(lightgrey, lightblue);
 background-position: center;
 background-repeat: no-repeat;
 color: black;
 
 font: 11px/1.7 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
        -webkit-text-size-adjust: 100%; 
}

a {
 color: blue;
}

h2 {
 font-weight: bold;
 font-size: 25pt;
}

#darkmode {
 float: right;
 cursor: pointer;
}
#darkmode img {
 width: 60px; /** original: 150px **/
}

#content {
 padding: 20px;
}

#main {
 min-width: 290px;
 margin: auto;
}
#main header {
 background-color: blue;
 color: white;
 margin: 10px auto 20px auto;
 min-width: 300px;
 width: 300px;
 border-radius: 10px;
 display: block;
 padding: 6px;
 font-size: 40pt;
 font-weight: bold;
}
#main header h1 {
 border: 6px solid white;
 border-radius: 16px;
 margin: auto;
 padding: 8px 30px;
 text-align: center;
}

section {
 margin: 30px 10px;
 border: 3px solid lightgrey;
 border-radius: 10px;
 padding: 10px;
 background-color: rgba(255, 255, 255, 0.6);
}
section h2 {
 position: relative;
 top: -25px;
 display: inline-block;
 border: 3px solid lightgrey;
 border-radius: 10px;
 padding: 10px;
 background-color: white;
}
article {
  clear: both;
 display: block;
 margin-bottom: 10px;
 overflow:auto; 
   height: max-content;
}
article h3 {
 display: block;
 margin: 10px 0px;
 font-weight: bold;
 font-size: 20pt;
}
aside {
 float: right;
   height: max-content;
/**  position: absolute;
  right: 50px; **/
}
aside img {
 display: block;
 padding: 5px;
 max-width: 250px;
 max-width: 100px;
}
table {
 border-collapse: collapse;
}
td, th {
 border: 1px solid black;
 padding: 4px;
}
th {
 font-weight: bold;
}
p {
 display: block;
}
form {
display: inline-block;
border: 1px solid grey;
border-radius: 3px;
margin: 5px;
padding: 5px;
}
input, select, textarea {
display: block;
cursor: pointer;
text-decoration: none;
background-color: white;
border: 1px solid grey;
border-radius: 3px;
-webkit-box-shadow: 0px 5px 5px 0px grey;
box-shadow: 0px 5px 5px 0px grey;
margin: 5px;
padding: 5px;
font-weight: normal;
}
input[type=radio] {
 display: inline-block;
}
textarea {
 height: 100px;
}

ul {
 list-style-type: circle;
 padding-left: 20px;
}

#whatsapp {
 border: 3px solid green;
}
#whatsapp h2 {
 border: 3px solid green;
 background-color: lightgreen;
}

#wijkfeest {
 border: 3px solid gold;
 background-color: gold;
 background: linear-gradient(to bottom right, gold, rgba(255, 255, 255, 0.5));
}
#wijkfeest h2 {
 border: 3px solid gold;
 color: #b8860b;
 font-weight: 900;
}
#halloween {
 border: 3px solid orange;
}
#halloween h2 {
 border: 3px solid orange;
 background-color: black;
 color: orange;
}

#halloweenFull {
 color: orange;
}
#halloweenFull a {
 color: green;
}
#halloweenFull section {
 margin: 30px 10px;
 border: 3px solid orange;
 border-radius: 10px;
 padding: 10px;
 background-color: black;
}
#halloweenFull section h2 {
 position: relative;
 top: -25px;
 display: inline-block;
 border: 3px solid orange;
 border-radius: 10px;
 padding: 10px;
 background-color: black;
}

.error {
 display: block;
 padding: 5px;
 border: 4px dotted red;
}
.success {
 display: block;
 padding: 5px;
 border: 4px dotted green;
}

.italic {
 font-style: italic;
}

#bbqCost {
 font-weight: bold;
 color: red;
}