/*
Theme Name: MMVI
Author: Bart Noordervliet
Author URI: https://www.mmvi.nl/
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: <https://www.gnu.org/licenses/gpl-2.0.html>
Text Domain: mmvi
*/

HTML { scroll-behavior: smooth; }
BODY { margin: 0; font-family: Cambria, Georgia, serif;
 background-image: url(BNF_1521.jpg); background-repeat: repeat-y; background-position: bottom;
 display: flex;
}
DIV.site-sidebar { }
DIV.site-title { display: flex; margin: 0; }
DIV#site-description { align-self: center; font-size: 1.75rem; }
MAIN { flex-grow: 1; display: flex; gap: 1rem; box-sizing: border-box; scroll-behavior: smooth; scroll-padding-top: 3.5rem; max-height: 100vh; overflow-y: auto; }
DIV.site-content { max-width: 60rem; margin: 0 auto; padding: 1rem 2rem; color: white; font-size: 21px; }
DIV.site-content H1 { text-decoration: underline; }
UL.menu { margin: 0; color: white; }
UL.menu A { text-decoration: none; color: inherit; }
UL.menu > LI > A { font-size: 1.5rem; }
UL.menu > LI A:hover { color: rgb(200, 200, 200); }
UL.menu LI { list-style: none; border-left: white 2px solid; padding-left: 10px; margin-bottom: 3px; }
UL.sub-menu { padding-left: 1rem; }
UL.sub-menu A { font-size: 1.2rem; }
UL.sidebar { margin: 1.5rem 1rem; padding-left: 0; }
UL.sidebar LI { list-style: none; }
a:link, a:visited { color: lightblue; }
a:hover, a:active { color: blue; }

IFRAME { height: 400px; width: 600px; }

#menuButton { position: relative; align-self: center; cursor: pointer; width: 30px; height: 30px; margin-left: 16px; margin-right: 16px; }
#menuButton span, #menuButton span:before, #menuButton span:after {
  position: relative;
  display: block;
  top: 13px; height: 4px; width: 30px;
  border-radius: 1px; background: black;
  content: '';
  transition: all 500ms ease-in-out;
}
#menuButton span:before { top: -8px; }
#menuButton span:after { top: 4px; }
#menuButton .open span { background-color: transparent; }
#menuButton .open span:before { transform: rotate(45deg); top: 1px; }
#menuButton .open span:after { transform: rotate(-45deg); top: -2px; }

#menu { position: absolute; left: 0; top: 65px; opacity: 0; overflow: hidden; pointer-events: none; transition: opacity 500ms ease-in-out; background-color: white; }
#menu > UL { padding: 0 30px; }
#menu LI { padding: 5px 0; }
#menu A:any-link { color: #bd3f00; font-weight: bold; }

@media (max-width: 1024px) {
  BODY { flex-direction: column; }
  MAIN { overflow-y: initial; max-height: initial; }
  DIV.site-title { justify-content: center; }
  DIV.site-content{ font-size: 18px; }
  IFRAME { height: 40vh; width: 100%; }
  .menu-hoofdmenu-container, .sidebar { display: none; }
}
@media (max-width: 500px) {
  .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: initial; }
}