body {  
  margin: auto; 
  max-width: 1080px;
  background: white;
  padding: 1em;
}

main {
  text-align: center;
}

footer a { line-height: 1.3 }
a { color: black }

img { max-width: 100% }
a img { background: none; padding: .2em; margin:.5em; border: 2px solid black }
.rope a { color: white; background: black; padding: .3em }
a:hover { opacity: .7 }
.i { background: none }
.rope a { padding: .3em .5em }

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

.p br { display: none }

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

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

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

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

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

@media only screen and (max-width: 810px) {
a img { max-width: 40%; margin:.3em }
}

@media (prefers-color-scheme: dark) {

body { 
  color: black
}

}