* { 
  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;
}

body {
 height: 100%;
 background-color: lightgrey;
 background-image: linear-gradient(lightgrey, lightgreen);
 background-image: url("/resources/img/background.jpg");
 background-position: center;
 background-repeat: no-repeat;
 color: black;
}

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;
}