/* Mean Black Cat Blues - Блюзовая Архаика */
/* Faithful recreation of the original dark-blue prewar blues site */

*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: #00008B;
    color: #00BFFF;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

a         { color: #FFFAF0; }
a:visited { color: #A4C8F0; }
a:hover   { color: #FFD700; }
a:active  { color: #F0E68C; }

/* Header strip */
#site-header {
    background-color: #00008B;
    text-align: center;
    padding: 8px 0 4px;
    border-bottom: 1px solid #1a1a9a;
}
#site-header img { display: inline-block; }

/* Two-column layout */
#layout {
    display: flex;
    max-width: 820px;
    margin: 0 auto;
    min-height: calc(100vh - 90px);
}

/* Left nav */
#nav {
    width: 130px;
    min-width: 130px;
    padding: 8px 4px 8px 8px;
    border-right: 1px solid #1a1a9a;
    background-color: #000075;
}
#nav p { margin: 2px 0; text-align: center; }
#nav img { display: block; margin: 1px auto; }
#nav a { color: #FFFBF0; text-decoration: none; }
#nav a:visited { color: #8080FF; }
#nav a:hover { color: #FFD700; }

/* Content area */
#content {
    flex: 1;
    padding: 8px 12px;
    overflow-x: auto;
}

/* Responsive: stack on narrow screens */
@media (max-width: 600px) {
    #layout { flex-direction: column; }
    #nav {
        width: 100%;
        min-width: unset;
        border-right: none;
        border-bottom: 1px solid #1a1a9a;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }
    #nav p { display: inline-block; margin: 2px; }
}

/* Content styling */
h1, h2, h3, h4 { color: #00BFFF; }
hr { border-color: #1a1a9a; }
table { color: #00BFFF; }

/* Audio controls */
audio { filter: invert(0.85) hue-rotate(180deg); vertical-align: middle; }

/* Image borders */
img[border="3"] { border: 3px solid #A4C8F0; }