/* miranda.css - Styles for the Miranda section of huxley.net
   Replaces the inline <style> blocks duplicated across all miranda/ pages.
   Preserves the dark gray + red/maroon color scheme and 2-column table layout.
*/

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

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

/* ---- Link styles ---- */
a:link { color: #660000; text-decoration: none; }
a:visited { text-decoration: none; color: #003366; }
a:hover { text-decoration: underline; color: #000066; }
a:active { text-decoration: none; }

/* ---- Header ---- */
.style2 {
    font-size: xx-large;
    color: #999999;
    font-family: "Courier New", Courier, monospace;
}

.style3 {
    font-size: large;
    font-weight: bold;
    color: #660000;
}

/* ---- Navigation ---- */
.style4 {
    font-size: large;
    color: #000000;
    font-family: "Courier New", Courier, monospace;
}

.style7 { color: #000000; }

.style8 {
    font-size: large;
    color: #000000;
}

.style9 { font-size: x-large; }

.style13 { font-family: "Courier New", Courier, monospace; }

.style14 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
}

.style15 { color: #999999; }

/* ---- Cell padding (replaces cellpadding="10" stripped during HTML5 conversion) ---- */
td {
    padding: 10px;
}

/* ---- Table layout ---- */
.miranda-table {
    width: 762px;
    max-width: 100%;
    border: 0;
    margin: 0 auto;
    border-collapse: collapse;
}

.miranda-header {
    background-color: #660000;
    height: 100px;
    padding: 10px;
}

.miranda-nav {
    width: 131px;
    text-align: center;
    vertical-align: top;
    background-color: #666666;
    padding: 10px;
}

.miranda-content {
    vertical-align: top;
    background-color: #999999;
    padding: 10px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .miranda-table {
        width: 100%;
    }

    .miranda-table,
    .miranda-table tbody,
    .miranda-table tr,
    .miranda-table td,
    .miranda-table th {
        display: block;
        width: 100%;
    }

    .miranda-nav {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        padding: 8px;
    }

    .miranda-nav p {
        margin: 2px 6px;
    }

    .miranda-content {
        width: 100%;
    }

    .miranda-header h1 {
        font-size: large;
    }

    .style2 {
        font-size: x-large;
    }

    .style9 {
        font-size: large;
    }
}