:root{
  --card-max: 920px;
}

/* Background */
body{
  min-height: 100vh;
  color: #e9ecef;
  background: #0b0f14;
  position: relative;
  overflow-x: hidden;
}

/* Fullscreen blurred background image */
.bg-blur{
  position: fixed;
  inset: 0;
  background-image: url("../../img/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05); /* prevents edge clipping after blur */
  filter: blur(18px);
  opacity: 0.55;
  z-index: -2;
}

/* Dark overlay for readability */
.bg-blur::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 20%, rgba(0,0,0,0.35), rgba(0,0,0,0.75));
  z-index: -1;
}

/* Top nav glass effect */
.glass-nav{
  background: rgba(15, 20, 28, 0.55);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}

/* Center content card */
.content-card{
  max-width: var(--card-max);
  background: rgba(15, 20, 28, 0.68);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  border-radius: 1.25rem;
  padding: clamp(1.1rem, 2.2vw, 2rem);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

/* Justified, readable doc text */
.doc{
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.75;
  font-size: 1.02rem;
}

.doc h2{
  margin-top: 1.6rem;
  margin-bottom: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.doc p, .doc li{
  color: rgba(233,236,239,0.92);
}

.doc ul{
  padding-left: 1.2rem;
}

a{
  color: rgba(233,236,239,0.95);
}
a:hover{
  color: #ffffff;
}