:root {
     /* Nostalgic Brown Palette */
     --deep-brown: #5d4037; 
     --light-brown: #d7ccc8;
     --nostalgia-border: rgba(93, 64, 55, 0.3);
     --shadow: 0 10px 30px rgba(93, 64, 55, 0.15);
}

html, body {
     margin: 0;
     padding: 0;
     height: 100%;
     font-family: "Times New Roman", Times, serif;
     /* FIXED: Removed the white/cream tint so whimsy.jpg is clear */
     background-image: url('whimsy.jpg');
     background-size: cover;
     background-attachment: fixed;
     background-position: center;
     color: var(--deep-brown);
}

#container {
     max-width: 900px;
     margin: 20px auto;
}

#header {
     width: 860px; 
     height: 110px;
     margin: 0 auto 10px auto;
     /* FIXED: Transparent tan glass instead of solid white */
     background: rgba(215, 204, 200, 0.4);
     backdrop-filter: blur(15px);
     border: 2px solid var(--nostalgia-border);
     border-radius: 15px 15px 50px 15px;
     box-shadow: var(--shadow), inset 0 0 15px rgba(255,255,255,0.4);
     display: flex;
     align-items: center;
     justify-content: center;
}

.title {
    font-family: "Times New Roman", Times, serif;
    font-size: 42px;
    font-weight: bold;
    font-style: normal; /* Non-italic */
    color: var(--deep-brown); 
    text-shadow: 1px 1px 0px #ffffff;
    image-rendering: pixelated;
    text-rendering: optimizeSpeed;
    text-transform: none;
    background: none;
    -webkit-text-fill-color: initial;
}

#wrapper {
     margin: 0 auto;
     width: 860px;
}

#two-boxes {
     display: flex;
     flex-direction: row; 
     justify-content: space-between;
     width: 100%;
     margin-bottom: 10px;
}

.box-one, .box-two, .box-three, .box-four {
     /* FIXED: Transparent brown glass (0.15 opacity) for a clear look */
     background: rgba(93, 64, 55, 0.15); 
     backdrop-filter: blur(10px);
     border: 1px solid var(--nostalgia-border);
     border-radius: 12px;
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     overflow: auto;
}

/* Widths for side-by-side layout */
.box-one, .box-two { width: 420px; height: 200px; }
.box-three { width: 260px; height: 350px; }
.box-four { width: 585px; height: 350px; }

.section-title {
     /* FIXED: Transparent header bar */
     background: rgba(215, 204, 200, 0.5);
     padding: 8px;
     text-align: center;
     font-family: "Times New Roman", Times, serif;
     font-weight: bold;
     font-style: normal; /* Non-italic */
     border-bottom: 1px solid var(--nostalgia-border);
     color: var(--deep-brown);
}

.content { padding: 12px; }

.content p {
    color: var(--deep-brown);
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

.nav-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     padding: 10px;
}

button {
     font-family: "Times New Roman", Times, serif;
     font-weight: bold;
     font-style: normal;
     /* FIXED: Clean light brown button gradient */
     background: linear-gradient(to bottom, #ffffff 0%, #d7ccc8 100%);
     border: 1px solid var(--nostalgia-border);
     border-radius: 6px;
     padding: 5px 15px;
     cursor: pointer;
     box-shadow: 0 3px 0 rgba(93, 64, 55, 0.4);
}

button a {
     color: var(--deep-brown);
     text-decoration: none;
     font-weight: bold;
}

/* Mobile Responsiveness */
@media only screen and (max-width: 860px) {
     #two-boxes { flex-direction: column; align-items: center; }
     .box-one, .box-two, .box-three, .box-four { width: 95%; margin-bottom: 10px; }
}