html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   font-size: medium;
   }
  *, *:before, *:after {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit;
   }
  

body {
      background-size: cover;
      font-family: Baskerville, Garamond, Georgia, Serif;
      padding: 0;
      margin: 0;
      }

/*                                PHONE SCREENS                   */
      .container {
            display: grid;
            grid-template-columns: 1fr 10fr 12fr;
            grid-template-rows: fitcontent(50vh) 5vh 1fr 5vh;
            grid-template-areas:
              "header-logo header-titles header-titles"
              "header-home header-home header-search"
              " . . header-postnav"
              "content content content"
              " . sidebar sidebar";
            align-items: center;
            width: 100%;
            margin: auto;    
       }
       .frontpage-title {
            display: flex;
            justify-content: center;
            grid-column-start: 1; 
            grid-column-end: 4;
        }
       .frontpage-title img {
            width: 90vw;
            margin: 3px;
       }
       .header-logo {
            display: flex;
            grid-area: header-logo;
        }
       .header-titles {
            display: flex;         
            grid-area: header-titles;
            font-family: "Cookie";
        }
        .header-titles a {
            font-size: 1.8rem;
            font-style: italic;
            color: #660066;
            padding-left: 0.4rem;
            margin: 0.4rem 0.1rem;
        }
        .header-search {
            display: flex;
            justify-content: flex-end;
            margin: 0 1rem;
            grid-area: header-search;
        }
        .header-sas {
            display: flex;
            padding: 0;
            justify-content: flex-start;
            grid-area: header-sas;
        }
        .header-home {
            display: flex;
            grid-area: header-home;
            position: sticky;
            top: 0.4rem;                   
            justify-content: flex-start;  
        }
        .sidebar {
            display: flex;
            flex-wrap: wrap;
            grid-area: sidebar;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 1rem;
        }
        .header-postnav {
            display: flex;
            grid-area: header-postnav;
            position: sticky;
            top: 0.6rem;                   
            justify-content: flex-end;
            margin: 0 1rem;
        }   
main    {
            grid-area: content;
            display: flex;
            flex-direction: column;
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid #aaa;
            border-radius: 6px;
            margin: 1rem;
            padding: 0.5rem;
        }

article {
            display: flex;
            flex-direction: column;
        }

main, article {
      font-size: 1rem;
      line-height: 1.2;      
      }
img, iframe {
          max-width: 100%;
      }

   h1 {
          font-size: 3rem;
          font-style: italic;
          color: #660066;
      }
   h2 {
          font-size: 1.6rem;

      }
   h3 {
          font-size: 1.3rem;
          margin-bottom: 0.3rem;
      }
a, a:link, a:visited {
            text-decoration: none;
            color: #660066;
        }
a:hover, a:focus {
            text-decoration: underline;
            color:#663399;
        }

        .blogpost {          
            background: rgba(255, 255, 255, 0.75);
            border-radius: 6px;
        }
        .recentposts, .olderposts, .frontpage-card, .walkspreview {
            width: 100%;
  /*          background: rgba(255, 255, 255, 0.75);  */
        }
        .olderposts, .frontpage-card {
            margin-bottom: 1rem;
        }
        .recentposts, .walkspreview {
            border-radius: 4px 4px 0 0;
            margin-bottom: 0;
        }
        .olderposts {
            border-radius: 0 0 4px 4px;
            margin-top: 0;
        }
        .frontpage-card {
            border-radius: 4px;
        }

        .recentposts article, .frontpage-card article, .olderposts article, .walkspreview article {
            display: flex;
            flex-direction: column;
            align-items: start;
            width: 100%;
        }         
        .walkspreview article {
            margin-bottom: 5vh;
        }

        .olderposts {
            padding: 5%;
        }
       
        .blogPostPreviewPic {
            width: 100%;
            padding: 0 5%;
            order: 2;
        }
        .blogPostPreviewPic img {
           border: .3em solid white;
           object-fit: cover;
           width: 100%;
           height: 35vh;
        }
        .blogPostPreviewTitle {
            padding: 0 5%;
            order: 1;
        }
        .blogPostPreviewText {
            padding: 0 5%;
            order: 3;
        }

        .snippetPic {
           width: 15vw;
           min-width: 4rem;
           height: 4rem;
           float: left; 
           margin-right: 5px;
        }
        .snippetPic img {
           width: 15vw;
           min-width: 4rem;
           height: 4rem;
           border: .1em solid white;  
           object-fit: cover;
        }
        .previewBanner {
               background-size: cover;
               min-height: fit-content;
               padding: .4em 10%;
               margin: 1px;
               border-radius: 6px 6px 0 0;
               font-family: Baskerville, Garamond, Georgia, Serif;
               font-style: italic;
               font-size: 1.7rem;
               color: #660066;        }

      .homepage-button {
            background-size: cover;
            height: 2rem;
            padding: 0.4em;
            margin-right: 1rem;
            margin-bottom: 1rem;
            align-self: flex-end;
            border-radius: 4px;
            font-family: Verdana, Arial, sans-serif;
            color: white;
            border: solid 1px #660066;
            float: right;
      }

      .logo {
            position: relative;
            display: inline-block;
            height: 3.2rem;
            min-width: 1.5em; 
            max-width: 3rem;
            margin: 0.4rem;
        }
      .logo .mauve {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
        }
      .logo:hover .mauve {
           display: inline;
        }

      .go-home {
            position: relative;
            display: inline-block;
            padding: 0.4rem;
            min-width: 2rem; 
            max-width: 3rem;
            margin-left: 0.4em;
        }
      .go-home .mauve {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            padding: 0.4rem;
            z-index: 99;
        }
      .go-home:hover .mauve {
           display: inline;
        }
       .nav-button {
            height: 100%;
            background: rgba(255, 255, 255, 0.85);
            border-radius: 3px;
            padding: 0.4rem;
            margin-left: 0.4em;
        }
       .portrait {
           width: 80%; 
           margin: auto;
           padding: 0 0 .5rem 0;
        }
        .landscape {
           margin: auto;
           width: 80%;
           min-width: 300px;
        }
img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.45);
}

#more {display: none;}

figure {
  width: 96vw; 
  height: 92vh;
  object-fit: contain;
}
figcaption {
  position: fixed;
  bottom: 2%;
  padding: 2px;
/*  background-color: black;
  background-color: rgba(0,0,0,0.9);*/  /* Black w/ opacity */
  color: white;
  width: 90%;
  text-align: center;
}
.moreinfo {
  display: inline;
  color: #660066;
  background-color: transparent;
  cursor: pointer;
  border: none;
}

.panel {
  display: none;
  width: 50%; 
  margin: auto;
  padding: 1em;
  background-color: #ffccff;
  border: 1px solid #ff99cc;
  border-radius: 3px;
}

/* Unopened lightbox */
.lightbox {
  display: none;
  position: fixed;
  left: calc(50% - 48vw);
  top: calc(50% - 48vh);    
  width: 96vw;
  height: 96vh;
  border-radius: 5px;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
   box-shadow: 0 2px 4px 8px rgba(0, 0, 0, 0.75), 0 4px 10px 15px rgba(0, 0, 0, 0.65);
  z-index: 1;
  object-fit: contain;
}

/* Opened lightbox */
.lightbox:target {
  display: block;
  object-fit: contain;
}

/* Lightbox content */
.lightbox img {
  margin: auto;
  display: block;
  position: fixed;
  left: 2%;
  top: 2%;
  width: 96%;
  height: 90%;
  border-radius: 5px;
  object-fit: contain;
  animation-name: fade-in;
  animation-duration: 0.5s;
}

@keyframes fade-in {
  from {opacity:0}
  to {opacity:1}
}

/* Close button */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: 2.5vmax;
  top: 2.5vmax;
  width: 2.5vmax;
  height: 2.5vmax;
  font-size: 2.5vmax;
  font-style: bold;
  position: fixed;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 14%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* Next button */
.lightbox .next {
  position: relative;
  display: block;
}

.lightbox .next::after {
  right: 2.5vmax;
  width: 2.5vmax;
  height: 2.5vmax;
  font-size: 2.5vmax;
  font-style: bold;
  top: 50%;
  position: fixed; 
  display: flex; 
  z-index: 1;
  color: white;
  content: ">";
  cursor: pointer; 
}

/* Previous button */
.lightbox .previous {
  position: relative;
  display: block;
}

.lightbox .previous::after {
  left: 2.5vmax;
  width: 2.5vmax;
  height: 2.5vmax;
  font-size: 2.5vmax;
  font-style: bold;
  top: 50%;
  position: fixed; 
  display: flex; 
  z-index: 1;
  color: white;
  content: "<";
  cursor: pointer;
}

/*                                TABLET SCREENS                   */

@media only screen and (min-width:600px) {
        .container {
            display: grid;
            grid-template-columns: 2fr 2fr 10fr 3fr 3fr;
            grid-template-rows: fitcontent(40vh) 5vh 1fr;
            grid-template-areas:
              "header-logo header-titles header-titles header-search header-search"
              "header-home header-home header-sas header-postnav header-postnav"
              "sidebar sidebar content content content";
        }
       .frontpage-title {
            display: flex;
            justify-content: center;
            grid-column-start: 1; 
            grid-column-end: 4;
        }
       .frontpage-title img {
            width: 90vw;
            margin: 5px;
       }
        .header-logo {
            display: flex;
            grid-area: header-logo;
        }
        .header-titles {
            display: flex;
            grid-area: header-titles;
            padding: 0 0.1rem;
        }
        .header-titles a {
            font-size: 2.2rem;
            font-style: italic;
            color: #660066;
            margin: 0.4rem 0.1rem;
        }
        .header-search {
            display: flex;
            grid-area: header-search;
            justify-content: flex-end;
            margin: 0 1rem;
         }
        .header-sas {
            grid-area: header-sas;
            display: flex;
            justify-content: flex-start;
        }
        .header-home {
            display: flex;
            grid-area: header-home;
            position: sticky;
            top: 0.4rem;                   
            justify-content: flex-start;  
        }
        .header-postnav {
            display: flex;
            grid-area: header-postnav;
            justify-content: flex-end;
            position: sticky;
            top: 0.6rem;                   
            margin: 0 1rem;
        }
        .sidebar {
            grid-area: sidebar;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;  
            align-items: flex-start;
            padding: 1rem;        }
  main {
            grid-area: content;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;     
            background: rgba(255, 255, 255, 0.75);
            margin: 1rem;
            border: 1px solid #aaa;
            border-radius: 6px;
        }
article {
            display: flex;
            flex-direction: column;
        }
main, article {
      font-size: 1rem;
      line-height: 1.2;      
      }
  img, iframe {
          max-width: 100%;
      }

   h1 {
          font-size: 3rem;
          font-style: italic;
          color: #660066;
      }
   h2 {
          font-size: 1.6rem;
      }
   h3 {
          font-size: 1.3rem;
          margin-bottom: 0.3rem;
      }
a, a:link, a:visited {
            text-decoration: none;
            color: #660066;
        }
a:hover, a:focus {
            color:#663399;
        }

        .recentposts, .frontpage-card, .blogpost, .walkspreview{
            background: none;
        }
        .recentposts, .walkspreview {
            width: 100%;
            display: flex;    
            flex-direction: row;
            flex-wrap: wrap;    
            justify-content: space-around;  
        }
        .frontpage-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;  
            width: 50%;
        }
   .blogPostPreview {
            display: flex;
            flex-direction: row;
   }
        .olderposts {
            display: block;
            background: none;
        }
        .blogPostPreviewPic {
            width: 100%;
            padding: 0.3em 0.8em;
            margin-top: 1rem;
            order: 1;
        }
        .blogPostPreviewPic img {
           border: .3em solid white;
           object-fit: cover;
           width: 100%;
        }
           .blogPostPreviewTitle {
            padding: 0 1rem;
            margin-top: 1.5rem;
            margin-bottom: 0;
            order: 2;
        }
        .blogPostPreviewText {
            padding: 0 1rem;
            margin-top: 0.5rem;
            order: 3;
        }

        .previewBanner {
            background-size: cover;
            height: 8rem;
            padding: 0 1em;
            margin: 0;
            border-radius: 3px;
            font-family: Baskerville, Garamond, Georgia, Serif;
            font-style: italic;
            font-size: 1.7rem;
            color: #660066;
        }

        .recentposts article, .frontpage-card article, .walkspreview article {
            display: flex;
            flex-direction: column;
            align-items: start;
        }   
        .recentposts article, .walkspreview article {
            width: 50%;
        }
        .frontpage-card article {
            width: 100%;
            align-items: start;
        }  
        .recentposts article img, .walkspreview article img {
           border: .3em solid white;
           width: 100%;
           height: 35vh;
           object-fit: cover;
        }   
        .olderposts article img {
          border: .1em solid white;  
          width: 10%;
          min-width: 3rem;
          height: 3rem;
          object-fit: cover;
          float: left; 
          margin-right: 5px;
         }

      .homepage-button {
            background-size: cover;
            height: 2rem;
            padding: 0.4em;
            margin-right: 1rem;
            margin-bottom: 0;
            align-self: flex-end;
            border-radius: 4px;
            font-family: Verdana, Arial, sans-serif;
            color: white;
            border: solid 1px #660066;
            float: right;
            margin-top: auto;
      }

      .logo {
            position: relative;
            display: inline-block;
            height: 4.5rem;
            min-width: 1.5em; 
            max-width: 5rem;
            margin: 0.4rem 0.1rem;
        }
      .logo .mauve {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
        }
      .logo:hover .mauve {
           display: inline;
        }

      .go-home {
            position: relative;
            display: inline-block;
            padding: 0.2rem;
            min-width: 1.5rem; 
            max-width: 2.5rem;
            margin-left: 0.4em;
        }
      .go-home .mauve {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            padding: 0.2rem;
            z-index: 99;
        }
      .go-home:hover .mauve {
           display: inline;
        }
       .nav-button {
            height: 100%;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 3px;
            padding: 0.2rem;
            margin-left: 0.4em;
        }
       .portrait {
           float: right; 
           width: 30%; 
           min-width: 300px; 
           padding: 0 0 .5rem .5rem;
        }
        .landscape {
           margin: auto;
           width: 80%;
           min-width: 300px;
        }
img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.45);
}

#more {display: none;}

figure {
  width: 96vw; 
  height: 92vh;
  object-fit: contain;
}
figcaption {
  position: fixed;
  bottom: 2%;
  padding: 2px;
/*  background-color: black;
  background-color: rgba(0,0,0,0.9);*/  /* Black w/ opacity */
  color: white;
  width: 90%;
  text-align: center;
}
.moreinfo {
  display: inline;
  color: #660066;
  background-color: transparent;
  cursor: pointer;
  border: none;
}

.panel {
  display: none;
  width: 50%; 
  margin: auto;
  padding: 1em;
  background-color: #ffccff;
  border: 1px solid #ff99cc;
  border-radius: 3px;
}

/* Unopened lightbox */
.lightbox {
  display: none;
  position: fixed;
  left: calc(50% - 48vw);
  top: calc(50% - 48vh);    
  width: 96vw;
  height: 96vh;
  border-radius: 5px;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
   box-shadow: 0 2px 4px 8px rgba(0, 0, 0, 0.75), 0 4px 10px 15px rgba(0, 0, 0, 0.65);
  z-index: 1;
  object-fit: contain;
}

/* Opened lightbox */
.lightbox:target {
  display: block;
  object-fit: contain;
}

/* Lightbox content */
.lightbox img {
  margin: auto;
  display: block;
  position: fixed;
  left: 2%;
  top: 2%;
  width: 96%;
  height: 90%;
  border-radius: 5px;
  object-fit: contain;
  animation-name: fade-in;
  animation-duration: 0.5s;
}

@keyframes fade-in {
  from {opacity:0}
  to {opacity:1}
}

/* Close button */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: 2.5vmax;
  top: 2.5vmax;
  width: 2.5vmax;
  height: 2.5vmax;
  font-size: 2.5vmax;
  font-style: bold;
  position: fixed;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 14%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* Next button */
.lightbox .next {
  position: relative;
  display: block;
}

.lightbox .next::after {
  right: 2.5vmax;
  width: 2.5vmax;
  height: 2.5vmax;
  font-size: 2.5vmax;
  font-style: bold;
  top: 50%;
  position: fixed; 
  display: flex; 
  z-index: 1;
  color: white;
  content: ">";
  cursor: pointer; 
}

/* Previous button */
.lightbox .previous {
  position: relative;
  display: block;
}

.lightbox .previous::after {
  left: 2.5vmax;
  width: 2.5vmax;
  height: 2.5vmax;
  font-size: 2.5vmax;
  font-style: bold;
  top: 50%;
  position: fixed; 
  display: flex; 
  z-index: 1;
  color: white;
  content: "<";
  cursor: pointer;
}
}

/*                                COMPUTER SCREENS                   */
@media only screen and (min-width:768px) {
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr 12fr 2fr;
            grid-template-rows: fitcontent(30vh) 5vh 1fr;
            grid-template-areas:
              "header-logo header-titles header-titles header-titles header-search"
              "header-home header-home header-sas header-postnav header-postnav"
              "sidebar sidebar  content    content     content";
        }
       .frontpage-title {
            display: flex;
            justify-content: center;
            grid-column-start: 1; 
            grid-column-end: 5;
        }
       .frontpage-title img {
            width: 60vw;
            margin: 5px;
       }
        .header-logo {
            display: flex;
            grid-area: header-logo;
         }
        .header-titles {
            display: flex;
            grid-area: header-titles;
         }
        .header-titles a {
            font-size: 3rem;
            font-style: italic;
            color: #660066;
            margin: 0.4rem 0.1rem;
        }
        .header-search {
            display: flex;
            justify-content: flex-end;
            margin: 0 1rem;
            grid-area: header-search;
        }
        .header-sas {
            display: flex;
            grid-area: header-sas;
            justify-content: flex-start;    
        }
        .header-home {
            display: flex;
            grid-area: header-home;
            position: sticky;
            top: 0.4rem;                   
            justify-content: flex-start;  
        }
        .sidebar {
            display: flex;
            grid-area: sidebar;
         }
        .header-postnav {
            display: flex;
            grid-area: header-postnav;
            position: sticky;
            top: 0.6rem;                   
            justify-content: flex-end;
            margin: 0 1rem;
        }   
main    {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            grid-area: content;
            margin: 1rem;
            padding: 1rem;         }
article {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
main, article {
      font-size: 1rem;
      line-height: 1.2;      
      }

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

   h1 {
          font-size: 3rem;
          font-style: italic;
          color: #660066;
      }
   h2 {
          font-size: 1.6rem;
      }
   h3 {
          font-size: 1.3rem;
          margin-bottom: 0.3rem;
      }
a, a:link, a:visited {
            text-decoration: none;
            color: #660066;
        }
a:hover, a:focus {
            color:#663399;
        }

   .recentposts{
            width: 100%;
            background: none;
            display: flex;    
            flex-direction: row;
            flex-wrap: wrap;    
            justify-content: space-around;  
   }
   .frontpage-card {
            width: 50%;
            background: none;
   }
   .blogPostPreview {
            display: flex;
            flex-direction: row;
   }
        .blogPostPreviewPic {
            width: 100%;
            height: 35vh;
            padding: 0.3rem 0.8rem;
            order: 1;
        }
        .blogPostPreviewPic img {
           border: .3em solid white;
           object-fit: cover;
           width: 100%;
           height: 35vh;
        }
           .blogPostPreviewTitle {
            padding: 0 1rem;
            margin-top: 1.5rem;
            margin-bottom: 0;
            order: 2;
        }
        .blogPostPreviewText {
            padding: 0 1rem;
            margin-top: 0.5rem;
            order: 3;
        }

        .previewBanner {
            width: 100%;
            background-size: cover;
            min-height: 8rem;
            padding: .4em 10%;
            margin: 0;
            border-radius: 3px;
            font-family: Baskerville, Garamond, Georgia, Serif;
            font-style: italic;
            font-size: 1.7rem;
            color: #660066;
        }
        .homepage-button {
            background-size: cover;
            height: 2rem;
            padding: 0.4em;
            margin-right: 1rem;
            margin-bottom: 0;
            align-self: flex-end;
            border-radius: 4px;
            font-family: Verdana, Arial, sans-serif;
            color: white;
            border: solid 1px #660066;
            float: right;
        }


   .recentposts article {
            width: 30%;       
   }        
   .olderposts article {
           align-items: flex-start;
   }
   .recentposts article img {
           border: .3em solid white;
           width: 100%;
           height: 35vh;
           object-fit: cover;
   }   
   .olderposts {
      display: block;
      background: none;
   }
        .snippetPic {
           width: 10%;
           min-width: 4rem;
           height: 4rem;
           float: left; 
           margin-right: 5px;
        }
        .snippetPic img {
           width: 10%;
           min-width: 4rem;
           height: 4rem;
           border: .1em solid white;  
           object-fit: cover;
        }

   .olderposts article img {
          border: .1em solid white;  
          width: 10%;
          min-width: 3rem;
          height: 3rem;
          object-fit: cover;
          float: left; 
          margin-right: 5px;
    }

     .logo {
            position: relative;
            display: inline-block;
            height: 4.5rem;
            min-width: 1.5em; 
            max-width: 5rem;
            margin: 0.4rem 0.1rem;
     }
     .logo .mauve {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
     }
     .logo:hover .mauve {
           display: inline;
     }

     .go-home {
            position: relative;
            display: inline-block;
            padding: 0.2rem;
            min-width: 1.5rem; 
            max-width: 2.5rem;
            margin-left: 0.4em;
     }
     .go-home .mauve {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            padding: 0.2rem;
            z-index: 99;
     }
     .go-home:hover .mauve {
           display: inline;
     }
     .nav-button {
            height: 100%;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 3px;
            padding: 0.2rem;
            margin-left: 0.4em;
     }
     .portrait {
           float: right; 
           align-self: flex-end;
           width: 30%; 
           min-width: 300px; 
           padding: 0 0 .5rem .5rem;
     }
     .landscape {
           margin: auto;
           width: 80%;
           min-width: 300px;
     }
img.hover-shadow {
     transition: 0.3s;
}

   .hover-shadow:hover {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.45);
   }

#more {display: none;}

figure {
  width: 96vw; 
  height: 92vh;
  object-fit: contain;
}
figcaption {
  position: fixed;
  bottom: 2%;
  padding: 2px;
/*  background-color: black;
  background-color: rgba(0,0,0,0.9);*/  /* Black w/ opacity */
  color: white;
  width: 90%;
  text-align: center;
}
   .moreinfo {
      display: inline;
      color: #660066;
      background-color: transparent;
      cursor: pointer;
      border: none;
   }

   .panel {
      display: none;
      width: 50%; 
      margin: auto;
      padding: 1em;
      background-color: #ffccff;
      border: 1px solid #ff99cc;
      border-radius: 3px;
   }

/* Unopened lightbox */
   .lightbox {
       display: none;
       position: fixed;
       left: calc(50% - 48vw);
       top: calc(50% - 48vh);    
       width: 96vw;
       height: 96vh;
       border-radius: 5px;
       background-color: rgb(0,0,0); /* Fallback color */
       background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
       box-shadow: 0 2px 4px 8px rgba(0, 0, 0, 0.75), 0 4px 10px 15px rgba(0, 0, 0, 0.65);
       z-index: 1;
       object-fit: contain;
   }

/* Opened lightbox */
   .lightbox:target {
       display: block;
       object-fit: contain;
   }

/* Lightbox content */
   .lightbox img {
       margin: auto;
       display: block;
       position: fixed;
       left: 2%;
       top: 2%;
       width: 96%;
       height: 90%;
       border-radius: 5px;
       object-fit: contain;
       animation-name: fade-in;
       animation-duration: 0.5s;
   }

@keyframes fade-in {
  from {opacity:0}
  to {opacity:1}
}

/* Close button */
   .lightbox .close {
       position: relative;
       display: block;
   }

   .lightbox .close::after {
       right: 2.5vmax;
       top: 2.5vmax;
       width: 2.5vmax;
       height: 2.5vmax;
       font-size: 2.5vmax;
       font-style: bold;
       position: fixed;
       display: flex;
       z-index: 1;
       align-items: center;
       justify-content: center;
       background-color: black;
       border-radius: 14%;
       color: white;
       content: "×";
       cursor: pointer;
   }

/* Next button */
   .lightbox .next {
       position: relative;
       display: block;
   }

   .lightbox .next::after {
       right: 2.5vmax;
       width: 2.5vmax;
       height: 2.5vmax;
       font-size: 2.5vmax;
       font-style: bold;
       top: 50%;
       position: fixed; 
       display: flex; 
       z-index: 1;
       color: white;
       content: ">";
       cursor: pointer; 
   }

/* Previous button */
   .lightbox .previous {
       position: relative;
       display: block;
   }

   .lightbox .previous::after {
       left: 2.5vmax;
       width: 2.5vmax;
       height: 2.5vmax;
       font-size: 2.5vmax;
       font-style: bold;
       top: 50%;
       position: fixed; 
       display: flex; 
       z-index: 1;
       color: white;
       content: "<";
       cursor: pointer;
   }

}

/* Maurice's walks */

   .walk-property {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      border: 1px solid black;
      padding: .5em;
   }

   .walk-summary {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-evenly;
      padding: .5em;
   }

 ol.walk-directions > li::marker {
      font-weight: bold;
      font-size: 120%;
   }

   .map-thumb {
      max-width: 20vw;
      border: 2px solid black;
      radius: 2px;
   }
   .map-logo {
      width: 1rem;
   )
.map-caption {
        color: black;
        text-align: right;
        align-self: flex-end;
}