/* ========================================
   RETRO 90s PERSONAL HOMEPAGE STYLESHEET
   ======================================== */

:root {
    --page-bg: #c0c0c0;
    --window-bg: #d4d0c8;
    --panel-bg: #f5f3ee;
    --panel-bg-alt: #ece9df;
    --ink: #222;
    --ink-soft: #555;
    --link: #0000ee;
    --link-visited: #551a8b;
    --link-hover: #ff0000;
    --bar-dark: #000080;
    --bar-light: #2b57d8;
    --line: #808080;
    --white: #fff;
}

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

body {
    font-family: "MS Sans Serif", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--page-bg);
}

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--link-visited); }
a:hover, a:active { color: var(--link-hover); }

img { border: 0; }

.top-banner {
    background: linear-gradient(90deg, var(--bar-dark) 0%, var(--bar-light) 55%, var(--bar-dark) 100%);
    color: #ffeb77;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 0;
    border-top: 1px solid #5f88ff;
    border-bottom: 2px solid #00004d;
}

.top-banner marquee { height: 18px; }

.main-table {
    width: 780px;
    max-width: calc(100% - 12px);
    margin: 10px auto;
    border-collapse: collapse;
    background: var(--window-bg);
    border: 2px solid;
    border-color: var(--white) var(--line) var(--line) var(--white);
}

.sidebar {
    width: 180px;
    background: var(--window-bg);
    border-right: 2px solid #9a9a9a;
    padding: 8px;
    vertical-align: top;
}

.sidebar-box {
    background: var(--panel-bg);
    border: 2px solid;
    border-color: var(--white) var(--line) var(--line) var(--white);
    margin-bottom: 10px;
}

.sidebar-title {
    background: linear-gradient(90deg, var(--bar-dark) 0%, var(--bar-light) 100%);
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 3px 6px;
    font-family: "MS Sans Serif", Tahoma, Verdana, Arial, sans-serif;
}

.nav-list { list-style: none; padding: 6px; }
.nav-list li { padding: 2px 0; border-bottom: 1px dotted #c2c2c2; }
.nav-list li:last-child { border-bottom: none; }

.nav-list a {
    text-decoration: none;
    color: var(--link);
    font-size: 12px;
    display: block;
    padding: 2px 4px;
}

.nav-list a:hover {
    background: #0033aa;
    color: #fff;
    text-decoration: none;
}

.small-text {
    font-size: 11px;
    color: var(--ink-soft);
    padding: 6px;
    line-height: 1.4;
}

.small-text a { color: #003399; font-size: 11px; }

.content {
    padding: 12px 16px;
    vertical-align: top;
    background: #faf9f5;
}

.page-header {
    text-align: center;
    margin-bottom: 12px;
    background: #efece3;
    border: 2px solid;
    border-color: var(--white) #b0b0b0 #b0b0b0 var(--white);
    padding: 7px 8px;
}

.page-header h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 30px;
    color: #001c73;
    margin-bottom: 4px;
    text-shadow: 1px 1px 0 #fff;
}

.subtitle {
    font-size: 11px;
    color: #555;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.page-meta {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

.fancy-hr {
    border: none;
    height: 2px;
    background: #001c73;
    margin: 8px 0;
}

.content-box {
    margin-bottom: 16px;
    border: 2px solid;
    border-color: var(--white) #9e9e9e #9e9e9e var(--white);
    background: var(--panel-bg);
}

.content-box h2 {
    background: var(--panel-bg-alt);
    border-bottom: 1px solid #a4a4a4;
    padding: 5px 8px;
    font-size: 14px;
    font-family: "MS Sans Serif", Tahoma, Verdana, Arial, sans-serif;
    color: #1b2d61;
}

.content-box p,
.content-box dl,
.content-box ul,
.content-box table { padding: 10px 12px; margin: 0; }
.content-box p + p { padding-top: 0; }

.quick-links {
    list-style: none;
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.quick-links li {
    display: table-cell;
    border-right: 1px solid #b7b7b7;
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
}

.quick-links li:last-child {
    border-right: none;
}

.pfp-frame {
    border: 2px solid;
    border-color: var(--white) #8c8c8c #8c8c8c var(--white);
    padding: 3px;
    background: #ece9d8;
    display: inline-block;
}

.pfp-frame img { display: block; border: 1px solid #444; }

.updates-table,
.tech-table,
.projects-table,
.blog-index-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 8px 0;
}

.updates-table td,
.updates-table th,
.tech-table td,
.tech-table th,
.projects-table td,
.projects-table th,
.blog-index-table td,
.blog-index-table th {
    padding: 5px 8px;
    border: 1px solid #c2c2c2;
    text-align: left;
    vertical-align: top;
    background: #fcfbf8;
}

.table-header th,
.projects-table .table-header th,
.blog-index-table .table-header th {
    background: #1f3f8c;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
}

.alt-row { background: #f0efea; }
.blog-index-table tr:hover { background: #fff8dc; }

.project-list { padding: 8px 10px !important; }
.project-list dt { font-weight: bold; margin-top: 6px; font-size: 13px; }
.project-list dt:first-child { margin-top: 0; }
.project-list dd { margin-left: 16px; color: #555; font-size: 12px; margin-bottom: 4px; }

.blog-list { list-style: disc; padding-left: 28px !important; font-size: 12px; }
.blog-list li { margin-bottom: 3px; }
.date-tag { color: #777; font-size: 11px; }

.skills-list { list-style: square; padding-left: 28px !important; font-size: 12px; columns: 2; }
.skills-list li { margin-bottom: 2px; }

.footer {
    width: 780px;
    max-width: calc(100% - 12px);
    margin: 0 auto 16px;
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: #666;
    background: var(--window-bg);
    border: 2px solid;
    border-color: var(--white) #9a9a9a #9a9a9a var(--white);
}

.footer a { color: #003399; font-size: 11px; }

.footer-nav {
    margin-bottom: 5px;
}

.footer-nav a {
    margin: 0 6px;
    font-weight: bold;
}

.visitor-counter {
    font-family: "Courier New", monospace;
    background: #000;
    color: #0f0;
    padding: 2px 8px;
    border: 1px inset #808080;
    font-size: 12px;
    font-weight: bold;
}

.about-section { margin-bottom: 16px; }

.gallery-table img,
.comparison-table img {
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 2px;
    background: #ece9d8;
}

.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table td { width: 50%; padding: 8px; text-align: center; vertical-align: top; }

.links-section { margin-bottom: 12px; }
.links-section h3 {
    font-size: 13px;
    color: #001c73;
    border-bottom: 1px solid #274ea9;
    padding-bottom: 3px;
    margin: 8px 10px 4px;
}

.links-section ul { padding: 4px 10px 8px 28px; font-size: 12px; }
.links-section li { margin-bottom: 3px; }

.breadcrumb { font-size: 11px; color: #666; padding: 4px 0 8px; }
.breadcrumb a { font-size: 11px; }

.retro-button {
    display: inline-block;
    background: #ece9d8;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 3px 12px;
    font-size: 12px;
    font-family: "MS Sans Serif", Tahoma, Verdana, Arial, sans-serif;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

.retro-button:hover { background: #d4cfbe; text-decoration: none; color: #333; }
.retro-button:active { border-color: #808080 #fff #fff #808080; }

.status-bar {
    background: #ece9d8;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 3px 8px;
    font-size: 11px;
    color: #333;
    margin-top: 8px;
}

.pixel-rule,
.blink,
.construction { display: none; }

.mobile-after-content {
    display: none;
}

@media (max-width: 860px) {
    .top-banner {
        font-size: 11px;
    }

    .top-banner marquee {
        height: 16px;
    }

    .main-table,
    .main-table tbody,
    .main-table td {
        display: block;
        width: 100%;
    }

    .main-table tr {
        display: flex;
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        padding: 6px;
        border-right: none;
        border-bottom: 2px solid #a9a9a9;
    }

    .content {
        padding: 10px;
    }

    .sidebar .secondary-box {
        display: none;
    }

    .mobile-after-content {
        display: block;
        margin-top: 10px;
    }

    .page-header h1 {
        font-size: 25px;
    }

    .subtitle {
        letter-spacing: 1px;
    }

    .quick-links,
    .quick-links li {
        display: block;
        width: 100%;
    }

    .quick-links li {
        border-right: none;
        border-bottom: 1px solid #b7b7b7;
        text-align: left;
        padding: 7px 8px;
    }

    .quick-links li:last-child {
        border-bottom: none;
    }

    .intro-table,
    .intro-table tbody,
    .intro-table tr,
    .intro-table td {
        display: block;
        width: 100% !important;
    }

    .intro-table td:first-child {
        text-align: center;
        padding-bottom: 0;
    }

    .projects-table,
    .updates-table,
    .blog-index-table,
    .tech-table {
        font-size: 11px;
    }

    .footer-nav a {
        display: inline-block;
        margin: 2px 5px;
    }

    .footer { margin-bottom: 12px; }
    .skills-list { columns: 1; }
}