@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

:root {
    --paper-color: rgb(255, 255, 224); /* Define the variable */
}

body {
    font-family: 'RobotoMono Nerd Font Mono', 'Roboto Mono', monospace;
    margin: 0;
    padding: 0;
    background-color: #222;
    color: #bbb; /* Ensure text is readable on dark background */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    outline: 1px solid red; /* Outline for visualization */
}
.content-wrapper {
    width: 60%;
    margin: 0 auto;
    min-width: 800px; /* Set minimum width to 800px */
    padding: 1rem; /* Add padding inside the border */
    flex: 1;
    outline: 1px solid orange; /* Outline for visualization */
}

header, footer {
    background-color: #222;
    color: #fff;
    text-align: center;
    padding: 0; /* Remove padding */
    outline: 1px solid var(--paper-color); /* Use the variable */
    position: relative;
    display: flex;
    justify-content: center;
    height: 50px; /* Set a fixed height */
}

header {
    align-items: flex-start; /* Align text at the very top */
}

footer {
    align-items: flex-end; /* Align text at the very bottom */
}

header::before, footer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--content-width); /* Dynamic width based on content-wrapper */
    height: 0;
    border-top: 0.2rem linen rgb(255, 255, 255);
    transform: translateX(-50%);
}

header span, footer span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    background-color: #222;
    padding: 0 5px;
    color: #fff;
}

header span {
    bottom: 0; /* Align span at the bottom of the header */
}

footer span {
    top: 0; /* Align span at the top of the footer */
}


nav {
    margin: 1rem;
    text-align: center;
    outline: 1px solid green; /* Outline for visualization */
}
nav a {
    margin: 0 1rem;
    text-decoration: none;
    color: #fff; /* Ensure links are readable on dark background */
    outline: 1px solid rgb(0,195,255); /* Outline for visualization */
}
section {
    padding: 2rem;
    margin: 2rem 0; /* Add spacing above and below each section */
    outline: 1px solid rgb(212, 0, 255); /* Outline for visualization */
    background-color: #181818; /* Darker inner background */
    /* box-shadow: 0 4px 8px rgba(212, 0, 255, 0.2);  Lighter drop shadow */
}