/* Base Structure */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size:16px;
}

body {
margin: 0;
padding: 0.5em 0;
font-family: 'Courier New', Courier, monospace; 
background: url('../imgs/BGs/bg-3a.jpg') repeat;
}
@media (max-width: 46em) {
  body {
  padding:0;
  }
}

body.hm_lvl {
background: url('../imgs/BGs/Giant_vegas-bg.png') no-repeat center center fixed;
background-size: cover; 
padding: 0.5em 0;
}

body.hm_lvl #wrapper {
border:1px solid #c7bebe;
border-radius:2.5em 2.5em  1.5em 1.5em;
box-shadow: none;
background: transparent;
margin: 0 auto;
padding: 0;
}

h1 { font-size: 1.525rem; }
h2 { font-size: 1.325rem; }
h3 { font-size: 1.225rem; }
p {  font-size: 1.15rem;
     text-indent:0.25em;
  }


#shell {
  width: 100%;
  max-width: 54.5em;
  background: linear-gradient(to bottom, #2d3949, #162235);
  border-radius: 2.75em 2.75em 2em 2em;
  border: 0.25em solid #17202e;
  box-shadow: 0.75em 0.75em 1.5em rgba(70, 85, 110, 0.55);
  margin:0 auto;
  padding:1.25em 0 0.5em 0;
}
@media (max-width: 46em) {
  #shell {
    background:transparent;
    border: none;
    border-radius: 0;
    margin: 0 auto; /* tighten vertical space */
    padding:0;
  }
}

#wrapper {
  width: 100%;
  max-width: 50em;
  border: 0.25em solid #3b4553;
  border-radius: 2.75em 2.75em 2em 2em;
  margin: 0.5em auto;
  padding: 0;
  box-shadow: inset 0 0 0.75em rgba(29, 4, 4, 0.25);
}

@media (max-width: 46em) {
  #wrapper {
    border: none;
    border-radius: 0;
    margin: 0 auto; /* tighten vertical space */
  }
}

/*  this next block is all (obviously) top_nav styles  */

#topnav_menu {
  position: fixed;
  top: +1em;
  z-index: 999;
  background-color: inherit;
  width: fit-content;
  margin: 2em 0 0 0.75em;
  padding: 0;
}

#menu_button {
  width: auto;
  color: #194b28;
  font-size: 1.2em;
  text-align: right;
  cursor: pointer;
  background: transparent url(../imgs/icons/menu_btn02.svg) no-repeat bottom left;
  background-size: 1.5em;
  background-position: 0.2em 0.35em;
  border-radius: 0.5em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  border: 0.065em solid #82837F;
  box-shadow: inset 0 0.1em 0.2em rgba(231, 228, 228, 0.25),
              0.085em 0.085em 0.35em rgba(71, 71, 116, 0.5);
  margin: 0;
  padding: 0.75em 1.75em 0.75em 2em;
}

/* === UL Menus === */
#topnav_menu ul {
  position: absolute;
  top: 2.5em;
  left: 0;
  width: max-content;
  display: none;
  list-style: none;
  background-color: rgba(112, 36, 69, 0.85);
  border-radius: 1em;
  z-index: 15;
  box-shadow: 0 0.45em 0.95em rgba(0, 0, 0, 0.5);
  transition: opacity 0.75s ease-in-out;
  margin: 0;
  padding: 0.75em 0.35em;
}

#topnav_menu ul.visible {
  display: block;
}

#topnav_menu ul li a {
  display: block;
  color: #f3fffc;
  background-color: #833c5a;
  text-decoration: none;
  border: 0.065em solid gray;
  border-radius: 0.35em;
  margin: 0.45em 0;
  padding: 0.5em 1.25em;
}

#topnav_menu ul li a:hover {
  color: white;
  background-color: #702445;
  border: 0.065em solid rgb(196, 183, 183);
}

/* === DL Menus === */
#topnav_menu dl {
  position: absolute;
  top: 2.5em;
  left: 0;
  width: max-content;
  display: none;
  background-color: rgba(112, 36, 69, 0.85);
  border-radius: 1em;
  z-index: 15;
  box-shadow: 0 0.45em 0.95em rgba(0, 0, 0, 0.5);
  transition: opacity 0.75s ease-in-out;
  padding: 0.75em 0.75em;
}

#topnav_menu dl.visible {
  display: block;
}

#topnav_menu dt {
  font-size: 0.9em;
  color: #eee;
  font-weight: bold;
  margin: 0.65em 0 0.25em 1em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

#topnav_menu dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

#topnav_menu dd a {
  display: block;
  color: #f3fffc;
  background-color: #833c5a;
  text-decoration: none;
  border: 0.065em solid gray;
  border-radius: 0.35em;
  margin: 0.35em 0;
  padding: 0.5em 1.25em;
}

#topnav_menu dd a:hover {
  color: white;
  background-color: #702445;
  border: 0.065em solid rgb(196, 183, 183);
}

/*  Optional Hover Reveal for Both  */
#topnav_menu:hover ul,
#topnav_menu:hover dl {
  display: block;
}

/* Banner */
#bnr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 6rem; 
  width: 100%;
  background-color: #fff;
  border-radius: 2.5em 2.5em 0 0;
  margin:0;
}
#bnr_lens {
  width: 18em;
  height: 5.5em;
  margin: 0 auto;
  border-radius: 2em;
  background: url('../imgs/BGs/Cam_lnz01.png') no-repeat center center;
  background-size: cover;
  border: 0.35em solid #333;
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.5), 0 0 0.75em rgba(0,0,0,0.25);
}
@media screen and (max-width: 48em) {
  #bnr_lens {
    width: 14em;
    height: 4.25em;
  }
}

@media screen and (max-width: 32em) {
  #bnr_lens {
    width: 12em;
    height: 3.5em;
  }
}
#bnr_lens_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin: 0 auto;
}

#shttr_btn {
  width: 2.25em;
  height: 2.25em;
  background: url('../imgs/icons/finger_prnt.svg') no-repeat center center;
  background-size: contain;
  border-radius: 50%;
  box-shadow: inset 0 0 0.35em rgba(0,0,0,0.4);
}
@media screen and (max-width: 48em) {
  #shttr_btn {
    width: 1.85em;
    height: 1.85em;
  }
}

@media screen and (max-width: 32em) {
  #shttr_btn {
    width: 1.5em;
    height: 1.5em;
  }
}

/* Content Wrapper */
#cnt_wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  justify-content: space-between;
  align-items: stretch;
  flex-grow: 1;
  border-radius: 0 0 1.5em 1.5em;
  margin: 0 auto;
  padding: 0.75em 0 0 0;
}

/* Structural Flexbox Classes */
.full_bx {
    width: 100%;
    display: flex;
    flex-direction: column; /* Always vertical stacking */
    border: 1px solid rgb(214, 213, 218);
    border-radius: 0.5em;
    margin:0.75em;
    padding:0;
 
}

/* Two-column layout */
.half_bx {
    width: 46%; /* Two side-by-side at full width */
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    margin: 0.5em auto;
}

/* Three-column layout */
.third_bx {
    width: 30%; /* Three side-by-side at full width */
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    margin: 0.5em auto;
}

/* One-column Dress Classes */
.one-bx01, .one-bx02, .one-bx03 {
    padding: 0.5em;
}

/* Two-column dress classes */
.two-bx01, .two-bx02, .two-bx03 {
    padding: 0.5em;
}

/* Three-column dress classes */
.three-bx02, .three-bx03 {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0.5em;  
}

/* The 'kids' are alright */
.neph_2bx{
color: #023306;
background: linear-gradient(to bottom, rgba(200, 138, 192, 0.8), rgba(224, 61, 198, 0.8));
  margin: 0;
  padding: 0.35em;
}

.neice-2bx {
    border: 0.065em solid #856e6e;
    border-radius: 0.5em;
    font-style: italic;
    box-shadow: 0 0 0.35em rgba(0,0,0,0.4);
  }

/* three cell kids */
.neph_3bx {
    background: #1a1a1a;
    color: #fff;
    text-align: center;
    font-size: 0.95rem;
    padding: 0.75em;
    margin: 0;
  }
  
  @media screen and (max-width: 32em) {
    .neph_3bx {
      width: 98%;
      margin: 0 auto;
    }
  }
   
  /* Style variants */
  .neice-3bx01 {
    color: #fff;
    background: linear-gradient(to bottom, rgba(159, 64, 90, 0.8), rgba(181, 101, 110, 0.8));
  }
  .neice-3bx02 {
    color: #250946;
    background: linear-gradient(to bottom, rgba(218, 129, 139, 0.8), rgba(208, 161, 64, 0.8));
  }
  .neice-3bx03 {
    color: #1a0236;
    background: linear-gradient(to bottom, rgba(208, 161, 64, 0.8), rgba(228, 199, 82, 0.8));
  }
  .neice-3bx01,
  .neice-3bx02,
  .neice-3bx03 {
    border: 0.065em solid rgba(92, 85, 85, 0.4);
    border-radius: 0.5em;
    box-shadow: 0 0 0.75em rgba(0, 0, 0, 0.6);
  }
  
  #ftr {
    width: 100%;
    background: #101f31;
    color: #b0c4de;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    border-radius: 0 0 1.5em 1.5em;
    margin: 0;
    padding: 1em;
  }
  @media (max-width: 46em) {
    #ftr {
      border: none;
      border-radius: 0;
    }
  }
   
  .ftr_blocks {
        width: 32%;
        display: flex;
        justify-content: left;
        align-items: center;
        text-align: left;
        margin: 0.15em auto;
        padding: 0.15em;
        box-sizing: border-box;
      } 
      @media (max-width: 600px) {
        .ftr_blocks {
          width: 100%;
          margin: 0.25em 0;
        }
      }
    
    #ftr dl{  
    padding: 0;
    margin: 0;
    }
    
    #ftr dl dt {
    color:#f8f7f7;
    font-size: 0.8em;
    }

    #ftr dl dd {
    background: #273b53;
    margin:0.45em;
    padding:0.5em 1em;
    font-size: 0.825em;
    border: 0.09em solid #4d77aa ;
    border-radius:  0.09em;
    }
    #ftr dl dd:hover{
    background: #30537e;
    }

    #ftr a {
      color: #cadaee;
      text-decoration: none;
    }
    
    #ftr a:hover {
      color: #ffcc66;
      text-decoration: underline;
    }
    
    .copyright {
    width: 100%;
    font-size: 1rem;
    margin: 1.25em 0 1em 0;
    text-align: center;
    color: #7c9ac1;
    }

/* Responsive Scaling System - NOW PLACED AT THE END */
@media (max-width: 48em) { /* Mid-tier - Tablet/Laptop */
    html { font-size: 14px; } /* Adjust global scaling */
}

@media (max-width: 32em) { /* Small screens - Mobile */
    html { font-size: 12px; } /* Further reduce size */

    #cnt_wrap {
        flex-direction: column; /* Force full vertical stacking */
    }

    .half_bx, .third_bx {
        flex: none;
        width: 100%; /* Stack vertically */
    }
}