section.selector {
  display: flex;
  flex-direction: column;
  width: 540px;
  margin-top: 20px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
ul a {
  text-decoration: none;
}
ul a:hover {
  text-shadow: 1px 2px #a1b5c860;
}

li {
  padding: 5px 10px;
  z-index: 1;
  min-width: 100px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

li.twosix {
  color: #83a4ae;
  background: #dbeec2;
}
li.twoone {
  color: #83a4ae;
  background: #dbeec2;
  border: 7px solid #91c0ca;
}
li.vtwo {
  color: #a1b5c8;
  background: #d5f4e0;
  border: 7px solid #b6b3db;
}
li.reskin {
  color: #cbd4e3;
  background: #e3f8f3;
  border: 7px solid #dbcee7;
}
li.selected {
  z-index: 3;
  color: var(--text-color);
  background: var(--background-color);
  border: 7px solid var(--border-color);
  border-bottom: 7px solid var(--bottom-color);
  font-weight: bold;
}

section.main {
  z-index: 2;
  background: linear-gradient(#eff4de, #d7e497, #dfebc1, #d7e497, #eff4de);
  margin: auto;
  outline: 7px solid var(--border-color);
}
.main img {
  border: 5px solid #dbe48b;
  margin: 20px;
}

img {
  width: 500px;
  height: 500px;
}