/*
The scenery style sheet of the website, made on 16 June 2026
Author: Web site publisher -JFO
Meta data: contains root variables as follows
*/

/*  15.08.2026: Style the list link     */

  .list-link {
	background: var(--gallery-bg);
	color: var(--base-white);
    font-family: Arial, sans-serif;    
    font: bold 16px arial,sans-serif; 
    float: right;                       /* Position this list to the extreme right   */      
    padding-right: 3.5em; 
  }
  
.list-link a {
    color: var(--base-white);
    text-decoration:none;
    background-color: var(--gallery-bg);
}

.list-link a:hover {
        border-bottom: 1px;
        color: var(--orange-color);
        text-decoration:none;
}



/*  15.08.2026: the full image 'popup' for sliders - Re-use the remaining code from #home-gallery below...   */

.slider-container .popup-full-img {
        position: fixed;
        top: 0; left: 0;
        background: rgba(0, 0, 0, 0.9);
        width: 100%;
        height: 100%;
        z-index: 100;                        /* z-index changed from 100 to auto: 22.06.2026, 19:00pm */
        display: none                        /* hide large image until requested by a click */
    }

.slider-container img:hover {                       /* when a visitor hover over an image, it will be slightly bigger */
    scale: 1.10;                                    /* we want to increase the scale by making it 1.05 */
    border: 0.1em solid var(--base-white);          /* Updated: 15-06-2026 - turn each border to white */
    cursor: pointer;
}



/*  23.06.2026: the full image 'popup' the full two image boxes  */

   #home-gallery .popup-full-img {
        position: fixed;
        top: 0; left: 0;
        background: rgba(0, 0, 0, 0.9);
        width: 100%;
        height: 100%;
        z-index: 100;                 /* z-index changed from 100 to auto: 22.06.2026, 19:00pm */
     /*   display: flex;                Test popup before js code, then hide large image until requested by a click */
        display: none;
    }

    /*

    */
    .popup-full-img img {
        position: absolute;
        top: 50%; left: 50%;               /* Centers popup image in the screen */
        transform: translate(-50%, -50%);    
        border: 3px solid var(--base-white);
        border-radius: 5px;
        width: 750px;
        object-fit: cover;
    }

    @media (max-width:768px) {              /* handle smaller devices */
      .popup-full-img img {
      width: 95%;
      }      
    }


    .popup-full-img span {
        position: absolute;
        top: 5%;
        right: 5%;
        font-size: 50px;
        color: var(--base-white);
        cursor: pointer;
        z-index: 100;
    }

    .popup-full-img .closeStyle-s {
       position: absolute;
       top: 4%;
       right: 4.5%;
       font-size: 5%;
       color: var(--base-white);
       display: block;
       z-index: 101;
    }
/*  23.06.2026: End the styles for the full two images    */



/* Define some css variables using the root selector */

:root {
    --base-white: #ffffff;
    --wrapper-bg-color: #8cdd81;
    --black-color: #000000;
    --orange-color: #fe9900;
    --brown-color: rgb(231, 162, 72);
    --gallery-bg: #000;
    --dark-orange: #fe9800f5;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{                                                   /* Apply some page-wide fonts */
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: var(--black-color);                          /* Text color */
}

/* Logo layout starts here */

#logo-header {
    margin: 2em auto;
    width: min(66.5em, 100%);                          /* reduce width by : min(75.5em, 100%) */
    background-color: var(--gallery-bg);

    color: var(--base-white);
    
    /* Restyle header/logo/mission statement 21.06.2026 */
    font: 0.8em/normal Arial, Helvetica, sans-serif;
    font-size:large;
    font-weight:bolder; 

    /* Reduce or increase first padding parameter from 2em to 1.5em or vice-versa when necessary 21.06.2026 */
    padding: min(1.5em, 15%);
    border-radius: 1em;
}


body{
    padding: 1em;                                       /* spacing around the page */
    background-color: var(--base-white);
}


nav{
    margin: 1.5em auto 0.3em auto;                      /* top right bottom left | adjust height and width of menu grid */
    width: min(1000px, 100%);                           /* nav bar grow but not over 100 percent */
    height: auto;                                       /* Updated: 15062026 - for height */

    /* Following inclusion into logo-header, retain menu styles for original menu options, 05.07.2026 */
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;    
    font-size:medium;
    font-weight:lighter;  
}

nav ul{
    display: flex;                                      /* turn the list into a horizontal role */
    align-items: center;
    list-style-type: none;                              /* remove the default bullet point  */
    gap: 2em;
}

nav li:first-child{                                     /* push first link of the menu to the left */
    margin-right: auto;                                 /* push all the other items to the right */
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /* font-weight: lighter; */
}

nav a {
    text-decoration: none;                             /* remove the default underline - Oct2026 - */ 
    border: 1px dashed var(--orange-color);              /* Updated 15062026 - styling the menu button */
    background-color: var(--black-color);
    color: var(--base-white);
    padding: 5px 15px 5px 15px;                        /* NOTE: fix responsive menu overflow */

    border-radius: 0.4em;
}

nav a:hover {                                          /* Old menu highlight - return commenter - show that the link is clickable on hover */
  /* text-decoration: underline; */
  background-color: var(--orange-color);
} 


/* 21092026: prevent draggingglobally for all images or users selecting the image text    */
img {
     user-select: none;                                   /*  20.06.2026 - Disables text highlighting */
     -user-select: none;                                  /*  20.06.2026 - Disables text highlighting */
     -webkit-user-select: none;                           /*  Safari */
     -ms-user-select: none;                               /*   IE/Edge */

    /* 21092026: added to above */
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    /* pointer-events: none;                                  Prevents dragging the image to the desktop */
}


/*header,*/

section {                                      /* format the header with spacing, etc. */
    margin: 2em auto;
    width: min(75em, 100%);
    background-color: var(--gallery-bg);
    padding: min(2em, 15%);
    border-radius: 1em;
}

/* Video Styles: Added on 27 Aug 2026 */
main {                                      /* format the header with spacing, etc. */
    margin: 2em auto;
    width: min(75em, 100%);
    background-color: var(--gallery-bg);
    padding: min(2em, 15%);
    border-radius: 1em;
}

h1, h2 {                                                   /* Apply some page-wide fonts */
    font-family:Arial, Helvetica, sans-serif;
    color: var(--base-white);                          /* Text color */
    text-align: center;
}

/* text decoration modified, removing text underline - 27.08.2026 */
main a {
    color: var(--orange-color);
    text-decoration:none;
    background-color: var(--gallery-bg);
  

/* Restyle contact to match video sponsorship & Ads  */
    font-size:large;
    font-weight:bolder;
}

main a:hover {
        border-bottom: 1px;
        color: var(--base-white);
        text-decoration:underline;
}

/* End video styles */




/* Style contact Form 09/09/2026 */

#emailForm {

    margin-left: 10em;  /* Breathing space for the form elements */

}


/*  @media rules for smaller screens - 640px or smaller   */

@media(max-width: 640px) {
    
  #emailForm {

    margin: 0;
    padding: 0;

   /* margin-top: 0.1em;                              Breathing room between img and caption */
  }

}


label {                                             /* Apply some label styles */
    font-family:Arial, Helvetica, sans-serif;
    color: var(--base-white);                       /* Text color */
    /* text-align: center; */
    display: flex;
    margin-bottom: 8px;                             /* Adds space between the label and the text box */
}


 .text-label {
  width: 120px;               /* Fixed width keeps labels uniform */
  font-weight: bold; 

  margin-top: 6px;

  padding-bottom: 8px;           /* Optional: Vertically nudges label text to align nicely */
}


/* Style radio buttons specifically */

 .radio-group-label {
  width: 120px;               /* Fixed width keeps labels uniform */
  font-weight: bold; 

  margin-top: 30px;

  padding-top: 6px;           /* Optional: Vertically nudges label text to align nicely */
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #555;
  border-radius: 50%;
  outline: none;
  margin: 0;
  transition: 0.2s ease-in-out;
  cursor: pointer;
  position: relative;
}

/* Style the inner dot when checked */
input[type="radio"]:checked {
  border-color: #0066cc;
  background-color: #0066cc;
  box-shadow: inset 0 0 0 3px #fff;
}

/* Focus state for accessibility */
input[type="radio"]:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}


/* Style the text area specifically */
.form-group-inline {
  display: flex;
  align-items: flex-start;   /* Crucial: Aligns the label to the top edge of the textarea */
  flex-direction: column;    /* Stack children vertically */
  gap: 14px;                 /* Spaces out the label and textarea */
}

.form-group-inline label {
  width: 120px;               /* Fixed width keeps labels uniform */
  font-weight: bold; 

  margin-top: 30px;

  padding-top: 6px;           /* Optional: Vertically nudges label text to align nicely */
}



/* Change the basic color of the submit button */
#submitBtn {

    margin-bottom: 3em;

	background: var(--dark-orange);
	color: var(--base-white);
	border-style: outset;
	border-color: var(--base-white);
	height: 40px;
	width: 85px;
	font: bold 15px arial,sans-serif;
	text-shadow: none;
}

/* Change the color of the submit button when hovered - OPTIONAL ALTERNATIVE - */
#submitBtn:hover {
	background: #ff7c14;
	color: #fff;
	border: 1px solid #eee;
	box-shadow: 4px 4px 4px #eee;
	text-shadow: none;
    cursor: pointer;
}

/* Add a Pulse or Glow on hover */
#submitBtn:hover {
  box-shadow: 0 0 15px rgba(1,106,188,0.6);
  cursor: pointer;
}
/* Add an emoji next to the submit button text */
#submitBtn::after {
 content: " 🚀"; 
}


/* Style Office Adress/status message - Note: Alert box status messaging used for status via API gateway!! */
#statusMessage::after {
    content: "Studio: The Atrium, 36 Teeswater, Mangold Way, Erith, DA18 4DG, UK";
    margin: 4em 0 4em 2em;
    padding: 0.5em;
	background: var(--gallery-bg);
	color: var(--base-white);
	border-style:dotted;
	border-color: var(--base-white);
	height: 60px;
	width: 390px; 
   	font: normal 12px arial,sans-serif; 

}



/* Messaging @media rules for smaller screens - 640px or smaller   */

@media(max-width: 640px) {
    
  .status-header {
	background: var(--gallery-bg);
	color: var(--base-white);
    font-family: Arial, sans-serif;    
    font: bold 16px arial,sans-serif; 
  }
  
}


@media(max-width: 640px) {
    
  #statusMessage::after {

    content: "The Atrium, 36 Teeswater, Mangold Wy, DA18 4DG, UK";
    margin: 0;
    margin-top: 0.5em;
    padding: 0;
    background: var(--gallery-bg);
	color: var(--base-white);
	border-style:dotted;
	border-color: var(--base-white);
	height: 60px;
	width: 390px; 
   	font: normal 11px arial,sans-serif; 

   /* margin-top: 0.1em;                              Breathing room between img and caption */
  }
  
}





/* End contact form style */



/*  Style the slider 05.07.2026  */

 .slider-container {         /* 'article' class '.slider-container' applied thus formating the header with spacing, etc. */
    margin: 1.5em auto;
    width: min(75em, 100%); 
    height: 14em;            /* Controls the height of the slider wrapper, so to say */
    background-color: var(--gallery-bg);
    
 /* Oct26 padding: min(0.5em, 15%); 

    padding: 1.3em 1.3em 0%; */

    border-radius: 1em; 
} 

.slider-container{
    position: relative;

    /* width: 60%; height: 40rem; */
    /* margin: 2em auto; width: min(75em, 100%); */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

/* style the slider div that holds all the slides and control its operation */
.slider {
    position:relative;
   /*  width: 400%; height: auto;               set to 400 per cent because we have five slides 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; */
   /* animation: 20s cubic-bezier(1, 0.95, 0.565, 1) slider infinite; */
   /*  animation: 10s step-start infinite;      use 'step-start' to still the slide, instead of 'slider' in keyframes that moves it */
    
   /* alternative height to .slider-container */
   /* overflow: hidden; */
}

/* style the image tag, the image fill the entire slide ensuring it covers the entire dimensions */
/* Custom 1: ensure the image scales properly */
.slider-container .slider .slideclass img { 
    width: 100%;
    height: auto; 
    display: block;

/*  Oct26  background-color: var(--base-white);   Change background colour to white to show gabs between images on black background */

    object-fit: cover;                  /* keeps aspect ratio and crops the image to the box proportionally instead of stretching */
    filter: contrast(100%);             /* make contrast 100 per cent */
 
}

/* Oct26 apply padding to banner/slider imgages 8.07.2026 */

.slideclass1 img {
    /* border-color: var(--base-white); */
    padding-left: 0.1em; 
    padding-right: 0.1em;
}


/* style the caption */
.slider-s .caption {
    position: absolute;
    left: 0;
    bottom: 5%;
    font-size: 2rem;
    font-weight: 100;
    color: var(--base-white);
    text-transform: capitalize;
    background:rgba(0, 0, 0, 0.348);
    backdrop-filter: blur(10px);
    padding: 1rem 5rem;
    border-radius: 0 2rem 2rem 0;
}


/* Do animation effects 
@keyframes slider {
    0% {left: 0;}

    20% {left: 0;}

    25% {left: -100%;}

    35% {left: -100%;}

    40% {left: -120%;}

    55% {left: -155%;}
}
*/

/* Start CSS grid framework for the photo-image gallery */

section#home-gallery {
    background-color: var(--gallery-bg);      /* dark green as in wrapper */
}
   

.grid-container {

    margin-top: 1em;                                /* give the gallery some breathing space */
    margin-bottom: 1em;
    display: grid;                                  /* turn this container into a CSS layout */
    width: 100%;                                    /* strecth the full width of the section */
    grid-template-columns: repeat(6);               /* we want to have 3 columns or 6 fractions */
    grid-template-rows: 1fr 1fr;                    /* we want to have two rows of one fraction */ 
    grid-template-areas:                            /* arrange the grid in order of 3 columns on the web as defined in img tags using strings to hold the identifiers */
    "img-1 img-2 img-3"                             /* image 2 two rows and six columns - left to right */
    "img-4 img-5 img-6";                            /* using the grid area names, we can rearragne the each grid/image to our liking */

    gap: 2em;

    /* Update: 15-06-2026 - grid-container background -
    background-color: var(--brown-color);
    border: 1px solid var(--brown-color);
    padding: 1em;   
    border-radius: .5em; */
}



/* 25-06-2026: Generate caption content for each image    */


/* - - - - - - - - -  Start captioning Scenery images - - - - Fig. 1: - - - - - - -  */
.grid-container .img-1::after
{
    margin: 2px;
    padding: 1px;
    content:"Old Monastery";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly -- Fig. 2: -- */
.img-1 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}

/* style the 4th img container */
.grid-container .img-2::after
{
    margin: 2px;
    padding: 1px;
    content:"Performing Art";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
    .img-2 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* style the 5th img container -- Fig. 3: --*/
.grid-container .img-3::after
{
    margin: 2px;
    padding: 1px;
    content:" Egg Sculpture";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
    .img-3 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* style the 6th img container -- Fig. 4: --*/
.grid-container .img-4::after
{
    margin: 2px;
    padding: 1px;
    content:"Partial Eclipse!";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
    .img-4 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* style the 1st img container -- Fig. 5:  -- */
.grid-container .img-5::after
{
    margin: 2px;
    padding: 1px;
    content:"Sunrise Decor";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly. */
.img-5 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* style the 2nd img container -- Fig. 6: -- */
.grid-container .img-6::after
{
    margin: 2px;
    padding: 1px;
    content:"Abstract Sunrise";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
.img-6 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}

/* - - - - - - - - -  End captioning Scenery images - - - - - - - - - - -  */


/* Start the Greenery captions  */

/* style the 1st img container - Fig. 7:  - */
.grid-container .img-7::after
{
    margin: 2px;
    padding: 1px;
    content:"Flowery";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly Fig. 2: A blue tit bird looking north of the tree branch. */
.img-7 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* style the 2nd img container - Fig. 8: - */
.grid-container .img-8::after
{
    margin: 2px;
    padding: 1px;
    content:"Pollinators";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
.img-8 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}

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


/* style the 3rd img container - Fig. 9:  -*/

.grid-container .img-9::after
{
    margin: 2px;
    padding: 1px;
    content:"Greenery";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
.img-9 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}

/* style the 4th img container - Fig. 10: -*/
.grid-container .img-10::after
{
    margin: 2px;
    padding: 1px;
    content:"Moonshine";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
    .img-10 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* Style the Scenery caption  */

/* style the 5th img container - Fig. 11: -*/
.grid-container .img-11::after
{
    margin: 2px;
    padding: 1px;
    content:"Lemony Lace";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
    .img-11 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* style the 6th img container - Fig. 12: - */
.grid-container .img-12::after
{
    margin: 2px;
    padding: 1px;
    content:"Decorative Art";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
    .img-12 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}

/*  End generate Greenery caption content for each image - */



/* Style the Animal caption  */

/* style the 1st img container - Fig. 13: - */
.grid-container .img-13::after
{
    margin: 2px;
    padding: 1px;
    content:"Blue Tit";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly Fig. 2: Looking north of the tree. */
.img-13 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* style the 2nd img container - Fig. 14: - */
.grid-container .img-14::after
{
    margin: 2px;
    padding: 1px;
    content:"Gazing West";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
.img-14 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* style the 3rd img container */
.grid-container .img-15::after
{
    margin: 2px;
    padding: 1px;
    content:"Gazing North";
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
.img-15 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}

/* style the 4th img container - Fig. 16: - */
.grid-container .img-16::after
{
    margin: 2px;
    padding: 1px;
    
    content:"Squirrel Couple";
    
    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
    .img-16 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* style the 5th img container - Fig. 17:  -*/
.grid-container .img-17::after
{
    margin: 2px;
    padding: 1px;

    /* content:"Dog-walking step 1 of 2."; */
    
    content:"Female Squirrel";

    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
    .img-17 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}


/* style the 6th img container - Fig. 18:  - */
.grid-container .img-18::after
{
    margin: 2px;
    padding: 1px;

    /* content:"Dog-walking step 2. Dog secured."; */

    content:"Pot Occupant";

    color:var(--base-white);
    font-size: 0.9em;
    width: max-content;
    position: absolute;
    display: inline-block;                          /* keeps container tight around the image */
    overflow: hidden;                               /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
    .img-18 img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}

/*  End generate Animal caption content for each image - */



 /* controls the appearance of the photos - style the images now */
.grid-container img {                              
    height: 100%;                                   /* fill out entire grid areas */
    width: 100%;
    border-radius: .5em;
    transition: 100ms ease;                         /* transition for a visual appeal and effect */

    border: 0.3em solid var(--base-white);          /* Updated: 15-06-2026 - turn each border to white */
    filter: contrast(100%);                         /* make contrast 100 per cent */
}

.grid-container img:hover {                         /* when a visitor hover over an image, it will be slightly bigger */
    scale: 1.10;                                    /* we want to increase the scale by making it 1.05 */

    border: 0.1em solid var(--base-white);          /* Updated: 15-06-2026 - turn each border to white */
    cursor: pointer;
}


/* apply this @ media rules when screen is 988px or smaller - note, probably not use now, except the below media query! - */
/* @media(max-width: 988px){
    header {
        text-align: center;
    }

    header .text-container {
    padding-top: 0;
    }
}
*/


/*  Apply this @ media rules when screen is 640px or smaller, hide logo slogan and all nav links with display property */
@media(max-width: 640px){
  .slogan {
    overflow-wrap: break-word;

    word-break: break-all;

    font-size:smaller;
   
    top:0;
    left:0;
    width:100%;
  }

  .slogan .list-link {  /* 25092026: Revisit...  */

    margin-top: 0.5em; 

    padding-top: 0.5em;
    padding-bottom: 0.5em;

    color: var(--orange-color) !important; 

    font: normal 13px arial,sans-serif;         /*  size was 14px */

    font-weight: bold;

    float: left;                     /*  Position this list to the extreme right   */          

  }


    nav li {
       display: none;
    } 

/* Display only logo, part slogan or first and last child links for mobile device users */
    nav li:first-child, nav li:last-child {

    /* margin:auto;

    padding: auto;
 
    float: left; */

    display: block;
 } 

} /* close media query */


/* The footer content syles as follows  */
.footers {
    margin: 1em auto;
    width: min(75em, 100%);
    background-color: var(--black-color);
    padding: min(1em, 15%);
    border-radius: 1em;
    color: var(--base-white);
}

.footers p {

   font: 0.8em/normal Arial, Helvetica, sans-serif;
}

/* text decoration modified, removing text underline - 21.06.2026 */
.footers a {
    color: var(--base-white);
    text-decoration:none;
    background-color: var(--gallery-bg);
  

/* Restyle contact to match X  */
    font-size:large; 
   /* font-weight:bolder; -- disabled on 22092026 while updating author -- */

    text-align: justify;
}


.footers a:hover {
        border-bottom: 1px;
        color: var(--orange-color);
        text-decoration: none;
}

.footers img {
    position: absolute;
}