main{
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

aside{
  background-color: var(--background);
  width: 25%;
}

aside ul{
  display: flex;
  flex-direction: column;
}

aside ul li{
  color: var(--text-color);
  font-weight: normal;
  list-style: none;
  padding: 10px;
  background-color: var(--unselected-color);
  border: 1px solid var(--transparent-black);
}

aside ul li:hover{
  transition: 0.1s;
  cursor: pointer;
  background-color: var(--li-hover);
}

aside ul li.active {
  background-color: var(--selected-color);
  font-weight: bold;
}

section{
  background-color: var(--base-color);
  color: var(--text-color);
  border: 1px solid var(--transparent-black);
  padding: 20px;
  width: 75%;
}

section > div{
  display: none;
}

section > div:last-child{
  display: block;
}

h2 {
  padding-bottom: 20px;
}

h2 > a { color: #fff !important; }

section ul li{
  margin-left: 20px;
}

.content-ul {
  margin-left: 20px;
}

section ol li{
  margin-left: 30px;
}

section a{
  text-decoration: none;
  color: var(--href-color)
}

.images {
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.images img {
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

@media(max-width: 500px) {
  .images img { display: none; }
}

#zantesun-img1 {
  max-height: 200px;
  width: auto;
}

#zantesun-img2 {
  max-height: 200px;
  width: auto;
}