html {
    background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/archived%20backgrounds/colours/multicolour%20%26%20rainbow/028(1).gif"); 
}

.titlebar {
  background-color: #000080;F#popuF
  color: white;
  padding: 3px 5px;
  font-family: 'MS Sans Serif', Geneva, sans-serif;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
  height: 20px;
  box-sizing: border-box;
}

.popup {
  color: black;
  border-style: solid;
  border-width: 1px;
  border-color: pink hotpink hotpink pink;
  box-shadow: 2px 2px #000;
  background-color: lavender;
  font-family: courier;
  font-size: 15px;
}

.close-button {
  background-color: #ff0000;
  color: white;
  border-style: solid;
  border-width: 1px;
  border-color: #fff #000 #000 #fff;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  font-family: 'MS Sans Serif', Geneva, sans-serif;
  font-size: 11px;
  line-height: 1;
}

.titlebarbutton {
  position: relative;
  top: 0px;
  right: 0px;
}

/* --- MINIMAL GRID STYLING (matches lavender vibe) --- */
body{
  margin: 20px;

  font-family: courier;
  color: #000;
}

.gallery-window{
  max-width: 980px;
  margin: 0 auto;
  border-style: solid;
  border-width: 1px;
  border-color: pink hotpink hotpink pink;
  box-shadow: 2px 2px #000;
  background: lavender;
}

.gallery-inner{
  padding: 12px;
}

h1{
  margin: 0 0 12px 0;
  font-size: 18px;
  text-align: center;
}
#underconstruction {
    color:yellow;  
    text-shadow: 0px 0px 10px black;
    font-size: 50px;
    font-family: comic sans ms;
}

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.thumb{
  background: #f6f1ff;
  border: 1px solid #000;
  padding: 6px;
  cursor: pointer;
}


.thumb img {
  width: 100%;
  height: auto;        /* VERY IMPORTANT */
  display: block;
}


.cap{
  margin-top: 6px;
  font-size: 13px;
}

/* --- OVERLAY --- */
#overlay{
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
}
#overlay.open{ display: block; }

#popupWindow{
  width: min(900px, 92vw);
  max-height: 92vh;     
  overflow: auto;         
}

  html {
    background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/archived%20backgrounds/colours/multicolour%20%26%20rainbow/028(1).gif"); 
}

.titlebar {
  background-color: #000080;
  color: white;
  padding: 3px 5px;
  font-family: 'MS Sans Serif', Geneva, sans-serif;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
  height: 20px;
  box-sizing: border-box;
}

.popup {
  color: black;
  border-style: solid;
  border-width: 1px;
  border-color: pink hotpink hotpink pink;
  box-shadow: 2px 2px #000;
  background-color: lavender;
  font-family: courier;
  font-size: 15px;
}

.close-button {
  background-color: #ff0000;
  color: white;
  border-style: solid;
  border-width: 1px;
  border-color: #fff #000 #000 #fff;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  font-family: 'MS Sans Serif', Geneva, sans-serif;
  font-size: 11px;
  line-height: 1;
}

.titlebarbutton {
  position: relative;
  top: 0px;
  right: 0px;
}

/* --- MINIMAL GRID STYLING (matches lavender vibe) --- */
body{
  margin: 20px;

  font-family: courier;
  color: #000;
}

.gallery-window{
  max-width: 980px;
  margin: 0 auto;
  border-style: solid;
  border-width: 1px;
  border-color: pink hotpink hotpink pink;
  box-shadow: 2px 2px #000;
  background: lavender;
}

.gallery-inner{
  padding: 12px;
}

h1{
  margin: 0 0 12px 0;
  font-size: 18px;
  text-align: center;
}
#underconstruction {
    color:yellow;  
    text-shadow: 0px 0px 10px black;
    font-size: 50px;
    font-family: comic sans ms;
}

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.thumb{
  background: #f6f1ff;
  border: 1px solid #000;
  padding: 6px;
  cursor: pointer;
}


.thumb img {
  width: 100%;
  height: auto;        /* VERY IMPORTANT */
  display: block;
}


.cap{
  margin-top: 6px;
  font-size: 13px;
}

/* --- OVERLAY --- */
#overlay{
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
}
#overlay.open{ display: block; }

#popupWindow{
  width: min(900px, 92vw);
  max-height: 92vh;     
  overflow: auto;         
}

 #popupImg {
   width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 75vh !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}       


#popupBody{ padding: 10px; }
#popupImg{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #000;
  background: #fff;
}
#popupCaption{ margin-top: 8px; }

.banner {
  width: 100%;
  border: 5px hotpink inset; 
}

.banner img {
  width: 100%;
  height: auto;
  display: block;   /* removes tiny white gap */
}

  margin: 0 auto;      
      
}

#popupBody{ padding: 10px; }
#popupImg{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #000;
  background: #fff;
}
#popupCaption{ margin-top: 8px; }

.banner {
  width: 100%;
  border: 5px hotpink inset; 
}

.banner img {
  width: 100%;
  height: auto;
  display: block;   /* removes tiny white gap */
}