/* index page specific — sidebar nav + main text panel.
   Shared rules (font, #content base, .panel base, link colors)
   live in resources/common/site.css. */

#content {
  background: black;
}

/* index uses its own painted frame instead of the shared .border */
.overlay {
  position: absolute;
  inset: 0;
  background-image: url(/resources/index/overlay.png);
  pointer-events: none;
}

#maincontent {
  background-image: url(/resources/index/websafegalaxy.png);
  background-position: right;
  top: 85px;
  left: 201px;
  width: 410px;
  height: 371px;
  padding-left: 10px;
  padding-top: 5px;
}

#maintext {
  width: 393px;
  text-align: justify;
  text-justify: inter-word;
}

#sidebar {
  background-image: url(/resources/index/websafegalaxy.png);
  top: 89px;
  left: 17px;
  height: 372px;
  width: 172px;
  overflow-x: hidden;
}

/* Nav icon positions, kept as offsets from #sidebar's own
   top/left (89px, 17px) so they're easy to reason about if the
   sidebar ever moves. */
#stuff        { position: absolute; top: calc(99px  - 89px); left: calc(17px - 17px); }
#aboutme      { position: absolute; top: calc(180px - 89px); left: calc(39px - 17px); }
#oliver       { position: absolute; top: calc(255px - 89px); left: calc(39px - 17px); }
#scroll4more  { position: absolute; top: calc(370px - 89px); left: calc(30px - 17px); }
#tokipona     { position: absolute; top: calc(405px - 89px); left: calc(90px - 17px); }
#webclown     { position: absolute; top: calc(530px - 89px); left: calc(30px - 17px); }
#oliver2      { position: absolute; top: calc(1750px - 89px);left: calc(39px - 17px); transform: scaleX(-1); }