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

body {
  min-height: 100vh;
  background: #eee;
  font-size: 105%;
  font-family: "STSong", sans-serif;
}

a {
  color: darkred;
}

a:active {
  color: gray;
}

.sidebar-wrap {
  min-height: 100vh;
  box-sizing: border-box;
  background: #eee;
  padding-top: 2%;
}

.sidebar-inner {
  margin-top: 8%;
  margin-left: 4.5%;
  margin-right: 4.5%;
  margin-bottom: 2.5%;
}

.sidebar-title {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 1.1em;
  font-weight: 700;
}

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.sidebar-list li {
  margin-top: 5%;
}

.sidebar-list a,
.sidebar-link,
.sidebar-section-title {
  display: block;
  margin-left: 5%;
  padding: 2% 2% 4% 2%;
  color: black;
  text-decoration: none;
  font-size: 1em;
}

.sidebar-sectionRoom-title {
  display: block;
  text-align: center;
  padding: 2% 2% 4% 2%;
  color: black;
  text-decoration: none;
  font-size: 1em;
}

.sidebar-list a:hover,
.sidebar-link:hover,
.sidebar-section-title:hover,
.sidebar-back a:hover,
.sidebar-subitem:hover {
  color: gray;
}

.sidebar-back {
  margin: 8% 4.5% 1rem;
  text-align: center;
}

.sidebar-back a {
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 0;
}

.sidebar-section {
  margin: 15px 0;
}

.sidebar-subitem {
  display: block;
  margin: 4px 0 0 13px;
  padding: 6px 8px;
  background: white;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 0.8em;
  line-height: 1.4;
}

.sidebar-subitem:hover {
  background: #ddd;
}

@media screen and (max-height: 450px) {
  body {
    font-size: 100%;
  }
}