/* new Jan 2026 - to get caveats to work as a mouse hover */

.hide {
  display: none;
}

.myDIV:hover + .hide {
  display: block;
  color: red;


/* still experimental feb 2025 */
/* new button colours ? */

.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 {display: width=100%; height:auto;} */

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

div {
    padding: 10px;
    /*
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  */
  columns: 100px 3;
}


.my-button {
  padding: 10px 20px;
  text-decoration: none;
  background: "#FFF0F0" ;
  text-align: center;
  border-radius: 40%;
}

/* from w3 school
 background-color: #04AA6D     arrr commoent in comment Green 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
*/
/*
was using   background: lightslategrey;  now want off-white 

What are the 13 colors in HTML?
HTML used to recognize 16 color names ("black", "white", "gray", "silver", "maroon", "red", "purple", "fushsia", "green", "lime", "olive", "yellow", "navy", "blue", "teal", and "aqua"), but new browsers can recognize 147 CSS3 color names. a color number, such as "#FF0000", "#FFFFFF" (those are red and white).
*/

.vertical-menu {
  width: 200px; 
}

.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 */
}


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


/* 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) {
  .col {
    display: block;
    width: 100%;
  }
}

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