.logo {
  display: block;
  margin: 0 auto;
  width: 15%;
  height: auto;
}

.backgroud {
  position:fixed; top:0; left:0; width:100vw; height:100vh; object-fit:cover; z-index:-1;
}

.content-box {
    position: relative;
    top: 35%;
    width: 80%;
    margin: 0 auto;
    background-color: #5f1111;
    z-index: 1;
    border-top: 1px solid #380000;
    box-sizing: border-box;
    padding-bottom: 55px;
    
    min-height: 55vh;
    display: flex;
    align-items: stretch;
    justify-content: center;

    /* --- Fade horizontally (left/right) AND from the bottom (upwards) --- */
    /*
      Two mask layers are used and intersected:
      1) horizontal linear-gradient (left -> right fade)
      2) vertical linear-gradient (bottom -> top fade)
      The intersection makes both fades apply simultaneously; the top remains fully visible.
    */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
                        linear-gradient(to top, transparent 0%, black 10%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
                linear-gradient(to top, transparent 0%, black 10%, black 100%);
    -webkit-mask-composite: intersect;
    mask-composite: intersect;
}

.content {
    position: relative;
    z-index: 2;
    max-width: 1000px; /* central column width */
    width: calc(90% - 240px); /* leaves ~120px gutter on each side for decorations */
    margin: 0 auto; /* horizontal center, remove large vertical margins */
    padding: 20px; /* inner padding for the white field */
    background-color: #fcfce4;
    border-radius: 10px;
    border: 2px solid #fdc1c1;
    box-sizing: border-box;
    height: 100%; /* fill the vertical space of .content-box */
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
}

/* Prevent horizontal scroll on the body */
body {
    overflow-x: hidden;
    background-color: #5f1111; /* Add this line to remove the white strip */
}

p {
    display: inline;
    line-height: 26px;
    padding: 6px 0;
    position: relative;
    z-index: 2
}

nav.site-top { 
  position: absolute;
  left:50%;
  transform: translateX(-50%); 
  top: calc(35% - 18px); 
  width:70%; 
  /* Removed redundant background-image declaration */
  background-image: url('images/home/texture-nav.png'), linear-gradient(#c98f67 0%,#c98f67);
  background-repeat: repeat, no-repeat;
  background-size: 40px 40px, cover;
  background-position: center, center;
  background-blend-mode: normal;
  padding:6px 12px;
  /* stronger layered shadow for depth */
  box-shadow: 0 1px 14px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.18) inset;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
  z-index:120; /* Nav-bar is on layer 120 */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
}

nav.site-top::before, nav.site-top::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 56px;
  height: 64px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index:-100; /* Ribbons are on a very low layer, behind the parent (z-index: 120) */
}

nav.site-top::before {
  left: -37px;
  background-image: url('images/home/ribbon_right.png');
  transform: translateY(calc(-50% + 44%)) scaleX(-1);
}

nav.site-top::after {
  right: -37px;
  background-image: url('images/home/ribbon_right.png');
  transform: translateY(calc(-50% + 44%));
}


.nav-links { display:flex; gap:12px; align-items:center; list-style:none; margin:0; padding:0; }
.nav-item { padding:6px 10px; color:#2b2b2b; background:transparent; border:none; border-radius:4px; text-decoration:none; font-weight:700; font-size:14px; }
.nav-item.active { color:#000; }
.nav-item:hover { color:#000; background: rgba(0,0,0,0.04); }