* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000000;
  color: #ffffff;
  font-family: Iosevka, Arial, sans-serif;
}
@font-face {
  font-family: Iosevka;
  src: url(fonts/iosevka-ss08-regular.woff2);
  font-weight: 400;
}
@font-face {
  font-family: Iosevka;
  src: url(fonts/iosevka-ss08-bold.woff2);
  font-weight: 700;
}
h1 {
    margin: 20px;
}
p {
    margin: 20px;
    font-size: 14pt;
}
a {
    color: #0ff;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between; /* Even distribution */
  padding: 0;
  margin: 0;
  width: 100%;
}

nav ul li {
  flex: 1; /* Each item grows equally */
  text-align: center; /* Center the link text */
}

nav ul li a {
  display: block;        /* Makes the full area clickable */
  width: 100%;           /* Fill the entire flex cell */
  padding: 15px 0;       /* Vertical padding for a bigger click area */
  text-decoration: none;
  font-size: 18px;
  border-radius: 5px;    /* Optional */
  transition: background-color 0.3s ease;
}

nav ul li a:hover {
  background-color: #4c0000;
}
.selectedpage {
  text-decoration-line: underline;
  text-decoration-color: #ffa321;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;

}
header {
    width: 100%;
    flex-shrink: 0;
}
@keyframes flicker-in {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  20%  { opacity: 0.4; }
  30%  { opacity: 1; }
  40%  { opacity: 0.6; }
  50%  { opacity: 1; }
  60%  { opacity: 0.7; }
  70%  { opacity: 1; }
  80%  { opacity: 0.85; }
  90%  { opacity: 1; }
  100% { opacity: 1; }
}

.flicker {
  animation: flicker-in 1.2s ease forwards; /* doubled duration */
}

.flicker-ui {
  opacity: 0;
}

.subtitle {
  text-align: center;
  margin-top: -2rem;

}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
/* Flex container to hold the information box and SVG */
.mapcontainer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
/* Information box styles */
.info-box {
  flex: 1;
  border: 1px solid #0ff;
  overflow-y: auto;
  margin: 10px;
}
/* SVG container styles */
.svg-container {
  flex: 3;
  overflow: hidden;  /* Prevents SVG overflow outside the container */
  margin: 10px;
  border: 1px solid #0ff;
}
.svg-container-auto {
  flex: auto;
  overflow: hidden;  /* Prevents SVG overflow outside the container */
  margin: 10px;
  border: 1px solid #0ff;
}
.svg-container svg {
  object-fit: contain;
}
.sectionmarker {
  flex: 1.5;
  overflow: hidden;  /* Prevents SVG overflow outside the container */
  margin: 10px;
  border: 1px solid #0ff;
}
.sectioninfo {
  flex: 2;
  border: 1px solid #0ff;
  overflow-y: auto;
  margin: 10px;
}