/* =========================
   THEME
========================= */
:root{
  /* Facebook-like dark mode */
  --bg: #18191a;
  --panel: #242526;
  --panel-2: #1f2021;
  --text: #e4e6eb;
  --muted: #b0b3b8;
  --border: #3a3b3c;
  --border-2: #4e4f50;
  --accent: #1877f2;

  /* Adjust roundness here */
  --radius: 6px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);

  margin-top: 20px !important;
}

/* Prevent layout shift when modal opens */
body.modal-open{
  overflow: hidden;
}
 
/* =========================
   GRAPHIC DESIGN (STACKED)
========================= */
.gd{
  max-width: 1150px;
  margin: 0 auto;
  padding: 20px 18px 40px;
  top: 500%;
  
}

.gd-stack{
  display: flex;
  flex-direction: column;
  gap: 30px; /* space between images */
}

/* =========================
   BACK BUTTON (X) – RIGHT
========================= */
.back-btn{
  position: fixed;
  top: 20px;
  right: 20px;   /* ← THIS keeps it on the right */

  width: 40px;
  height: 40px;

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

  border-radius: 50%;
  background: rgba(0,0,0,0.6);

  color: #fff;
  font-size: 22px;
  font-weight: 400;
  text-decoration: none;

  z-index: 99999;
  cursor: pointer;

  transition: background 0.15s ease, transform 0.15s ease;
}

.back-btn:hover{
  background: rgba(0,0,0,0.85);
  transform: scale(1.05);
}