<style> :root {
--header-height: 64px;
--footer-height: 56px;
--bg-offset: 0px;
/* updated by JS for parallax */
--accent: 255, 255, 255;
}

/* Page reset */
* {
box-sizing: border-box
}

/* Dave adding stuff to control the margins of paragraphs etc */
/* Global reset & rhythm */
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0;
/* prevent double-stacking */
}

/* Vertical rhythm scale */
h1 {
margin-left: 0;
margin-bottom: 0.5rem;
}

/* ~32px */
h2 {
margin-left: 0;
margin-bottom: 0.5rem;
}

/* ~24px */
h3 {
margin-left: 0;
margin-bottom: 0.5rem;
}

/* ~20px */
h4 {
margin-left: 0;
margin-bottom: 0.5rem;
}

/* ~16px */
h5 {
margin-left: 0;
margin-bottom: 0.5rem;
}

/* ~12px */
h6 {
margin-left: 0;
margin-bottom: 0.5rem;
}

/* ~8px */
p {
line-height: 1;
margin-bottom: 1rem;
}

.vertCenterAlign {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  /* border: 1px solid black; */
}

.parCenter {
  font-size: 30px;
}

/* done */

html,
body {
height: 100%;
margin: 0;
font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial
}

a:link {
color: #CCC;
}

a:visited {
color: #CCC;
}

a:hover {
color: #999;
}

.centerHeading {
text-align:center;
min-width: 100%;
}

/* The full-window background photo. We'll slide it using translateY parallax. */
.bg-photo {
position: fixed;
inset: 0;
z-index: -2;
overflow: hidden;
pointer-events: none;
display: flex;
align-items: flex-start;
justify-content: center;
}

/* first one for parallax, but shows gap at bottom for small screens */
/* .bg-photo img {
width: 100%;
height: 120vh;
object-fit: cover;
transform: translateY(var(--bg-offset));
transition: transform 0.1s linear;
will-change: transform;
filter: saturate(0.95) contrast(0.9) brightness(0.95);
} */

/* another revision to hopefully ensure no gaps */
.bg-photo img {
  width: 100%;
  min-height: calc(100vh + 150px);   /* always covers viewport */
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(var(--bg-offset));
}


/* Soft overlay so foreground is readable */
.bg-overlay {
position: fixed;
inset: 0;
background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.28));
z-index: -1;
pointer-events: none
}

/* Fixed header */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
/* backdrop-filter: blur(6px) saturate(120%); */
backdrop-filter: blur(6px) saturate(60%);
background: linear-gradient(180deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6));
color: white;
z-index: 40;
/* border-bottom: 1px solid rgba(255, 255, 255, 1); */
}

.brand {
font-weight: 600;
letter-spacing: 0.2px
}

nav {
display: flex;
gap: 8px;
align-items: center
}

/* Dropdown / popup menu */
.menu {
position: relative
}

.menu>button {
background: none;
border: 0;
color: inherit;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
font-size: 15px
}

.menu>button:focus {
outline: 2px solid rgba(255, 255, 255, 0.12)
}

.dropdown {
position: absolute;
top: calc(var(--header-height) + 2px);
left: 0;
min-width: 200px;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
background: rgba(18, 18, 18, 0.95);
backdrop-filter: blur(6px);
color: #fff;
padding: 5px;
display: none;
}

.dropdown.show {
display: block
}

.dropdown a {
display: block;
padding: 10px;
border-radius: 6px;
text-decoration: none;
color: inherit
}

.dropdown a:hover {
background: rgba(255, 255, 255, 0.04)
}

/* The main scroller sits below header and above footer */
main {
position: relative;
z-index: 10;
padding-top: calc(var(--header-height) + 20px);
padding-bottom: calc(var(--footer-height) + 40px);
max-width: 1200px;
margin: 0 auto;
}

/* Section style: each section uses a translucent card that can hold columned content */
.section {
margin: 20px 20px;
margin-top: 50px;padding: 28px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(125, 125, 125, 0.3));
/* background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); */
box-shadow: 0 8px 30px rgba(3, 6, 12, 0.45);
color: #f7fbff;
border: 1px solid rgba(255, 255, 255, 0.04);
/* make sections slightly translucent and allow inner scrolling if content tall */
backdrop-filter: blur(8px);
}

/* Section style: each section uses a translucent card that can hold columned content */
.sectionSkinny {
margin: 20px 20px;
padding: 0px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
box-shadow: 0 8px 30px rgba(3, 6, 12, 0.45);
color: #f7fbff;
border: 1px solid rgba(255, 255, 255, 0.04);
/* make sections slightly translucent and allow inner scrolling if content tall */
backdrop-filter: blur(8px);
}

/* Section style: each section uses a translucent card that can hold columned content */
.code {
font-family: "Fira Code", monospace;
/* A common monospaced font */
font-size: 0.75em;
color: #CCC;
background-color: #333;
padding: 10px;
border: 1px solid #222;
border-radius: px;
line-height: 1.2;
/* turning off wrapping in cell */
white-space: nowrap;
margin: 0px;
padding: 10px;
border-radius: 10px;
break-inside: avoid-column;
}

/* Columned content inside a section. Responsive using column-count */
.cols {
column-gap: 32px;
column-fill: auto;
}

/* default two columns on medium screens */
@media(min-width:860px) {
.cols {
column-count: 2
}
}

@media(min-width:1200px) {
.cols {
column-count: 3
}
}

/* Style paragraphs to avoid breaking awkwardly in columns */
.cols p {
break-inside: avoid;
widows: 2;
orphans: 2;
line-height: 1.6
}

/* Dave adding stuff foro the table of boxes */
.drTableContainer {
/* Treat the main container as a table */
display: table;
table-layout: flex;
/* width: 100%; */
/* Add a border to create the "box" effect */
/* turning off the border */
/* border: 1px solid #ccc; */
/* Collapse borders for a cleaner look */
/* border-collapse: collapse; */
}

.drTableTitle {
/* Treat each row div as a table row */
display: table-row;
width: 100%;
text-align: center;
/* vertical-align:-webkit-baseline-middle; */
padding: 5px;
/* background-color: #888; */
/* border-radius: 5px; */
}

.drTableRow {
/* Treat each row div as a table row */
/* display: table-row; */
/* width: max-content; */
/* align-items: center; */
text-align: center;
/* using FlexBox */   
display: flex;
flex-wrap: wrap; /* allows items to wrap to the next line */
/* display: grid; */
}

.drTableCell {
/* Treat each cell div as a table cell */
display: table-cell;
/* flex-wrap: wrap; /* allows items to wrap to the next line */
/* white-space: nowrap; */
/* Add a border to create the "box" effect */
/* turning off the border */
/* border: 1px solid #ccc; */
/* Add padding inside the cells */
padding: 5px;
/* alignment within the cell */
text-align: left;
/* flex for no grow, no shrink, base width of 50% */
/* flex: 0 0 50%; */
}

/* mobile width support */
@media (max-width: 640) {
.drTableRow {
/* Treat each row div as a table row .. trying flex and block on mobile */
display: flex;
/* width: max-content; */
align-items: center;
/* text-align: justify; */
/* using FlexBox */   
flex-wrap: wrap; /* allows items to wrap to the next line */
flex-direction: column; /* Stack columns vertically on mobile */
}

.code {
  white-space: nowrap;
}
}

/* Grid Rough Draft .. these are unused */
.grid-container {
display: grid;
/* Defines 3 columns with specific widths */
grid-template-columns: 100px 200px 1fr; /* 100px, 200px, and the remaining space */
gap: 10px; /* Optional: adds space between grid items */
}

.grid-item {
border: 1px solid #ccc;
padding: 10px;
/* Add other styling for your "boxes" */
}
/* end Grid */


.header-row .table-cell {
font-weight: bold;
/* background-color: #f2f2f2; */
}

.logoSquare {
  width: 50px;
  height: 50px;
  background-image: url('images/WINTRLogo2_250.png');
  background-size: contain;
}
/* end of Dave's stuff */

/* Fixed footer */
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: var(--footer-height);
display: flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
backdrop-filter: blur(6px);
background: linear-gradient(0deg, rgba(8, 8, 8, 0.5), rgba(8, 8, 8, 0.25));
color: #fff;
z-index: 40;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* A small spacer so content doesn't get hidden behind header/footer when printed etc */
.spacer {
height: 20px
}


/* A small spacer so content doesn't get hidden behind header/footer when printed etc */
.bottomSpacer {
height: 40px;
padding-bottom: calc(var(--footer-height) + 40px);
}


/* A small spacer so content doesn't get hidden behind header/footer when printed etc */
.buffer {
padding: 5px;
}

/* Simple section markers to show different scroll zones */
.topSection {
min-height: 20vh;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 40px;
margin-top: 100px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(125, 125, 125, 0.5));
}

.following {
min-height: 20vh;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 40px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(125, 125, 125, 0.5));
}

.codeholder {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(125, 125, 125, 0.5));
}

.henchman {
display: flex;
align-items: center;
text-align:justify;
justify-content: flex-start;
background: linear-gradient(180deg, rgba(125, 125, 125, 0.3), rgba(255, 255, 255, 0.3));
border-radius: 10px;
}

/* Utility for center text */
.center {
display: flex;
flex-direction: column;
/* gap: 12px */
/* gap: 2px; */
/* max-width: 760px */
}

/* Small responsive tweaks */
@media(max-width:700px) {
header {
padding: 0 12px
}

.dropdown {
min-width: 150px
}
}

</style>