*{
margin: 0;
padding: 0;
}
body{
font-size: 16px;
font-family: 'Courier New', Courier, monospace;    
background:#6f93bb url('../imgs/BGs/bg-tile.svg');
background-repeat: repeat-x;
background-position: bottom;
margin: 0;
padding: 1em 0;
}

#wrapper{
max-width: 51.25em;  /* Set maximum width for large screens */
display: flex;
flex-wrap: wrap;  
justify-content: left;
align-items: flex-end;
background-color: #fff;
border: 0.0625em solid #010101;
border-radius: 0.75em 0.75em 0 0; 
margin: 0 auto;
padding:0;
}

#top_frame {
width: 100%;
height: 3.25em;
background: linear-gradient(to bottom, #122c3b, #2a6180);
border-radius: 0.85em 0.85em 0 0;
display: flex;
align-items: center;
position: relative;
padding-left: 1.5em; /* Keeps space for tab */
}

#top_frame::after {
content: "";
position: absolute;
right: 1.2em;
top: 50%;
transform: translateY(-50%);
width: 4.65em; 
height: 4.65em;
background: url('../imgs/icons/frame_min-max_icon.svg') no-repeat center;
background-size: contain;
}

.browser_tab {
font-size: 1em;
height: 1.75em;
background: #587080;
border: 0.085em solid #c5d8e3;
border-radius: 0.25em;
white-space: nowrap; /* Prevents wrapping, keeps it inline */
margin: 0.8em 0 0 0.15em;
padding: 0;
box-shadow: 3px -1px 5px rgba(139, 179, 219, 0.6);
}

#bnr {
height: 3em;
width: 100%;
background: linear-gradient(to bottom, #83a6ba, #96c1da);
display: flex;
align-items: center;
border-top:0.25em solid  #5a7280;
margin:0;
padding:0;
}

#faux_nav{
display: flex;
align-items: center;
gap: 0.75em; /* Spacing between icons */
margin-left: 0.75em; /* Keeps them aligned with address bar */
}

.nav_icon {
width: 1.12em; /* Consistent icon size */
height: 1.12em;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Background images */
.back { background-image: url('../imgs/icons/arrow_left.svg'); }
.forward { background-image: url('../imgs/icons/arrow_right.svg'); }
.refresh { background-image: url('../imgs/icons/arrow_refresh.svg'); }
.home { background-image: url('../imgs/icons/house_home.svg'); }

#addy_bar {
flex-grow: 1;
max-width: 52%; 
overflow:hidden;
background: #fff;
border: 0.085em solid #c5d8e3;
border-radius: 0.45em;
margin:0 0 0 0.8em;
padding: 0.2em 0 0.2em 0.25em;
white-space: nowrap;
}

#cnt_wrap {
width: 100%; /* This ensures it takes the full width available */
box-sizing: border-box; /* This makes sure padding doesn't add to the width */
padding: 1em 2%;
margin: auto; 
display: flex; /* Ensures flex layout */
flex-wrap: wrap; /* Allows children to wrap */
justify-content: center; /* Centers children horizontally */
}

/* styles for the full-width box */
.full_bx {
width: 100%;
margin:0;
padding:0;
}

/* granular styles for full width elements */
.mid_pg01, .mid_pg02{
display: flex;
flex-wrap: wrap; /* Allows wrapping if needed */
justify-content: space-between; /* Spreads them out evenly */
align-items: center; /* Aligns them vertically */
}

.mid_pg01 {
background-color: #091102;
margin: 0 auto 1.0em auto;
padding: 1.25em;
border: 0.15em solid #4a4a4a;
border-radius: 12px;
box-shadow:2px -1px 12px #6d7592;; /* Soft outer glow */
}
.mid_pg01 h1, h2, h3{
color:white;
font-size:110%;
margin:0;
padding:0;
}
.mid_pg01 p{
color:whitesmoke;
line-height: 1.5em;
text-indent:.1em;
margin:0.65em 0 0 0;
padding:0;
}

.mid_pg02{
color:whitesmoke;
background-color: #4a4a4a;
border: 0.15em solid #4a4a4a;
border-radius: 12px;
box-shadow:2px -1px 12px #6d7592;; /* Soft outer glow */
Margin:0 auto 1.0em auto;
padding: 1.25em;
}
.mid_pg02 h1, h2, h3{
color:white;
font-size:110%;
margin:0;
padding:0;
}
.mid_pg02 p{
color:#fff;
line-height: 1.75em;
text-indent:.4em;
text-shadow: 1px 1px 4px rgba(206, 196, 190, 0.5);
margin: 0.65em 0 0 0;
padding:0;
}

.mid_pg03 {
width: 92%;
color: #EADDC8;
background: #82A3B8 url('../imgs/icons/if_else-icon.svg') no-repeat center left 0.9em;
background-size: 14%; /* Keeps it scaled properly */
border: 0.065em solid rgb(103, 133, 168, 0.7);
border-radius: 12px;
margin: 0 auto;
padding: 0.75em;
}

/*  .mid_pg04 and 05 - lives on contact_form.css */

#contact_btn {
display: flex;
width: 13em;
color: #122cbe;
font-size:1.5em;
font-weight: bold;
background: #D9AC84 url('../imgs/icons/email.svg') no-repeat center right 0.75em;
background-size: 2.25em; /* Adjust if needed */
border: 0.15em solid rgba(103, 133, 168, 0.7);
border-radius: 0.5em;
text-align: left;
cursor: pointer;
margin: 0 auto;
padding: 0.75em 0 0.75em 0.75em;
text-decoration: none;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6), inset 1px 1px 4px rgba(255, 255, 255, 0.3);
transition: all 0.2s ease-in-out;
}

#contact_btn:hover {
color: #0f5c05;
background: #e0b77e url('../imgs/icons/email.svg') no-repeat center right 0.75em;
border-color: rgba(103, 133, 168, 0.9);
box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.7), inset 2px 2px 6px rgba(255, 255, 255, 0.4);
transform: scale(1.05);
}


/* styles for less than full width elements */
.sm_bx2 { width: 42%; }
.sm_bx3 { width: 30%; }
.sm_bx2, .sm_bx3 {
display: flex;
justify-content: left;
align-items: center;
margin: 0 auto;
}
/* styles for less than full width elements */
.sm_bx2 { width: 42%; }
.sm_bx3 { width: 30%; }


/* granular for less than full width elements */

.sm_bx-001 { /* our footer cells */
text-align: left;
margin:0;
padding: 0.25em;
}

@media (max-width: 600px) { 
.mid_pg02 {
flex-direction: column; /* Makes items stack vertically */
align-items: center; /* Centers them when stacked */
}
.sm_bx2, .sm_bx3 {
width: 100%; /* Each takes full width when stacked */
}
}

#ftr {
width: 100%;
background: #101f31;
color: #b0c4de;
display: flex;
flex-wrap: wrap;
justify-content: space-around; /* Keeps it spaced evenly */
align-items: flex-start;
padding: 1em;
}

#ftr dl{
padding: 0;
margin: 0;
}

#ftr dl dt {
color:#f8f7f7;
}
#ftr dl dd {
background: #1d2d41;
margin:0.45em;
padding:0.5em 1em;
}
#ftr dl dd:hover{
background: #30537e;
}

.copyright {
width: 100%;
font-size: 0.85em;
margin-top: 1.5em;
text-align: center;
color: #7c9ac1;
}