:root {

--dark: #1e2125;
--light_yellow: #f1f1c1;
--light_green: #d3f2ef;
--whitish: #f9f9f9;
--minty_green: #55ffff;

/* background colors */
--body_bg: white;
--body_bg_donker: var(--dark);
--article_bg: white;

/* text colors */
--text_body: var(--dark);
--text_body_donker: white;
--text_article: var(--dark);
--text_footer: #999999;
--text_aside: #999999;

/* links */
--hover_article: var(--dark);
--hover_article_donker: var(--minty_green);
--link_outline: silver;
--link_outline_donker: var(--dark);

/* blockquote */
--blockquote_border: grey;

/* shadow */
--art_h1_schaduw: #AB9A18;

/* tabel */
--tabel_color: var(--light_yellow);
--tabel_border_color: var(--dark);
--td_text: var(--dark);
--tr_even: var(--light_green);
--tr_hover: var(--whitish);
--thead_color: silver;
--thead_schaduw: var(--dark);
--th_text: var(--dark);
--tfoot_schaduw: var(--dark);
--tfoot_color: silver;
--tfoot_text: var(--dark);

/* formulier */
--invoer_border: #ccc;
--invoer_focus_border: #aaa;

/* toets */
--randcolor: #ccc;

/* grid */
--grid_colums: 1fr 1fr;

/* t.b.v. media queries */
--max_width: 100ch;
--footer_fontsize: 2rem;
--article_h1_fontsize: 4rem;
--max_width_small: 460px;
--max_width_medium: 750px;

--kop_margin: 30px;

--search_padding: 0ch;

--code_margin: 7rem;
}

@media (prefers-color-scheme: light) {
  :root {
  background-color: white;
  color: var(--dark);
  }
  }
  
@media (prefers-color-scheme: dark) {
  :root {
  background-color: var(--dark);
  color: white;
      }
  }
  
img {
    opacity: 0.8;
    transition: opacity ease-in-out 0.25s;
    }
img:hover {
    opacity: 1;
    transition: opacity ease-in-out 0.25s;
    }

.kopmenu {
  display: none;
  margin: 0;
  }

.kopmenu_desktop {
  margin: 0;
  display: block;
}

.kopmenu_mobile {
  margin: 0;
  display: none;
}

.menu_item_list {
  display: none;
}

.desktop_only {
    display: block;
}



/* #Media Queries
=================================================== */

	/* Kleiner dan 960 */
	@media only screen and (max-width: 959px) {
	:root {
	--max_width: var(--max_width_medium);
	--footer_fontsize: 2rem;
	--article_h1_fontsize: 4rem;
  --search_padding: 10ch;
  --grid_colums: 1fr;
  --code_margin: 0rem;
	}
  #tags {
    display: none;
  }
  .menu_items {
    display: none;
  }
  .menu_item_list {
    display: block;
  }
  .kopmenu{
    margin-right: var(--kop_margin);
  }
  .desktop_only {
    display: none;  
  }
  .kopmenu_mobile {
    margin: 0;
    display: block;
  }
  .kopmenu_desktop {
    display: none;
  }
	}

	/* Tablet Portret tot 960 */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	:root {
	--max_width: var(--max_width_medium);
	--footer_fontsize: 2rem;
	--article_h1_fontsize: 4rem;
	}
}

	/* Alle Mobiele Maten */
	@media only screen and (max-width: 767px) {
	:root {
	--max_width: var(--max_width_small);
	--footer_fontsize: 2rem;
	--article_h1_fontsize: 2rem;
	}
  }

	/* Mobiel Landschap tot Tablet Portret */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	:root {
	--max_width: var(--max_width_small);
	--footer_fontsize: 1.5rem;
	--article_h1_fontsize: 2rem;
	}
  }

	/* Mobiel Portret tot Mobiel Landschap */
	@media only screen and (max-width: 479px) {
	:root {
	--max_width: var(--max_width_small);
	--footer_fontsize: 1rem;
	--article_h1_fontsize: 2rem;
	}
}


html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {  
    font-family: Roboto, Liberation Sans, Arial, sans-serif;
    font-size: 1.3rem;
    background-color: var(--body_bg);
    color: var(--text_body);
    line-height: 1.3;
    padding: 0;
    margin: 0;
    white-space: pre-wrap;
}

.container{
    margin: 0 auto;
    padding: 0;  
    margin-top: -400px; /* was -100 */
}

.container_post {
  margin: 0 auto;
  padding: 0;  
  margin-top: -600px;
}

h1 {
  /*margin-block: 0.67em;*/
  background-color: rgba(240, 240, 240, 0.15);
  border-radius: 2em;
  padding: 0.5em;
  font-size: 2em;
}


img {
  height: auto;
  max-width: 100%;
  margin-top: 3ch;
  margin-bottom: 3ch;
}

p{
  clear: both;
  margin: 0rem;
  padding: 0rem;
}

#tags {
  margin-top: -300px;
}

div {
  margin: 0;
  padding: 0;
}

.inside {
  max-width: var(--max_width);
  margin: 0 auto;
  padding:0%;
}

mark {
  background-color: #AB9A18;
}

strong {
  color: yellowgreen;
  background-color: #413535;
  letter-spacing: 0.2ch;
}

/* article */

article {
    background-color: var(--article_bg);
    color: var(--text_article);
    line-height: 2;
    letter-spacing: normal;
    font-family: 'Roboto', 'Raleway', sans-serif;
    padding: 0;
}

article a {
    color: var(--text_article);
    text-decoration: underline;
}

article a:link {
  text-decoration: underline;
}

article a:visited {
  text-decoration: none;
}

article a:hover {
  text-decoration: underline;
  color: var(--hover_article);
}

article a:active {
  text-decoration: underline;
}

article a:focus {
  outline: 1px dotted var(--link_outline);
}

article h1 {
    letter-spacing: 4px;
    text-align: center;
    font-family: 'Philosopher', serif;
    font-size: var(--article_h1_fontsize);
    font-size: clamp(1.8rem, calc(7vw + 1rem), 5rem);
    line-height: 1.1;
    text-shadow: 2px 2px 8px var(--art_h1_schaduw);
    text-transform: uppercase;
    font-weight: 900;
    padding-left: 10px;
    padding-right: 10px;
}

article h2 {
    font-size: 2rem;
    font-family: 'Philosopher', serif;
    padding-left: 10px;
    padding-right: 10px;
}

article h3 {
  font-size: 1.5rem;
  font-family: 'Philosopher', serif;
  padding-left: 10px;
  padding-right: 10px;
}

article p {
  padding-left: 10%;
  padding-right: 10%;
}

article ul {
    white-space: normal;
    margin: 0;
    padding: 0;
    padding-left: 1rem;
    padding-left: 10%;
    padding-right: 10%;
}

article ol {
    white-space: normal;
    margin: 0;
    padding: 0;
    padding-left: 1rem;
    padding-left: 10%;
    padding-right: 10%;
}

article li {
    width: 100%;
    padding: 0;
    margin: 0;
    margin-left: 2rem;
}

article h2 ,h3 {
  padding-top: 7ch;
}

article h1 {
  background-color: rgba(240, 240, 240, 0.15);
  /* glass effect */
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  /* rounded corners */
  border-radius: 2em;
  padding: 0.5em;
  border: 1px solid silver;
}

article h1, h2, h3 {
  text-align: center;
  color: orange;
}

article h4, h5, h6 {
  padding-left: 10%;
  padding-right: 10%;
}

article dl {
  padding-left: 10%;
  padding-right: 10%;
}


/* footer */

footer {
  text-align: center;
  min-width: 100%;
  bottom: 0;
  align-self:center;
  font-family: "Oswald",sans-serif;
  font-size: 1.1rem;
  margin: 0;
  padding: 0;
  margin-top: -100px;
  margin-bottom: -300px;
  background-color: black;
  color: var(--text_footer);
}

footer a {
    color: var(--text_footer);
    text-decoration: none;
}

footer a:link {
  text-decoration: none;
}

footer a:visited {
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

footer a:active {
  text-decoration: underline;
}

footer a:focus {
  outline: 1px dotted var(--link_outline);
}

header {
  text-align: center;
  margin: 0;
  padding: 0;
}

header img {
  display: block;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

/* navigation menu on top of page */

#mobile_menu {
  display:none;
    background-color: var(--body_bg_donker);
    color: var(--text_body_donker);
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    white-space: normal;
    z-index: 200;
    margin: 0;
    animation-name: slide-top;
  animation-duration: 1s;
}

#mobile_menu ul li {
  list-style: none;
  border-color: white;
  border-width: 1px;
  border-style: dotted;
}

#mobile_menu ul li a {
  background-color: var(--body_bg_donker);
  color: var(--text_body_donker);
}

@keyframes slide-top {
  from {
    margin-top: -300px;
  }
  to {
    margin-top: 0px;
  }
}


.kopmenu_mobile {
  background-color: var(--dark);
  color: white;
  text-align: left;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  white-space: normal;
  z-index: 10;
  opacity: 1;
  margin:0%;
  padding:0%;
}

.kopmenu_desktop {
  background-color: var(--dark);
  color: white;
  text-align: left;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  white-space: normal;
  z-index: 10;
  opacity: 1;
  margin:0%;
  padding:0%;
}

#line1 {
  display: flex;
  flex-direction: row;
  justify-content: start;
  padding:0%;
  margin:0%;
}

#line1 form {
  width: 8ch;
  margin-left:70%;
}

#line2 {
  text-align: center;
}

.menu_item_list { /* mobile */
  flex: 1 1 auto;
  align-self: stretch;
  padding: 1ch;
}

.menu_item_logo {
  padding:0%;
  padding-left: 5ch;
  margin:0%;
  flex: 1 1 auto;
  align-self: auto;
}

.menu_item_logo a {
  padding:0%;
  margin:0%;
}

.menu_item_logo img {
  margin:0%;
}

.menu_items { /* large screens */
  flex: 1 1 auto;
  align-self: flex-start;
  margin-left: auto;
  margin-right: auto;
}

.menu_item { /* large screens */
  display: inline-block;
  padding:0%;
  margin-top: 0%;
}

.menu_item img {
  margin:0%;
  margin-right: 10ch;
}

.menu_item_search {
  padding: 1ch;
  flex: 1 1 auto;
  align-self: stretch;
}


.kopmenu a {
    text-decoration: none;
    padding: 1ch;
    display: inline-block;
}

.kopmenu a:link {
  text-decoration: none;
}

.kopmenu a:visited {
  text-decoration: none;
}

.kopmenu a:hover {
  text-decoration: underline;
}

.kopmenu a:active {
  text-decoration: underline;
}

.kopmenu a:focus {
  outline: 1px dotted var(--link_outline);
}

/* desktop */

.kopmenu_desktop a {
  text-decoration: none;
  padding: 1ch;
  display: inline-block;
  color: white;
}

.kopmenu_desktop a:link {
text-decoration: none;
color: white;
}

.kopmenu_desktop a:visited {
text-decoration: none;
color: white;
}

.kopmenu_desktop a:hover {
text-decoration: underline;
color:#55ffff;
}

.kopmenu_desktop a:active {
text-decoration: underline;
color:#55ffff;
}

.kopmenu_desktop a:focus {
outline: 1px dotted var(--link_outline);
}

/* mobile */


.kopmenu_mobile a {
  text-decoration: none;
  padding: 1ch;
  display: inline-block;
}

.kopmenu_mobile a:link {
text-decoration: none;
}

.kopmenu_mobile a:visited {
text-decoration: none;
}

.kopmenu_mobile a:hover {
text-decoration: underline;
}

.kopmenu_mobile a:active {
text-decoration: underline;
}

.kopmenu_mobile a:focus {
outline: 1px dotted var(--link_outline);
}

/* elements */



q {
  quotes: "\00AB" "\00BB" "\2039" "\203A";
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}


blockquote{
  padding: 1rem;
  border-left: 0.3rem solid var(--blockquote_border);
  font-family: serif;
  font-weight: 100;
  font-size: 1.3rem;
  line-height: 2rem;
  display: block;
}

blockquote:before{
  content: '\201C'; /* open curly quotes */
  font-family: serif;
  font-size: 1.8rem;
}

blockquote:after{
  content: '\201D'; /* close curly quotes */
  font-family: serif;
  font-size: 1.8rem;
}

/* aside */

aside{
    text-align: right;
    display: block;
    font-size: 0.9rem;
    background-color: rgba(240, 240, 240, 0.15);
    /* glass effect */
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    /* rounded corners */
    border-radius: 2em;
    padding: 1rem;
    border: 1px solid silver;
    float: right;
}

aside a {
    color: var(--text_aside);
    text-decoration: none;
}

aside a:link {
  text-decoration: none;
}

aside a:visited {
  text-decoration: none;
}

aside a:hover {
  text-decoration: underline;
}

aside a:active {
  text-decoration: underline;
}

aside a:focus {
  outline: 1px dotted var(--link_outline);
}

/* table */

table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--tabel_color);
    overflow:auto;
}

table, th, td {
  border: 1px solid var(--tabel_border_color);
}

th, td {
  padding: 1rem;
  text-align: left;
}

td {
  color: var(--td_text);
}

tr:nth-child(even) {
    background-color: var(--tr_even);
}

tr:hover {
    background-color: var(--tr_hover);
}

caption {
    padding: 1rem;
    font-weight: bold;
}

thead, thead tr:hover {
    background-color: var(--thead_color);
    text-shadow: 1px 1px 1px var(--thead_schaduw);
}

th {
    color: var(--th_text);
}

tfoot {
    text-shadow: 1px 1px 1px var(--tfoot_schaduw);
}

tfoot tr,tfoot tr:hover {
    background-color: var(--tfoot_color);
}

tfoot td {
    color: var(--tfoot_text);
}

.tabel {
    overflow-x:auto;
}

.tabel_kleinfont{
    font-size: 0.7rem;
    }

/* dl */

dt {
font-weight: bold;
display: inline-block;
border:#999999 1px dotted;
padding-left: 1ch;
padding-right: 1ch;
border-radius: 3px;
}

/*form */
form {
    display: block;		
    padding: 1rem;
    border: 1px solid silver;
    border-radius: 10px;
    box-sizing: border-box;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select {
		border: 1px solid var(--invoer_border);
		padding: 1rem;
		outline: none;
		width: 95%;
}

select {
		padding: 0; 
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
		border: 1px solid var(--invoer_focus_border);
		box-shadow:  0 0 3px rgba(0,0,0,.2); 
}

textarea {
		min-height: 6rem; 
		width: 95%;
}

label,
legend {
		font-weight: bold;
}

input[type="checkbox"] {
		display: inline; 
}

input[type="submit"] {
    font-size: 1rem;
    padding: 0.5rem;
}


button {
    font-size: 1rem;
    padding: 0.5rem;
}

.toets{
    border-width: medium;
    border-color: var(--randcolor);
    border-style: outset;
    display: inline-block;
    padding: 0rem 1rem;
    border-radius: 10px;
}


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


/* dark mode */

.donker,
.donker header,
.donker textarea,
.donker input {
    background-color: var(--body_bg_donker);
    color: var(--text_body_donker);
}

.donker_kopmenu {
    background-color: var(--text_body);
    color: var(--body_bg);
}

.donker_kopmenu_desktop {
  background-color: var(--text_body);
  color: var(--body_bg);
}

.donker_kopmenu_mobile {
  background-color: var(--text_body);
  color: var(--body_bg);
}

.donker a {
    color: var(--text_body_donker);
}

.donker a:focus {
    outline: 1px dotted var(--link_outline_donker);
}

.donker a:hover {
    color: var(--hover_article_donker);
}

/* smaller font */

.kleiner {
    font-size: .6rem;
}

kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

.red_msg {
  background-color: red;
  color: white;
  padding: 1ch;
}

.imagelink {
  text-align: center;
  }
  
.textlines {
  float: right;
  }
  
.description {
  font-style: italic;
  text-align: center;
  margin: auto; 
  }
  
.excerpt {
  font-weight: bold;
  text-align: center;
  margin: auto;
  }
          
   
.tags{
      border-width: thin;
      border-color: #0d6efd;
      border-style: outset;
      display: inline-block;
      padding: 0.25rem 0.5rem;
      border-radius: 3px;
      margin: 0.25rem;
      text-decoration: none;
      font-size: 1.1rem;
  }
  
a.tags:hover {
  background: #0d6efd;
  color: #ffffff;
  }
  
#posts {
    display: grid;
    gap: 10px;
    grid-template-columns: var(--grid_colums);
    /*grid-template-rows: masonry;*/
    margin-top: 2ch;
  }

.post {
  margin-bottom: 1rem;
  text-align: center;
  border-style: outset;
  border-color: #cccccc;
  border-width: 1px;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  background-clip: border-box;
  word-wrap: break-word;
  }
  
.post a {
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
  word-wrap: break-word;
  }
  
.post img {
  max-width: 28rem;
  width: 100%;
  height: auto;
  vertical-align: middle;
  margin-bottom: 1rem;
  overflow: clip;
  cursor: pointer;
  text-align: center;
  }
  
  
.post-hero {
    height: 30ch;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
  }

.post-title {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    min-width: 30ch;
}

.post-title h5 {
  font-family: 'Philosopher', sans-serif;
  font-size: 2rem;
  margin-top: 0;
  font-weight: 500;
  line-height: 1.2;
  display: block;
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
  word-wrap: break-word;
  color: white;
  }
  
.post-body {
  flex: 1 1 auto;
  display: block;
  text-align: center;
  word-wrap: break-word;
  }
  
.post-body a {
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
  word-wrap: break-word;
  }
  
.post-body h5 {
  font-size: 1.25rem;
  margin-top: 0;
  font-weight: 500;
  line-height: 1.2;
  display: block;
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
  word-wrap: break-word;
  }
  
.post-text {
  margin-top: 0;
  margin-bottom: 0.25rem;
  display: block;
  text-align: center;
  word-wrap: break-word;
  }
  
#lichtdonkerknop {
  float: right;
  }

 
.tagcloud h3 {
  text-align: center;
  }
  
.tool_tip {
      position: relative;
      display: inline;
      border-bottom: 1px dotted blue;
  }
.tool_tip .tool_tiptext {
      visibility: hidden;
      width: 200px;
      background-color: indigo;
      color: white;
      text-align: center;
      padding: 3px;
      border-radius: 6px;
      position: absolute;
      z-index: 1;
      bottom: 100%;
      left: 50%;
      margin-left: -60px;
  }
.tool_tip:hover .tool_tiptext {
      visibility: visible;
  }
  
.tool_tiptext a {
  color: #55ffff;
}

.tool_tiptext a:hover {
  color: #0077b5;
}

#page_index ul {
      list-style-type: none;
  }
  
.heading_h1 a {
      font-size: 0.85em;
  }
  
.heading_h2 a {
      font-size: 0.85em;
      margin-left: 1rem;
  }
  
.heading_h3 a {
      font-size: 0.85em;
      margin-left: 2rem;
  }
  
.heading_h4 a {
      font-size: 0.85em;
      margin-left: 3rem;
  }
  
.heading_h5 a {
      font-size: 0.85em;
      margin-left: 4rem;
  }
  
.heading_h6 a {
      font-size: 0.85em;
      margin-left: 5rem;
  }
  
.hero img {
      width: 100%;
      margin: 0;
      padding: 0;
      height: 100%;
      }
      
.related_pages {
      margin: 0;
      padding: 1rem;
      padding-right: 4rem;
      }
  
.tagcloud {
      margin: 0;
      padding: 0;
      }
  
.share-buttons {
        display: flex;
        gap: 10px;
        /*margin:auto;*/
        justify-content: center;
     }
.share-button {
        border: none;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
        /*font-size: 16px;*/
        font-size: 2ch;
        /*padding: 8px 16px;*/
        padding: 0ch 1ch 0ch 1ch;
     }



.sidepanel_links {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 160px;
  transition: 0.5s;
}

.sidepanel_links .closebtn {
  position: absolute;
  top: 240px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  margin-left: 10%;
  float: left;
}

.openbtn:hover {
  background-color: #444;
} 

.openbtn2 {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 10px;
  margin-left: 10%;
  margin-right: 10%;
  border-radius: 10px;
}

.openbtn2:hover {
  background-color: #444;
} 


.tags {
background-color: black;
background-color: blue;
color: whitesmoke;
}

.desktop_only{
padding: 0;
margin: 0;
}

.codeblock {
/*margin-left: 7rem;*/
margin-left: var(--code_margin);
}