/* -------------------------------------------------------- */
/* VARIABLES                                                */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* ── Background Colors ── */
  --background-color: #ffffff;
  --content-background-color: #4f6ff2;
  --sidebar-background-color: #dcecff;

  --text-color: #ffffff;

  --link-color: #e06cf7;
  --link-color-hover: #7780ec;

  /* ── Text ── */
  --heading-font: "Press Start 2P", monospace;
  --font: "VT323", monospace;
  --font-size: 16px;

  /* ── Layout ── */
  --margin: 10px;
  --padding: 20px;
  --round-borders: 0px; /* Flat/square = proper pixel-art look */
  --sidebar-width: 200px;

  /* ── Pixel-Perfect Win98-style bevel system ──
     The real 98.css uses FOUR layered inset shadows to create
     the authentic 2px raised-panel bevel:
       outer-dark  = near-black outside
       outer-light = white inside-top-left
       inner-dark  = mid grey inside-bottom-right
       inner-light = light grey inside-top-left
     We recolour these four slots into our blue palette below. ── */

  /* Blue-tinted bevel for raised panels (main, sidebar): */
  --bevel-tl-outer: #c8e4ff; /* bright top-left outer edge  */
  --bevel-br-outer: #0a1560; /* dark bottom-right outer edge */
  --bevel-tl-inner: #e8f4ff; /* brighter second inner edge   */
  --bevel-br-inner: #1a2fa0; /* darker second inner edge     */

  /* Sunken bevel for "pressed in" elements (scrollbars, text boxes): */
  --sunken-tl-outer: #0a1560;
  --sunken-br-outer: #c8e4ff;
  --sunken-tl-inner: #1a2fa0;
  --sunken-br-inner: #e8f4ff;
}

/* -------------------------------------------------------- */
/* BASICS                                                   */
/* -------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;

  /* Original tiled grid background image restored */
  background-color: var(--background-color);
  background-image: url("images/gridblue.jpg");
  background-repeat: repeat;
  background-size: 300px auto;

  /* Pixel-crisp font rendering — kills antialiasing for that chunky bitmap look */
  -webkit-font-smoothing: none;
  font-smooth: never;
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px var(--link-color);
  background-color: inherit;
  color: var(--text-color);
}

/* ── Links ── */
a {
  text-decoration: underline;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* -------------------------------------------------------- */
/* PIXEL WINDOW BEVEL — the authentic 4-shadow technique    */
/* Lifted directly from 98.css by @jdan: each of the four  */
/* inset shadows draws one 1px edge of the classic bevel.  */
/* Recoloured into our blue palette.                        */
/* -------------------------------------------------------- */

/* Raised panel — outer ring dark/bright, inner ring bright/dark */
.pixel-raised,
main,
header,
aside,
footer {
  box-shadow:
    inset -1px -1px var(--bevel-br-outer),
    /* outer dark: bottom-right */ inset 1px 1px var(--bevel-tl-outer),
    /* outer light: top-left    */ inset -2px -2px var(--bevel-br-inner),
    /* inner dark: bottom-right */ inset 2px 2px var(--bevel-tl-inner); /* inner light: top-left    */
  border-radius: var(--round-borders);
}

/* -------------------------------------------------------- */
/* LAYOUT                                                   */
/* -------------------------------------------------------- */

.layout {
  width: 1000px;
  display: grid;
  grid-gap: var(--margin);
  grid-template:
    "header header header" auto
    "leftSidebar main rightSidebar" auto
    "footer footer footer" auto
    / var(--sidebar-width) auto var(--sidebar-width);
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);

  /* ── Thick solid outer border + the 4-shadow bevel inside it ──
     The outer border is the "window frame"; the inset shadows
     are the raised bevel that makes it look 3D and pixel-perfect. */
  border: 2px solid #0a1560;
}

/* -------------------------------------------------------- */
/* HEADER                                                   */
/* -------------------------------------------------------- */

header {
  grid-area: header;
  background: #4f6ff2;
  border: 2px solid #0a1560;
  overflow: hidden;
}

/* ── Pixel title bar across the top of the header ──
   This mimics the Win98 blue title bar: a dark-blue gradient
   bar with white text, close/min/max buttons, and the bevel
   treatment on all edges. We use a ::before pseudo-element
   so it sits above the header content without extra HTML. ── */
header::before {
  content: "✦ Chowshiiii's Dreamhouse ✦";

  display: flex;
  align-items: center;
  padding: 0 6px;

  height: 22px;

  /* Classic Win98 active-window title bar gradient (blue → darker blue) */
  background: linear-gradient(to right, #1a3eb8, #4f6ff2 40%, #2850d4);

  color: #ffffff;
  font-family: var(--heading-font);
  font-size: 7px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;

  /* Bottom border only — separates title bar from header content */
  border-bottom: 1px solid #0a1560;

  /* Four-shadow bevel on the title bar itself */
  box-shadow:
    inset -1px -1px var(--bevel-br-outer),
    inset 1px 1px var(--bevel-tl-outer),
    inset -2px -2px var(--bevel-br-inner),
    inset 2px 2px var(--bevel-tl-inner);
}

/* ── Pixel window control buttons in the title bar ──
   Win98 style: three tiny sunken squares (─ □ ✕) at the right.
   Achieved with ::after, floating right via text-align trick. ── */
header::after {
  content: " ─  □  ✕ ";

  position: absolute;
  top: 2px;
  right: 4px;

  height: 18px;
  padding: 0 4px;

  background: #4f6ff2;
  color: #ffffff;
  font-family: monospace;
  font-size: 11px;
  line-height: 18px;

  /* Each "button" gets its own sunken bevel using the pixel technique */
  box-shadow:
    inset -1px -1px var(--bevel-tl-outer),
    inset 1px 1px var(--bevel-br-outer),
    inset -2px -2px var(--bevel-tl-inner),
    inset 2px 2px var(--bevel-br-inner);

  cursor: default;
}

header {
  position: relative; /* needed for ::after absolute positioning */
}

.header-content {
  /* Offset so content starts below the 22px title bar */
  padding: 28px 28px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: bold;
}

.header-image {
  width: 720px;
  height: 250px;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------- */
/* SIDEBARS                                                 */
/* -------------------------------------------------------- */

aside {
  grid-area: aside;
  border: 2px solid #0a1560;
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: #333366; /* Dark blue text on the light sidebar */
}

.left-sidebar {
  grid-area: leftSidebar;
}

.right-sidebar {
  grid-area: rightSidebar;
}

/* ── Sidebar section titles ──
   Flat solid dark-blue strip — no gradient, no fuss.
   A 3px cyan left-border accent gives it personality
   without the mushy gradient look. Extends edge-to-edge
   by pulling out of the sidebar's padding with negative margins. ── */
.sidebar-title {
  font-weight: bold;
  font-size: 0.75em;
  font-family: var(--heading-font);
  line-height: 1.8;

  /* Flat solid — the deepest panel blue, no gradient */
  background: #1a3eb8;
  color: #ffffff;
  padding: 3px 6px 3px 10px;

  /* Left accent bar in cyan — the only decoration needed */
  border-left: 3px solid #e757fa;

  /* Bleed edge-to-edge across the sidebar */
  margin: 0 calc(-1 * var(--padding)) 12px;

  /* Bevel on the strip as a whole unit */
  box-shadow:
    inset -1px -1px var(--bevel-br-outer),
    inset 1px 1px var(--bevel-tl-outer),
    inset -2px -2px var(--bevel-br-inner),
    inset 2px 2px var(--bevel-tl-inner);
}
.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

.sidebar-section > *:first-child {
  margin-top: -20px;
}

/* ── Sidebar Blockquote ──
   Styled as a sunken "text box" panel — pixel recessed look. ── */
.sidebar-section blockquote {
  /* Sunken panel using inverted bevel (dark on top-left = "pressed in") */
  box-shadow:
    inset -1px -1px var(--bevel-tl-outer),
    inset 1px 1px var(--bevel-br-outer),
    inset -2px -2px var(--bevel-tl-inner),
    inset 2px 2px var(--bevel-br-inner);
  border: 2px solid #0a1560;
  background: rgba(255, 255, 255, 0.5);
  padding: 15px;
  margin: 1em 0;
  border-radius: 0;
  overflow: hidden;
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}

/* ── Site Button ── */
.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-button textarea {
  font-family: monospace;
  font-size: 0.7em;
  border: 2px solid #0a1560;

  /* Sunken input-field bevel */
  box-shadow:
    inset -1px -1px var(--bevel-tl-outer),
    inset 1px 1px var(--bevel-br-outer),
    inset -2px -2px var(--bevel-tl-inner),
    inset 2px 2px var(--bevel-br-inner);
}

/* -------------------------------------------------------- */
/* CURRENTLY SECTION                                        */
/* Each item: tiny gif on left, label + answer stacked right*/
/* -------------------------------------------------------- */

.currently-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: -20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.currently-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.currently-gif {
  /* Tiny gif icon — swap src per item */
  width: 30px;
  height: 30px;
  object-fit: cover;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.currently-item > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.currently-label {
  /* Subtitle — small muted label */
  font-family: var(--heading-font);
  font-size: 0.5em;
  color: #6680cc;
  text-transform: lowercase;
  line-height: 1.4;
}

.currently-answer {
  /* The actual answer text — larger, readable */
  font-family: var(--font);
  font-size: 1.1em;
  color: #1a2fa0;
  line-height: 1.2;
}

/* -------------------------------------------------------- */
/* LINK ME SECTION                                          */
/* -------------------------------------------------------- */

.link-me {
  display: flex;
  flex-direction: column;
  align-items: center; /* This centers everything horizontally */
  gap: 6px;
}

.link-me-button {
  /* 88x31 standard web button size */
  display: block; /* Helps prevent weird baseline spacing issues with images */
  margin: 10px;
}

.link-me-label {
  font-family: var(--heading-font);
  font-size: 0.5em;
  color: #6680cc;
  margin: 2px 0 0;
  text-align: center; /* Ensures the text itself is centered */
}

.link-me-code {
  width: 100%;
  height: 62px;
  resize: none;
  font-family: monospace;
  font-size: 0.8em;
  color: #1a2fa0;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #0a1560;
  padding: 4px 6px;

  /* Sunken input bevel */
  box-shadow:
    inset -1px -1px var(--bevel-tl-outer),
    inset 1px 1px var(--bevel-br-outer),
    inset -2px -2px var(--bevel-tl-inner),
    inset 2px 2px var(--bevel-br-inner);
}

/* ── Quote section: no title, just the gif, less bottom margin ── */
.sidebar-section--quote {
  margin-bottom: 1.5em !important;
}

.pet-container {
  width: 100%;
  overflow: hidden;

  display: flex;
  justify-content: center;
}

.pet-frame {
  transform: scale(0.5);
  transform-origin: top center;

  width: 314px;
  height: 321px;

  border: none;

  margin-bottom: -125px;
}

/* -------------------------------------------------------- */
/* BLINKIES SECTION                                         */
/* Wrapping grid of blinkies — standard 150x20px strips    */
/* -------------------------------------------------------- */

.blinkies {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.blinkies img {
  /* Standard blinkie size — adjust if yours differ */
  height: 20px;
  width: auto;
  image-rendering: pixelated;
}

/* -------------------------------------------------------- */
/* NEO CITIZENS                                             */
/* Grid of 88x31 friend buttons                            */
/* -------------------------------------------------------- */

.neo-citizens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.neo-citizens img {
  /* Standard 88x31 button */
  width: 88px;
  height: 31px;
  image-rendering: pixelated;

  /* Raised pixel frame */
  border: 1px solid #0a1560;
  box-shadow:
    inset -1px -1px var(--bevel-br-outer),
    inset 1px 1px var(--bevel-tl-outer);
}

.neo-citizens a:hover img {
  /* Sunken on hover = "pressed" button feel */
  box-shadow:
    inset -1px -1px var(--bevel-tl-outer),
    inset 1px 1px var(--bevel-br-outer);
}

/* -------------------------------------------------------- */
/* LOGS                                                     */
/* Daily micro-entries: date / time / mood / one-liner      */
/* -------------------------------------------------------- */

.logs {
  display: flex;
  flex-direction: column;
  gap: 0;

  /* Scrollable area */
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 4px;
}

/* Pixel Scrollbar */

.logs::-webkit-scrollbar {
  width: 6px;
}

.logs::-webkit-scrollbar-track {
  background: #dbe7ff;
  border: 1px solid #a0b8e8;
}

.logs::-webkit-scrollbar-thumb {
  background: #8aa6ea;
  border: 1px solid #6d89d6;
}

.logs::-webkit-scrollbar-thumb:hover {
  background: #6f8ddd;
}

/* Firefox */
.logs {
  scrollbar-width: thin;
  scrollbar-color: #8aa6ea #dbe7ff;
}

.log-entry {
  padding: 8px 0;
  border-bottom: 1px solid #a0b8e8;
}

.log-entry:last-child {
  border-bottom: none;
}

.log-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.log-date {
  font-family: var(--heading-font);
  font-size: 0.5em;
  color: #1a3eb8;
}

.log-time {
  font-family: var(--heading-font);
  font-size: 0.45em;
  color: #6680cc;
}

/* Mood badge */

.log-mood {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-family: var(--font);
  font-size: 0.85em;
  padding: 1px 6px;

  border: 1px solid currentColor;
  line-height: 1.4;
  border-radius: 2px;
  white-space: nowrap;
}

/* Emoticons */

.mood--happy::before {
  content: "( . ▽ . )ﾉ";
}

.mood--sad::before {
  content: "(╥﹏╥)";
}

.mood--tired::before {
  content: "(´-ω-｀)";
}

.mood--angry::before {
  content: "(╬ಠ益ಠ)";
}

.mood--okay::before {
  content: "(￣▽￣)";
}

.mood--love::before {
  content: "(♡˙︶˙♡)";
}

/* Mood colours */

.mood--happy {
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.12);
}

.mood--sad {
  color: #1565c0;
  background: rgba(21, 101, 192, 0.12);
}

.mood--tired {
  color: #6a1b9a;
  background: rgba(106, 27, 154, 0.12);
}

.mood--angry {
  color: #b71c1c;
  background: rgba(183, 28, 28, 0.12);
}

.mood--okay {
  color: #e65100;
  background: rgba(230, 81, 0, 0.12);
}

.mood--love {
  color: #ad1457;
  background: rgba(173, 20, 87, 0.12);
}

.log-text {
  font-family: var(--font);
  font-size: 1.05em;
  color: #1a2fa0;
  margin: 0;
  line-height: 1.35;
}

/* -------------------------------------------------------- */
/* CREDITS MARQUEE                                          */
/* -------------------------------------------------------- */

.credits-marquee {
  margin-top: 8px;
}

.credits-marquee img {
  width: 88px;
  height: 31px;

  margin-right: 4px;

  image-rendering: pixelated;

  vertical-align: middle;
}

.credits-marquee a {
  display: inline-block;
}

/* -------------------------------------------------------- */
/* FOOTER                                                   */
/* -------------------------------------------------------- */

footer {
  grid-area: footer;
  border: 2px solid #0a1560;
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: center;
}

footer a,
footer a:visited {
  color: var(--link-color);
}

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}

/* -------------------------------------------------------- */
/* NAVIGATION — sidebar nav                                 */
/* -------------------------------------------------------- */

nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* ── NAVIGATION IN HEADER ──
   Design: a single thin flat strip flush to the header bottom.
   No per-button box-shadow bevel — the strip itself holds the
   bevel as one unit. Each link is compact (38px tall) with a
   3px cyan accent bar that snaps in on hover/active via
   border-bottom. No transition — pixel apps don't ease.
   Outer margin removed so the nav sits flush to header edges. ── */

header nav {
  margin: 14px -10px 0px -10px; /* flush to header edges */
  width: calc(100% + 56px);

  /* Flat icy-blue strip — the whole bar is one raised panel */
  background: #dbeaff;

  /* Single outer border + 4-shadow panel bevel as one unit */
  border: 2px solid #0a1560;
  box-shadow:
    inset -1px -1px var(--bevel-br-outer),
    inset 1px 1px var(--bevel-tl-outer),
    inset -2px -2px var(--bevel-br-inner),
    inset 2px 2px var(--bevel-tl-inner);

  overflow: visible;
}

header nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

header nav li {
  flex: 1;
  position: relative;
  display: flex;
}

/* ── 1px pixel separator between items ──
   A single dark line only — no double-line, keeps it sleek. ── */
header nav li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--bevel-br-outer);
}

/* ── Nav links: compact, flat, no per-button bevel ──
   38px height keeps the bar thin and sleek.
   border-bottom is invisible (transparent) by default —
   the 3px accent snaps in on hover/active. ── */
header nav a,
header nav strong {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  height: 38px;

  color: #2a4ab0;
  text-decoration: none;
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  /* Reserve space for the 3px accent bar so text doesn't shift */
  box-shadow: inset 0 -3px transparent;
  /* No bevel, no transition — flat and instant */
  transition: none;
}

/* ── Hover / active: cyan accent bar snaps in at bottom ──
   Background darkens very slightly to acknowledge the hover.
   The 3px border-bottom is the whole effect — clean and pixel-sharp. ── */
header nav a:hover,
header nav a:focus,
header nav a.active,
header nav strong:hover {
  background: #c8dcff;
  color: #0a1560;
  box-shadow: inset 0 -3px #3b86e8; /* cyan accent — matches --link-color */
}

/* ── Subnavigation (Drop-Down) ──
   Context menu style: flat panel with bevel, dark border,
   compact items, blue highlight row on hover. ── */
header nav ul ul {
  background: #dbeaff;
  border: 2px solid #0a1560;

  box-shadow:
    inset -1px -1px var(--bevel-br-outer),
    inset 1px 1px var(--bevel-tl-outer),
    inset -2px -2px var(--bevel-br-inner),
    inset 2px 2px var(--bevel-tl-inner),
    3px 3px 0 rgba(0, 0, 0, 0.3); /* hard pixel drop shadow */

  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 2px 0;
  z-index: 999;
  min-width: 140px;
}

header nav ul li:hover ul,
header nav ul li:focus-within ul {
  display: block;
}

header nav ul li strong {
  color: var(--link-color);
  text-decoration: underline;
  font-weight: normal;
}

/* Dropdown items: flat, no accent bar, blue highlight on hover */
header nav ul ul li a {
  display: block;
  padding: 5px 14px;
  font-size: 8px;
  color: #1a2fa0;
  text-align: left;
  border-bottom: none;
  box-shadow: none;
  height: auto;
  letter-spacing: 0.02em;
}

header nav ul ul li a:hover {
  background: #0000aa;
  color: #ffffff;
  border-bottom: none;
  box-shadow: none;
}

/* -------------------------------------------------------- */
/* CONTENT                                                  */
/* -------------------------------------------------------- */

main {
  line-height: 1.5;
}

main a,
main a:visited {
  color: var(--link-color);
}

main a:hover,
main a:focus {
  color: var(--link-color-hover);
  text-decoration-style: wavy;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

/* ── Blockquotes styled as a sunken "note" panel ── */
main blockquote {
  /* Sunken bevel = embedded panel look */
  box-shadow:
    inset -1px -1px var(--bevel-tl-outer),
    inset 1px 1px var(--bevel-br-outer),
    inset -2px -2px var(--bevel-tl-inner),
    inset 2px 2px var(--bevel-br-inner);
  border: 2px solid #0a1560;
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 0;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

main hr {
  border: 0;
  border-top: 2px solid #0a1560;
  /* Double-line pixel divider: one dark, one highlight below it */
  box-shadow: 0 1px 0 var(--bevel-tl-outer);
  margin: 1.5em 0;
}

/* ── HEADINGS ── */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--heading-font);
  margin-bottom: 0;
  line-height: 1.5;

  /* Pixel text-shadow: hard 2px offset, no blur = chunky bitmap shadow */
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.35);
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.5em;
}
main h2 {
  font-size: 1.4em;
}
main h3 {
  font-size: 1.3em;
}
main h4 {
  font-size: 1.2em;
}
main h5 {
  font-size: 1.1em;
}
main h6 {
  font-size: 1em;
}

/* ── COLUMNS ── */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

/* -------------------------------------------------------- */
/* CONTENT IMAGES                                           */
/* -------------------------------------------------------- */

/* ── Images get the sunken picture-frame bevel ──
   Same as a Win98 picture box or preview pane. ── */

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;

  border: 2px solid #0a1560;
  box-shadow:
    inset -1px -1px var(--bevel-tl-outer),
    inset 1px 1px var(--bevel-br-outer),
    inset -2px -2px var(--bevel-tl-inner),
    inset 2px 2px var(--bevel-br-inner);
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;

  border: 2px solid #0a1560;
  box-shadow:
    inset -1px -1px var(--bevel-tl-outer),
    inset 1px 1px var(--bevel-br-outer),
    inset -2px -2px var(--bevel-tl-inner),
    inset 2px 2px var(--bevel-br-inner);
}

.barbie {
  display: block;
  width: calc(100% + 38px);
  max-width: none;
  height: auto;
  margin-left: -20px;
  margin-right: -19px;
  margin-bottom:50px;
  /* 4px thick borders top/bottom, 0px on sides */
  border-width: 4px 0;
  border-style: solid;

  /* Creates a repeating 2-pixel stripe pattern for a rigid, retro beveled look */
  border-image: linear-gradient(
      to bottom,
      #fff 0%,
      #fff 50%,
      /* White top half */ #808080 50%,
      #808080 100% /* Dark gray bottom half */
    )
    4 0;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY                                            */
/* -------------------------------------------------------- */

/* please do not remove this. */

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/* -------------------------------------------------------- */
/* PROFILE CARD                                             */
/* -------------------------------------------------------- */

.profile-card {
  position: relative;

  width: min(700px, 100%);

  margin: 0 auto 25px;
}

.profile-card-bg {
  display: block;

  width: 100%;

  height: auto;
}

.profile-card-character {
  position: absolute;

  /* ← CUSTOMISE THESE */

  width: 185px;

  height: 140px;

  left: 78px;

  top: 78px;

  /* ---------------- */

  image-rendering: pixelated;
}

/* ==========================================
   repeating gif divider
   ========================================== */

.gif-divider {
  width: 100%;
  height: 32px; /* change height */
  margin: 24px 0;

  background-image: url("images/divider.gif"); /* your gif */
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE                                        */
/* -------------------------------------------------------- */

/* CSS Code for devices < 800px */
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;
    grid-template:
      "header" auto
      "leftSidebar" auto
      "main" auto
      "rightSidebar" auto
      "footer" auto
      / 1fr;
    /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
  }

  aside {
    border-bottom: 1px solid;
    padding: 9px;
    padding-top: 20px;
    font-size: 0.9em;
  }

  .header-content {
    padding: 18px 12px 0;
  }

  .header-image {
    width: min(720px, 100%);
    height: auto;
    max-width: 100%;
    display: block;
  }

  header::before {
    height: 20px;
    font-size: 6px;
    padding: 0 4px;
  }

  header::after {
    font-size: 9px;
    top: 1px;
    right: 2px;
  }

  nav {
    padding: 0;
  }

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
  }

  main {
    max-height: none;
    padding: 15px;
  }

  .images {
    flex-wrap: wrap;
  }

  .images img {
    width: 100%;
  }

  #skip-to-content-link {
    font-size: 1rem;
  }

  /* ── Mobile nav: 2-column pixel grid ──
     Switch from flex to a fixed 2-col grid — equal cells,
     no orphan-stretching, no magic width hacks. Each cell
     gets a bottom+right pixel border as the divider. ── */

  header nav {
    margin: 14px 0 0;
    width: 100%;

    border-top: 2px solid #0a1560;

    background: #cfe3ff;
  }

  header nav ul {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin: 0;
    padding: 0;
  }

  header nav li {
    flex: unset;

    border-right: 1px solid #8db6ff;
    border-bottom: 1px solid #8db6ff;

    background: #dcecff;
  }

  header nav a,
  header nav strong {
    display: flex;

    justify-content: center;
    align-items: center;

    min-height: 38px;

    padding: 8px;

    font-size: 8px;

    line-height: 1.3;

    text-align: center;

    color: #264ca5;

    background: #dcecff;
  }

  header nav a:hover,
  header nav a.active {
    background: #fff7b8;

    color: #5d4c12;
  }
  .profile-card {
    width: 100%;
  }

  .profile-card-character {
    width: 110px;
    height: 90px;

    left: 47px;

    top: 47px;
  }
}