* {    
        --textcolor: #222;
        --bgcolor: #fff;
        --highlight: #888888;
        --highlight2: #6c90d7;
    }

    body{
      font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
font-weight: normal;
      margin:1.5em auto;
      max-width:650px;
      line-height:1.6;
      font-size:18px;
      color:var(--textcolor);
      background-color: var(--bgcolor);
      padding:0 1em;
    }
    h1,h2,h3{line-height:1.2}

    h1 a{
        color: var(--textcolor);
        text-decoration-color: var(--highlight2);
        text-decoration-style: wavy;
        text-decoration-thickness: 2px;
    }
    h1 a:hover{
        color: var(--highlight2);
    }
    a{
      color:var(--highlight2);
    }
    a:hover{
        color: var(--textcolor);
    }
    
    img{
      max-width:100%;
      max-height:100%;
      width:auto;
      height:auto;
    }
    hr{
        border:none;
        background-color: var(--highlight);
        height:1px;
    }
    section {
      display: none;
    }
    
    section:target { /* Show section */
      display: block;
    }
    
    #gallery, #gallery2{
      display:grid;
      width:100%;
      margin:1em 0;
      gap:1em;
    }
	#gallery{grid-template-columns:repeat(3, 1fr);}
	#gallery2{grid-template-columns:repeat(2, 1fr);}
    #gallery a, #gallery2 a{
      color:var(--textcolor);
      opacity:1;
      display:grid;
      gap:0.75em;
      align-items:flex-start;
      text-decoration:none;
    }
    #gallery a:hover img, , #gallery2 a:hover img{
      opacity:0.75;
    }
    .item-image img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .item-image{
      line-height:0;
      aspect-ratio:1/1;
    }
    .item-title{
      text-align:center;
      font-size:0.9em;
    }
    @media (max-width:650px){
      #gallery, #gallery2{
      grid-template-columns:repeat(2, 1fr);
      }
    }