body {
        background: #aaa;
        max-width: 750px;
        margin: 1em auto;
        padding: 0.5em;
        font-size: 13pt;
      }
      
      @media screen and (prefers-color-scheme: dark) {
        body {
          background: #808080;
        }
      }
      
      p {
        line-height: 1.5em;
      }

      img, iframe {
        max-width: 100%;
      }

      figure {
        margin: 0;
        margin-bottom: 2em;
        border: 1px black solid;
        /* max-width: 320px; */
        page-break-inside: avoid;
      }

      figure img {
        max-width: 100%;
        border-bottom: 1px black solid;
      }

      figcaption {
        padding: 0.5em;
      }
      
      nav {
        columns: 3;
        column-gap: 1.5em;
      }
      
      nav a:hover {
        outline: black 1px solid;
      }

      .gallery {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-start;
      }

      .gallery img {
        max-height: 90vh;
        max-width: 97%;
        margin: 0.5em;
      }
      
      .nsfw {
		    filter: blur(10px) contrast(70%);
		    transition: .8s ease;
		    height: 300px;
  		}

  		.nsfw:hover {
  		  filter: initial;
  		  height: initial;
  		}
  		
  		details {
  		  width: 100%;
  		  border: 1px black solid;
  		  margin: 0.5em;
  		}
  		
  		summary {
  		  padding: 1em;
  		}
  		
  		details p {
  		  padding: 0.5em;
  		}

      @media screen and (max-width: 450px) {
        figure { max-width: 100%; margin-right: 0; }
        .gallery { flex-direction: column; }
        nav { columns: 1; }
      }
      
      @media screen and (prefers-contrast: more) {
        body { background: white; }
      }