html {
   box-sizing:border-box;
}
* {
   box-sizing: inherit;
}
body {
   font-family: sans-serif;
   margin: 1rem;
}

header {
   background: linear-gradient(180deg, #ffff 80%, #fff0 100%);
   /* box-shadow: 0 0 10px #0002; */
   margin: -1rem;
   padding: 1rem 1rem 2rem 1rem;
   position: sticky;
   top: 0;
}

main {
   /* Allow vertical space for sticky header */
   margin-top: 2rem;
}

nav ul {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   list-style: none;
   margin: 0;
   padding: 0;
}

.checklist li {
   list-style-type: "▢ ";
}

.image-modal {
   font-weight: bold;
}

.all-images {
   counter-reset: item;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 250px));
   padding-left: 0;
}

.all-images li {
   list-style: none;
   margin-bottom: 3rem;
}

.all-images li::before {
   display: inline-block;
   content: counter(item) ".";
   counter-increment: item;
}

/* Modal dialog for images */
dialog {
   background-color: transparent;
   border: none;
   max-height: 100vh;
   padding: 0; 
   width: 100vw;
   aspect-ratio: 9 / 12;
}

/* Create transparent click target overlay to close dialog */
dialog::before {
   background-color: transparent;
   bottom: 0;
   content:"";
   display:block;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
}

dialog iframe {
   border: none;
   height: 99.5%; /* Otherwise there’s a vertical scrollbar?! */
   width: 100%;
}

/* Prevent background page scrolling while dialog is showing */
body.has-dialog {
   overflow: hidden; /* Remove scrollbars */
}

/* ---------------------

 Single pages for images 

 ----------------------- */
body.image-page {
   display:grid;
   margin: 0;
   overflow:hidden;
   place-items: center;
}

body.image-page picture,
body.image-page img {
   height: 100%;
   width: auto;
   max-height: 100vh;
   z-index:999;
}

/* Loader animation */
body.image-page {
   --fg-colour: #888;
}

.loader {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-width: 6rem;
   margin-top: 3rem;
   margin-bottom: 3rem;
}

.loader::before,
.loader::after {
   content: "";
   position: absolute;
   border-radius: 50%;
   animation: pulsOut 1.8s ease-in-out infinite;
   /* filter: drop-shadow(0 0 1rem var(--fg-colour)aa); */
   /* max-height: 6rem; */
   /* max-width: 6rem; */
}

.loader::before {
   width: 100%;
   padding-bottom: 100%;
   box-shadow: inset 0 0 0 1rem var(--fg-colour);
   animation-name: pulsIn;
}

.loader::after {
   width: calc(100% - 2rem);
   padding-bottom: calc(100% - 2rem);
   box-shadow: 0 0 0 0 var(--fg-colour);
}

@keyframes pulsIn {
   0% {
      box-shadow: inset 0 0 0 1rem --fg-colour;
      opacity: 1;
   }

   50%,
   100% {
      box-shadow: inset 0 0 0 0 var(--fg-colour);
      opacity: 0;
   }
}

@keyframes pulsOut {

   0%,
   50% {
      box-shadow: 0 0 0 0 var(--fg-colour);
      opacity: 0;
   }

   100% {
      box-shadow: 0 0 0 1rem var(--fg-colour);
      opacity: 1;
   }
}