img { max-width: 100%; max-height: 85vh }
* { font-size: .9rem; font-weight: normal; font-family: sans-serif }
body { max-width: 100%; margin: auto; padding: 1em }
.small { max-width: 810px; margin: auto; }
.big { max-width: 100%; margin: auto; }
nav a { margin: 0 .3em; background: black; color: white; padding: .1em .3em; text-decoration: none }
a:hover { opacity: .7 }
a { color: black }
li { list-style-type: none }

.g { column-count: auto; column-width: 150px; column-gap: .3em; margin-top: 1em }
.g img { max-width: 100%; width: 100%; display: block }

.p {
  position: relative;
  width: fit-content;
}

.p img {
  max-width: 100%;
  display: block;
}

.p a {
  position: absolute;
  background: none;
  top: 0;
  height: 100%;
  width: 50%;
}

.p .up { display: none }

.p .left {
  left: 0;
  width:40%;
  cursor: w-resize;
}

.p .right {
  right: 0;
  width:40%;
  cursor: e-resize;
}

.p .left, .p .right, .p span, nav span {
  font-size:0em;
}

nav br,.p br { display: none }

@media only screen and (max-width: 860px) {
.g { column-count: auto; column-width: 100px; }
}