:root {
  --space: 16px;
  --flag-col: 9vw;
  --flag-cursor: url("flags/india-cursor.png") 0 0, auto;
}

html, body, * { cursor: var(--flag-cursor); }

html { background: #111; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  color: #eee;
  font-family: system-ui, sans-serif;
}

/* Flag columns at each horizontal edge; flag images are inserted by script.js. */
.flags {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--flag-col);
  display: flex;
  flex-direction: column;
  gap: var(--space);
  padding: var(--space) 0;
  box-sizing: border-box;
  overflow: hidden;
}
.flags--left  { left: 0; }
.flags--right { right: 0; }
.flags img { display: block; width: 100%; height: auto; flex: none; }
/* Reserve height before the image loads so the fill loop can measure. */
.flags img[src$="india.png"]  { aspect-ratio: 320 / 213; }
.flags img[src$="norway.png"] { aspect-ratio: 320 / 233; }

main {
  width: calc(100vw - 2 * (var(--flag-col) + 15vw));
  padding: var(--space);
  box-sizing: border-box;
  text-align: center;
}
h1 { font-weight: 800; font-size: 36pt; line-height: 1; letter-spacing: 0.05em; text-align: center; margin: 0 0 calc(2 * var(--space)); }
p { color: #aaa; line-height: 1.7; margin: 0 0 var(--space); }
h2 { font-weight: 600; margin: calc(2 * var(--space)) 0 var(--space); }
ul { color: #aaa; line-height: 1.7; margin: 0 0 var(--space); padding: 0; list-style-position: inside; }
hr { border: 0; border-top: 1px solid #444; margin: var(--space) 0; }

nav { margin: 0 0 var(--space); }
nav a, nav a:link, nav a:visited, nav a:hover, nav a:active { color: #eee; text-decoration: underline; text-decoration-color: #eee; }
details.profile { text-align: left; margin: 0 0 var(--space); border: 1px solid #444; border-radius: 6px; padding: 0 var(--space); }
details.profile summary { padding: var(--space) 0; font-weight: 600; }
details.profile table { border-collapse: collapse; width: 100%; margin-bottom: var(--space); color: #aaa; line-height: 1.5; }
details.profile th, details.profile td { border: 1px solid #444; padding: 8px; vertical-align: top; text-align: left; }
details.profile th { color: #eee; }
details.profile td strong { color: #eee; }