body {height:100vh; margin: 0px;}

#container {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  font-size: 20px;
  color: saddlebrown;
  height: 100%;
}

#header {
  flex: 0 0 min-content;
  background-color: saddlebrown;
  color: white;
  font-size: min(6.5vw, 60px);
  box-sizing: content-box;
  padding: 10px;
  text-align: center;
}

#main {
  flex: 1 0 auto;
  box-sizing: border-box;
  padding: 10px;
}
.menu-root{
  position: fixed;
  top:0px; left: 0px;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}
.menu-hamburger {
  display: inline-block;
  color: white;
  background-color: saddlebrown;
  border-radius: 0px 10px 10px 0px;
  font-size: min(7vw, 30px);
}
.menu-list-top{
  border: 3px solid saddlebrown;
  padding: 10px;
}
.menu-list,.menu-list-top{
  background-color: cornsilk;
  padding-left: 20px;
  display: none;
}
.menu-list{
}
.menu-show { display: block;}
.menu-label { padding-left: -20px; }
.menu-label::before {content: "\0020+"; font-weight: bold;}
.menu-leaf, .menu-label{
  display: block;
  text-decoration: none;
  color: saddlebrown;
  padding-bottom: 8px;
}
.menu-sep{

}
.menu-bold { font-weight: bold; }

#main {
  flex: 1 0 1px;
  background-color: white;

  padding: 15px;
}

.mainTitle { font-size: 120%; font-weight: bold; margin-bottom: 10px;}
.secondTitle { font-size: 110%; font-weight: bold;margin: 20px 0px 10px 0px;}
.thirdTitle { font-weight: bold; }
div.indent{padding-left: 15px;padding-bottom: 15px;}
ul.indent>li {padding-bottom: 10px;}
span {cursor: pointer;}
a.button {display: inline-block; padding: 5px 10px;
  color:white; background-color: saddlebrown; text-decoration: none;
  border-radius: 25px;}
a.emphasize { font-weight: bold; text-decoration: none; color: red; }
.float-right {
  float: right;
  display: inline-block;
}
.gallery {display:flex; flex-flow: row wrap; align-items: center;}
.gallery>a {margin: 5px;}