.win98popup {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  font-family: "Microsoft Sans Serif", sans-serif;
  background: #c2c6ca;
  font-size: 12px;
  -webkit-font-smoothing: none;
  width: 265px;
  height: 118px;
  box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px #C2C6CA, inset -1px -1px #85898d, inset 2px 2px white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* Ensures it sits on top of your background and text */
}
.win98popup button {
  background: #c2c6ca;
  border: none;
  padding: 0;
  border-radius: 0;
  outline: none;
}
.win98popup .shadow {
  box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px white, inset -1px -1px #85898d;
}


.win98popup .bar {
  display: flex;
  flex-flow: row nowrap;
  font-weight: bold;
  justify-content: space-between;
  
  /* --- BULLETPROOF WINDOWS 98 FIX --- */
  align-self: stretch;       /* Stops Flexbox from shrinking the bar in the 2nd file */
  box-sizing: border-box;    /* Ensures margins don't break container layout bounds */
  width: auto;               /* Allows the bar to expand naturally up to its margins */
  margin: 3px 3px 1px 3px;   /* Exact 3px padding on left/right to let base shadows pop out */
  
  height: 18px;
  color: white;
  background: #957DDE;
  padding: 2px 3px 3px;
}


.win98popup .bar p {
  margin: 0;
}
.win98popup .bar button {
  width: 15px;
  height: 13px;
}
.win98popup .bar button:active {
  box-shadow: 0.5px 0.5px 0 0.5px white, inset 1px 1px black, inset -1px -1px #c2c6ca, inset 2px 2px #85898d;
}
.win98popup .bar button:active svg {
  transform: translateX(1px) translateY(1px);
}
.win98popup .bar button svg {
  margin: 3px 3px 3px 4px;
}
.win98popup .buttons {
  display: flex;
  flex-flow: row nowrap;
  margin: 1px 15px 14px 14px;
}
.win98popup .buttons button {
  width: 74px;
  height: 22px;
  display: grid;
}
.win98popup .buttons button:not(:last-child) {
  margin-right: 7px;
}
.win98popup .buttons button p {
  font-size: 12px;
  margin: auto;
}
.win98popup .buttons button img {
  margin: 4px 3px 3px 4px;
  display: none;
}
.win98popup .buttons button p, .win98popup .buttons button img {
  grid-column: 1;
  grid-row: 1;
}
.win98popup .buttons button:focus {
  outline: none;
  box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px black, inset -1px -1px black, inset 2px 2px white, inset -2px -2px #85898d;
}
.win98popup .buttons button:focus img {
  display: block;
}
.win98popup .buttons button:active {
  box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px black, inset -1px -1px #85898d, inset 2px 2px #85898d;
  outline: none;
}
.win98popup .buttons button:active p, .win98popup .buttons button:active img {
  transform: translateX(1px) translateY(1px);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url("background.svg");
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-left: 40px;
}

h1 {
  font-family: "Courier New", Courier, monospace;
  color: white;
  justify-content: left;
  text-align: left;
  line-height: 2;
  -webkit-text-stroke: 1px black;
  display: flex;
  flex-direction: column;
}

.detailtext {
  font-family: "Courier New", Courier, monospace;
  color: white;
  font-size: 20px;
  text-align: left;
  margin-left: 10px;
  -webkit-text-stroke: 0.25px black;
  font-weight: bold;
} 



/* Parent container to split them left and right */
.list-container {
  display: flex;
  justify-content: flex-start; /* Spreads the two lists apart */
  gap: 30px;                      /* Adds clean spacing between the columns */
  /*width: 100%;                    /* Keeps it responsive */
  padding-left: 50px;
}

.listleft, .listright {
  font-family: "Courier New", Courier, monospace;
  color: white;
  font-size: 20px;
  text-align: left;
  -webkit-text-stroke: 0.25px black;
  font-weight: bold; 
}

/* .listleft {
  margin-left: 20px;
} */

.listright {
  /* Changed from row to block/normal to respect the <br> tags properly */
  display: block; 
}

.hanging-indent {
  display: inline-block;
  padding-left: 2.5rem;    /* Shifts the entire block to the right */
  text-indent: -2.5rem;   /* Pulls ONLY the first line (the number) back to the left */
  vertical-align: top;
}

.step-indent {
  display: inline-block;
  padding-left: 5rem;   /* Shifts the entire block right to clear "Step X. " */
  text-indent: -5rem;   /* Pulls the first line back left by the exact same amount */
  vertical-align: top;
  width: 100%;            /* Ensures it handles the full paragraph layout correctly */
  box-sizing: border-box;
}


/* why rts drop down sections */
.subsection {
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* Top divider line like Wiki */
  width: 100%;
  max-width: 800px;
}

/* Ensure the last section gets a bottom border to seal the box layout */
.subsection:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* This styles the clickable header row */
.subsection summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 10px;
  cursor: pointer;
  list-style: none; /* Removes default HTML arrow icon */
    position: relative;   /* add this to your existing summary rule */
}

/* Hides default browser arrow layout in Webkit/Safari */
.subsection summary::-webkit-details-marker {
  display: none;
}

/* Custom retro arrow indicator using standard text */
/* .subsection summary::after {
  content: "▶"; 
  color: #957DDE;
  font-size: 16px;
  -webkit-text-stroke: 0.5px black;
  transition: transform 0.2s ease;
}

/* Rotates the arrow downwards exactly when the section is clicked/open */
/* .subsection[open] summary::after {
  transform: rotate(90deg);
  color: #fff;
} */

/* the Win98 button */
.subsection summary::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background-color: #c2c6ca;
  /* right-pointing triangle: two half-triangles that meet in the middle */
  background-image:
    linear-gradient(to top right, #957DDE 50%, transparent 50%),
    linear-gradient(to bottom right, #957DDE 50%, transparent 50%);
  background-size: 8px 6px, 8px 6px;
  background-position: 10px 8px, 10px 14px;
  background-repeat: no-repeat;
  box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px white, inset -1px -1px #85898d;
}

/* open: down-pointing triangle, button stays raised */
.subsection[open] summary::after {
  background-image:
    linear-gradient(to bottom left, #957DDE 50%, transparent 50%),
    linear-gradient(to bottom right, #957DDE 50%, transparent 50%);
  background-size: 6px 8px, 6px 8px;
  background-position: 8px 10px, 14px 10px;
}

/* pressed while the mouse is down: button pushes in, arrow shifts 1px */
.subsection summary:active::after {
  box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px black, inset -1px -1px #85898d, inset 2px 2px #85898d;
  background-position: 11px 9px, 11px 15px;
}
.subsection[open] summary:active::after {
  background-position: 9px 11px, 15px 11px;
}

/* Style the text header inside the summary */
.subsection h2 {
  margin: 0;
  font-size: 24px;
  font-family: "Courier New", Courier, monospace;
  color: white;
  -webkit-text-stroke: 0.5px black;
}

/* Styling for the content hidden inside the division */
.section-content {
  padding: 10px 10px 25px 25px; /* Adds nice left indent when open */
  background: rgba(0, 0, 0, 0.15); /* Light backdrop tint for contrast */
}

.section-content p {
  margin: 0;
  color: #fff;
}

/* 3 bar burger menu */
/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit; /* Change Arial to inherit */
}


/* Navbar Container - Standard Flow Asset */
.navbar {
    width: 100% !important;  
    max-width: none !important; /* FORCES it to ignore any 800px width caps */
    box-sizing: border-box;     /* Makes sure padding doesn't cause horizontal scrolling */
    background-color: transparent; 
    color: #957DDE;
    padding: 30px 40px 10px;      
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    position: relative;
}




/* Hamburger Menu Icon (The 3 Bars) */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 45px;
    height: 33px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    height: 5px;
    width: 100%;
    background-color: #957DDE;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Hidden Checkbox Hack to manage toggle state without JS */
#menu-checkbox {
    display: none;
}

/* Dropdown Navigation Menu Links */
.nav-links {
    list-style: none;
    position: absolute;
    top: 100%;              /* Positions right beneath the baseline layout level */
    right: 0;               /* Ensures the container flushes completely right */
    left: auto;             /* Overrides previous full-width scaling defaults */
    width: 200px;           /* Clean desktop and mobile safe utility dimension */
    background-color: #363636;
    display: none;          /* Hidden by default */
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    z-index: 1100;          /* Renders cleanly above normal viewport levels */
}

.nav-links li a {
    display: block;
    padding: 15px 25px;
    color: #fff;
    font-family:"Courier New", Courier, monospace!important;
    font-size: 20px;
    -webkit-text-stroke: 0.25px black;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #363636;
    transition: background-color 0.2s;
}



.nav-links li a:hover {
    background-color: #555;
}

/* CSS Logic: When the checkbox is checked, display the menu */
#menu-checkbox:checked ~ .nav-links {
    display: flex;
}

/* Optional: Animates the 3 bars into an 'X' close button when active */
#menu-checkbox:checked ~ .menu-toggle span:nth-child(1) {
    transform: translateY(14px) rotate(45deg);
}
#menu-checkbox:checked ~ .menu-toggle span:nth-child(2) {
    opacity: 0;
}
#menu-checkbox:checked ~ .menu-toggle span:nth-child(3) {
    transform: translateY(-14px) rotate(-45deg);
}


.main-content {
    width: 100%;
    max-width: 800px;        
    padding-left: 40px;      
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

/* Disabled State Modification Classes */
.win98popup button.disabled, 
.win98popup button:disabled {
    color: #85898d;
    cursor: default;
    box-shadow: 0.5px 0.5px 0 0.5px black, inset 1px 1px white, inset -1px -1px #85898d !important;
}

.win98popup button.disabled p {
    color: #85898d;
    text-shadow: 1px 1px white;
}

/* book grid */

     /* The Grid Container */
        .book-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 30px;
            max-width: 1100px;
            margin: 0 auto;
        }

        /* Individual Book Card */
        .book-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease;
        }

        /* Wrapper link that makes both image and title clickable */
        .book-link {
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        /* Book Cover Image Styling */
        .book-cover {
            width: 100%;
            max-width: 150px;
            height: 220px;
            object-fit: cover;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            margin-bottom: 15px;
            transition: opacity 0.2s ease;
        }

        /* Visual indicator when hovering over the clickable block */
        .book-link:hover .book-cover {
            opacity: 0.9;
        }

        /* Title Link Styling */
        .book-title {
            font-family: "Courier New", Courier, monospace !important;
            font-size: 15px;
            font-weight: 600;
            color: #000000;
            line-height: 1.4;
            margin: 0 0 4px 0;
        }

        .book-link:hover .book-title {
            text-decoration: underline;
            color: #002244;
        }

        /* Author Text Styling */
        .book-author {
            font-family: "Courier New", Courier, monospace !important;
            font-size: 13px;
            color: #666;
            margin: 0;
        }





.maincontent h1 {
  font-family: "Courier New", Courier, monospace !important;
  color: white;
  text-align: left;
  line-height: 2;
  -webkit-text-stroke: 1px black;
}

/* 3-per-row image grid with captions */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: none;          /* use the full screen width */
  padding: 0 40px 40px 0;   /* body already has 40px on the left */
  align-items: start;       /* captions sit right under each image */
}

.image-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
}

.image-card img {
  width: 100%;
  height: auto;             /* natural proportions, nothing cropped */
  display: block;
  border: 2px solid #957DDE;
  box-shadow: 0.5px 0.5px 0 0.5px black;
}

.image-card figcaption {
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  color: white;
  -webkit-text-stroke: 0.25px black;
  font-weight: bold;
  text-align: left;
  margin-top: 8px;
  line-height: 1.4;
}

.image-card .image-title {
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  color: white;
  -webkit-text-stroke: 0.5px black;
  font-weight: bold;
  text-align: left;
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Stack to 2 columns on tablets, 1 on phones */
@media (max-width: 900px) {
  .image-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .image-grid { grid-template-columns: 1fr; }
}


/* contact */
/* Contact form variant of the Win98 popup */
.win98popup.contact-popup {
  width: 440px;
  max-width: 92vw;
  height: auto;
  max-height: calc(100vh - 160px);;
  overflow-y: auto;
  align-items: stretch;
  justify-content: flex-start;
  top: 300px;
  transform: translateX(-50%);
}

.contact-form {
  display: flex;
  flex-direction: column;
  padding: 12px 15px 0;
  color: black;
}

.contact-form label {
  font-size: 14px;
  margin: 8px 0 4px;
}

/* Sunken Win98 text fields */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  background: white;
  border: none;
  border-radius: 0;
  padding: 5px 6px;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  color: black;
  outline: none;
  box-shadow: inset 1px 1px #85898d, inset -1px -1px white, inset 2px 2px black, inset -2px -2px #c2c6ca;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  background: #fffff0;
}

/* Buttons sit on the right, like a Win98 dialog */
.contact-form .buttons {
  justify-content: flex-end;
  margin: 14px 0 14px;
}




html, body {
  font-family: "Courier New", Courier, monospace;
  max-width: 100%;
  overflow-x: hidden; /* Blocks side-scrolling ONLY */
  overflow-y: auto;   /* Explicitly allows vertical scrolling when content grows */
}



/* ==========================================================
   MOBILE: phones and small tablets (desktop is unchanged)
   Add new mobile rules inside this block.
   ========================================================== */
@media (max-width: 700px) {

  /* --- Page frame ---------------------------------------- */
  /* Let the browser window scroll (not the body) so the address bar
     collapses and scrolling feels normal on phones. */
  html {
    height: auto;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  body {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 0 16px 40px;         /* was 40px on the left only */
  }

  /* --- Headings and body text ----------------------------- */
  h1,
  .maincontent h1 {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 10px;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  }
  .detailtext,
  .listleft,
  .listright {
    font-size: 18px;
    line-height: 1.5;
    margin-left: 0;
    overflow-wrap: break-word;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  }
  .detailtext[style*="padding-left"] {   /* the "Step 1..6" block on howto */
    padding-left: 0 !important;
  }

  /* Hand-typed line breaks that mid-sentence wrapped the desktop text
     (tagged class="wrap" in the HTML) are ignored so text flows naturally. */
  br.wrap { display: none; }

  /* --- Lists with hanging indents -------------------------- */
  .hanging-indent,
  .step-indent {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
  }
  .hanging-indent { padding-left: 2.5rem; text-indent: -2.5rem; }
  .step-indent    { padding-left: 5rem;   text-indent: -5rem; }

  .list-container {                      /* howto: two columns become one */
    flex-direction: column;
    gap: 0;
    padding-left: 0;
  }

  /* --- Navbar and dropdown --------------------------------- */
  .navbar { padding: 18px 0 8px; }

  /* bigger invisible tap area around the burger icon, same look */
  .menu-toggle { position: relative; }
  .menu-toggle::after {
    content: "";
    position: absolute;
    top: -12px; right: -12px; bottom: -12px; left: -12px;
  }

  .nav-links { width: min(320px, 100%); }
  .nav-links li a {
    font-size: 18px;
    padding: 16px 18px;
    -webkit-text-stroke: 0;
  }

  /* --- Why Reject the Scroll accordions -------------------- */
  .subsection { max-width: 100%; }
  .subsection summary { padding: 12px 6px; gap: 12px; }
  .subsection h2 {
    font-size: 21px;
    line-height: 1.3;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  }
  .section-content { padding: 10px 8px 20px; overflow-wrap: break-word; }

  /* --- Windows 98 popups ----------------------------------- */
  .win98popup {
    height: auto;
    min-height: 118px;
    max-width: calc(100vw - 24px);
  }
  /* bigger invisible tap area on the X button, same look */
  .win98popup .bar button { position: relative; }
  .win98popup .bar button::before {
    content: "";
    position: absolute;
    top: -12px; right: -12px; bottom: -12px; left: -12px;
  }
  /* taller buttons for fingers (min-height also beats the inline height) */
  .win98popup .buttons button { min-height: 30px; }

  /* Contact form: sit in the page instead of floating over the text */
  .win98popup.contact-popup {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    margin: 16px 0 24px;
  }
  .contact-form { padding: 12px 12px 0; }
  .contact-form label { font-size: 16px; }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    font-size: 16px;                     /* 16px stops iPhones zooming in on focus */
  }

  /* --- Recommended Reading --------------------------------- */
  .book-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
  }
  .book-card { padding: 10px; }
  .book-cover { height: 180px; }
  .book-title { font-size: 15px; }
  .book-author { font-size: 13px; }

  /* --- Charts and Statistics ------------------------------- */
  .image-grid { padding: 0 0 32px; gap: 28px; }
  .image-card .image-title {
    font-size: 19px;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  }
  .image-card figcaption {
    font-size: 17px;
    line-height: 1.55;
    overflow-wrap: break-word;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  }
}