/* in head need a few bits - how to comments in CSS
  <meta name="viewport" content="width=device-width">
 better separate css2 into at least two bits inc styles.css
   comment markers should work for multi-line - may then appear in element inspector
*/

<?php> echo ("styles.css loaded") </php>

<!-- This goes into our CSS file -->

<style>
#slideshow {
  width: 500px;
  height: 500px;
}
#slideshow img {
  width: 100%;
  height: auto;
}
</style>

div.sticky {
  position: -webkit-sticky;      /* Safari */
  position: sticky;
  top: 0;
}
/* hmm w3 says this hack is on most webpages */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


.flex-container {
  display: flex;
    justify-content: center;
  flex-wrap: wrap;
  gap: 20px 40px;
}

.responsive {width=100%; height:auto;}

.menu {width: 25%; float: left; }

div {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

/* 
e.g.
<a href="http://example.com" class="my-button">I am a button link</a>
*/
.my-button {
/*  display: inline-block; */
  padding: 10px 20px;
  text-decoration: none;
  background: lightslategrey; 
/*   font: inherit;  */
  text-align: center;
  border-radius: 40%;
}


.vertical-menu {
  width: 200px; /* Set a width if you like */
}

.vertical-menu a {
  background-color: #eee; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
  background-color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
  background-color: #04AA6D; /* Add a green color to the "active/current" link */
  color: white;
}
#

<style>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: yellow;
  color: white;
  text-align: center;
}
</style>

<div class="footer">
  <p>Footer</p> <p>&copy; 2024 </p> <img href="my-google-face.jpg" alt="The author" />
</div>


/* put captions on the images         yyyyyyyyyyyyyyyyyyyyy  */
/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* grid view */


/* media  overides should be AFTER early rules */

/* If the browser window is smaller than 600px, make the columns stack on top of each other */
@media only screen and (max-width: 800px) {
/*   .flex-direction: column;  */
  .col {
    display: block;
    width: 100%;
  }
}
/* If the browser window is smaller than 600px, make the columns stack on top of each other ??   */

@media only screen and (max-width: 1000px) {
  .col {
    display: block;
    width: 100%;
  }
}
*/