html {
    scrollbar-color: darkslategrey white;
  }
  body {
    background: #613934 url("img/bg/wator-bg.png");
    padding: 1rem;
    overflow-x: hidden;
    position: relative;
  }
  button {
    cursor: pointer;
  }
  img {
    max-width: 100%;
  }
  
  h2 {
    text-transform: none;
  }
  
  /* LINED PAPER */
  
  .ruled {
    background-color: whitesmoke;
    margin: 1rem auto;
    box-shadow: 0 0 0.4rem rgb(0, 0, 0, 0.75);
    max-width: 57rem;
  }
  .ruled h2 {
    background-image: linear-gradient(
      90deg,
      transparent 79px,
      #ec7063 79px,
      #ec7063 81px,
      transparent 81px
    );
    background-repeat: repeat-y;
    margin: 0;
    padding: 3rem 1rem 0 5.5rem;
  }
  .ruled .body {
    background-image: linear-gradient(
        90deg,
        transparent 79px,
        #ec7063 79px,
        #ec7063 81px,
        transparent 81px
      ),
      linear-gradient(#85c1e9 2px, transparent 2px);
    background-size: 100% 1.2rem;
    padding: 0.2rem 1.5rem 0.2rem 5.5rem;
  }
  .ruled p,
  .ruled ul,
  .ruled dl,
  .ruled ol {
    margin: 1.2rem 0;
    line-height: 1.2;
  }
  .ruled ul ul,
  .ruled ul ol,
  .ruled ul li,
  .ruled ol li,
  .ruled dt {
    margin: 0;
    line-height: 1.2;
  }
  .ruled ul ol {
    padding-left: 1.6rem;
  }
  .ruled li::marker {
    line-height: 0;
  }
  .ruled dd {
    margin: 0 0 1.2rem 1rem;
    line-height: 1.2;
  }
  .ruled small {
    line-height: 1.2em;
  }
  .ruled sup {
    line-height: 0;
  }
  .ruled a {
    background: rgb(300, 300, 50, 0.4);
    outline: 6px rgb(300, 300, 50, 0.4) solid;
    color: darkslategrey;
  }
  .ruled a:hover,
  .ruled a:focus {
    background: rgb(300, 300, 50, 0.7);
    outline: 6px rgb(300, 300, 50, 0.7) solid;
    color: black;
  }
  
  /* RECEIPT */
  
  .receipt {
    float: left;
    max-width: 20em;
    box-shadow: 0 0 0.4rem rgb(0, 0, 0, 0.75);
    border-left: 2px solid white;
    border-right: 2px solid white;
    margin-left: 2vw;
    opacity: 98%;
  }
  .receipt .paper {
    padding: 3em 1.5em;
    background: white;
    outline: 2px dotted white;
    outline-offset: -1px;
  }
  .receipt h1 {
    font-size: 250%;
    margin: 0;
  }
  .receipt h1,
  .receipt .event {
    text-align: center;
    line-height: 1;
  }
  .receipt .event {
    text-transform: uppercase;
  }
  .receipt dl {
    display: flex;
    flex-wrap: wrap;
    margin: 1.5em 0 0;
  }
  .receipt dt {
    margin: 0;
    width: 70%;
  }
  .receipt dd {
    margin: 0;
    width: 30%;
    text-align: right;
  }
  .receipt .total {
    margin: 0;
  }
  .receipt .total:before,
  .receipt .total:after {
    content: "-------------------";
    display: block;
    width: 100%;
    text-align: right;
  }
  .receipt .total dt {
    text-align: right;
    width: 50%;
  }
  .receipt .total dd {
    padding-left: 0.5em;
    text-align: left;
    width: 50%;
  }
  
  /* PHOTOS */
  
  #photos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1340px;
    min-width: 60vw;
    margin: 2rem 0 1rem 0;
    padding-top: 1rem;
  }
  #photos figure,
  .photo {
    display: inline-block;
    background: white;
    box-shadow: 0 0 0.4rem rgb(0, 0, 0, 0.75);
    transform: rotate(2deg);
    margin: 0 -25px;
  }
  #photos figure img,
  .photo img {
    margin: 1rem 1rem 0 1rem;
    width: 200px;
    aspect-ratio: 1 / 1;
    border: 2px rgb(0, 0, 0, 0.55) inset;
    max-width: calc(100% - 2rem);
  }
  #photos figcaption,
  .pop figcaption,
  .photo figcaption {
    text-align: center;
    margin: 0.5rem 1rem 1rem 1rem;
    font-family: "DOS", monospace;
    font-size: 1rem;
    color: black;
  }
  #photos button {
    background: none;
    border: none;
    max-width: 40%;
  }
  #photos button:hover,
  #photos button:focus {
    z-index: 3;
  }
  #photos button:nth-child(2n) {
    transform: rotate(-10deg);
  }
  #photos button:nth-child(3n) {
    transform: rotate(5deg);
  }
  #photos button:nth-child(4n) {
    transform: rotate(4deg);
  }
  #photos button:nth-child(5n) {
    transform: rotate(-2deg);
  }
  #photos button:nth-child(6n) {
    transform: rotate(-7deg);
  }
  :popover-open {
    border: none;
    box-shadow: 0 0 0.4rem rgb(0, 0, 0, 0.75);
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
  }
  .pop figure:popover-open {
    display: block;
    background: white;
    width: 88vmin;
  }
  .pop figure:popover-open figcaption {
    font-size: 175%;
    margin: 2.5vmin 1rem 4vmin 1rem;
    color: black;
  }
  .pop figure:popover-open img {
    margin: 4vmin 4vmin 0 4vmin;
    width: 80vmin;
    height: 80vmin;
    border: 4px rgb(0, 0, 0, 0.55) inset;
  }
  
  /* STICKY NOTE */
  
  .sticky {
    padding: 1.25rem;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    background: linear-gradient(#f9efaf, #f7e98d);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.55);
    transform: rotate(-3deg);
  }
  
  /* OTHER */
  
  .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    width: 100%;
  }
  #bugs {
    background: url("cal.png");
    background-repeat: no-repeat;
    background-position: 5% 70%;
  }
  
  @media screen and (max-width: 600px) {
    .ruled p,
    .ruled ul,
    .ruled ul ol,
    .ruled ul li,
    .ruled ol li,
    .ruled dd,
    .ruled dt {
      line-height: 1.2rem;
    }
    .receipt {
      float: none;
      margin-bottom: -4rem;
    }
    .ruled h2 {
      background-image: linear-gradient(
        90deg,
        transparent 29px,
        #ec7063 29px,
        #ec7063 31px,
        transparent 31px
      );
      padding-left: 2.5rem;
    }
    .ruled .body {
      background-image: linear-gradient(
          90deg,
          transparent 29px,
          #ec7063 29px,
          #ec7063 31px,
          transparent 31px
        ),
        linear-gradient(#85c1e9 2px, transparent 2px);
      padding-left: 2.5rem;
    }
  }
  
  @media screen and (prefers-color-scheme: dark) {
    body {
      color: black;
    }
    a {
      color: teal;
    }
    img {
      filter: none;
    }
    .hcb-comment-body {
      color: white;
    }
  }