body {
  display:flex;
  justify-content:center;
  align-items:center;
  height:95vh;
  box-sizing:border-box;
  background-image:url("bg.png");
}

h1, h2, h3, h4, h5 {
  margin: 0.1em 0em 0.1em 0em;
}

p {
  margin: 0.2em 0em 0.2em 0em;
}

hr {
  width:100%;
}

.mainwindow {
  width:70%;
}

@media only screen and (max-width: 900px) {
  .mainwindow {
    width:95%;
  }
}

.main {
  display:flex;
  flex-flow: row wrap;
  height:80vh;
  margin: 8px -8px 8px 8px;
}

@media only screen and (max-width: 900px) {
  .main {
    flex-flow: column nowrap;
  }
}

.maincontainer {
  width:75%;
  max-height:100%;
}

.maincontent {
  display: none;
  height:90%;
  max-height:90%;
  overflow-y: auto;
}

@media only screen and (max-width: 900px) {
  .maincontainer {
    width:95%;
  }
  .maincontent {
    height:50%;
  }
}

.maincontent.default {
  display:block;
}

.maincontent:target {
  display:block;
}

.maincontent:target ~ .maincontent.default {
  display:none;
}

.bottomcontent {
  display: flex;
  justify-content:space-evenly;
}

.sidebar {
  width:23%;
  box-shadow:inset 1px 0px var(--button-shadow);
  height:100%;
  overflow-y:auto;
}

@media only screen and (max-width: 900px) {
  .sidebar {
    width:100%;
    height:50%;
  }
}

.sidecontent {
  padding:0px 10px 0px 10px;
  display:flex;
  flex-flow: column wrap;
  justify-content:center;
}

.icon {
  width:80%;
  box-shadow: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);
  padding:2px;
}

.frontcontainer {
  height:20vh;
}

.fronterslist {
  height:100%;
}

ul.tree-view a {
  color:inherit;
}

.whitebox {
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  padding: 10px;
  margin: 0;
}

.mainheader {
  font-size:24px;
  font-weight:bold;
  margin-left:5px;
}

.secondheader {
  font-size:24px;
  margin-left:55px;
}

.maintext {
  font-size:20px;
  margin-left:5px;
  margin-top:15px;
  margin-bottom:15px;
}