img { max-width: 100%; max-height: 85vh }
* { font-size: 1em; font-weight: normal; font-family: sans-serif }
body { max-width: 100%; margin: auto; padding: 0; background: #d8d8d8; margin-bottom: 4em }
.small { max-width: 810px; margin: auto; }
.big { max-width: 100%; margin: auto; }
nav { font-size: 1.1em; padding: 1em }
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 { text-align: center; max-width: 98%; margin: auto }
.g img { display: inline-block; max-width: 200px }
.g img:hover { outline: 2px solid black }

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

h1 { max-width: 80%; margin: auto; font-size: 2em; font-weight: bold; text-align: center; margin-top: 3rem; text-decoration: underline; text-decoration-thickness: 3px }

.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: 2; }
.g img { margin-bottom: 3px }

}