/* GLOBAL RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #161925; /* pure black */
    font-family: Arial, sans-serif;
    color: #222;
	font-family: 'Inter', system-ui, sans-serif;
}

h1, h2, h3 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
}


/* --- HEADER / VIGNETTE --- */
.header {
    text-align: center;
    padding: 40px 0;
    background:
        radial-gradient(circle at center,
            rgba(0, 0, 0, 0.0) 0%,
            rgba(0, 0, 0, 0.55) 100%
        ),
        linear-gradient(
            to bottom,
            #2c304f,
            #232742
        );
    color: white;
}

.logo {
    font-size: 48px;
    letter-spacing: 2px;
}

/* --- NAVBAR --- */
.navbar {
    background: #bdbdbd;
    padding: 12px 0;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    box-shadow:
        inset 0 4px 0 #555,
        inset 0 -4px 0 #555;
}


.navbar ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 32px; /* row gap / column gap */
    padding: 0 16px;
}

.navbar li {
    white-space: nowrap;
}


.navbar a::before {
    content: "[ ";
}

.navbar a::after {
    content: " ]";
}

.navbar a.active {
    text-decoration: underline;
    font-weight: bold;
}


.navbar a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
    position: relative;
}

.navbar a:hover {
    text-decoration: underline;
}

/* --- PAGE LAYOUT --- */
.layout {
    display: flex;
    width: 100%;
    margin: 0;
}

/* SIDEBARS */
.sidebar {
    width: 200px;
    background: repeating-linear-gradient(
        45deg,
        #c7e6f5,
        #c7e6f5 10px,
        #b8d8e8 10px,
        #b8d8e8 20px
    ); /* Temporary crystal-ish pattern */
}

.sidebar.right {
    transform: scaleX(-1);
}


/* MAIN CONTENT */

.text-toggle {
    position: absolute;
    top: 3px;
    right: 11px;

    background: #bdbdbd;
    border: 2px solid #000;
    padding: 4px 8px;
    cursor: pointer;

    font-size: 14px;
    font-weight: bold;
}

.text-toggle .t-white {
    color: #fff;
    text-shadow: 0 0 1px #000;
}

.text-toggle .t-black {
    color: #000;
}

.text-toggle .arrows {
    color: #555;
}

/* Default (white text) */
.content,
.content-box {
  color: white;
}

/* Black text mode */
.text-black .content,
.text-black .content-box {
  color: black;
}



.content {
    flex: 1;
    background: #7f9fb8;
    padding: 30px;
    position: relative; /* THIS is the anchor */

    border-left: 2px solid #000;
    border-right: 2px solid #000;

    box-shadow:
        inset 6px 0 0 #555,
        inset -6px 0 0 #555,
        inset 8px 0 0 #000,
        inset -8px 0 0 #000;
}

/* CONTENT LINKS */
.content a {
    color: #1F90CC;            /* bright cyan-blue */
    text-decoration: underline;
	text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.content a:visited {
    color: #1F90CC;            /* keep same color */
}

.content a:hover {
    color: #2DA4EB;            /* lighter pop on hover */
}

.content a:active {
    color: #2bb8e6;
}


.content-column {
    flex: 1;
    background: #7f9fb8;
    padding: 30px;
    position: relative;

    border-left: 2px solid #000;
    border-right: 2px solid #000;

    box-shadow:
        inset 6px 0 0 #555,
        inset -6px 0 0 #555,
        inset 8px 0 0 #000,
        inset -8px 0 0 #000;
}

/* individual slabs */
.content-box {
    background: #7f9fb8;
    padding: 1.5rem;
}

.content-box a {
    color: #1F90CC;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.content-box a:visited { color: #1F90CC; }
.content-box a:hover { color: #2DA4EB; }
.content-box a:active { color: #2bb8e6; }


.content-box:not(:last-child) {
    border-bottom: 5px solid rgba(0,0,0,0.35);
}




code {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.content code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.content-box code {
  white-space: normal;
  overflow-wrap: anywhere;
}



.small-print {
    font-size: 0.60rem; /* adjust freely: 0.7–0.85 is common */
    opacity: 0.9;       /* optional: softer, still readable */
}



.footer {
    background: #bdbdbd;
    padding: 12px 16px;

    border-top: 2px solid #000;
    border-bottom: 2px solid #000;

    box-shadow:
        inset 0 4px 0 #555,
        inset 0 -4px 0 #555;

    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;

    justify-content: space-between;
    align-items: center;
}



.footer a {
    color: #000;
    text-decoration: none;
}



/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
    .layout {
        flex-direction: column;
    }
    .sidebar {
        display: none;
    }
	.footer {
        justify-content: center;
        text-align: center;
    }
}