/* Shared Win95-retro theme for CTF writeups, matching jadonkjones.github.io */

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

body {
    background: #008080;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 8px);
    font-family: 'VT323', monospace;
    font-size: 1.15rem;
    color: #000;
    padding: 20px;
}

a { color: #0000EE; }
a:visited { color: #551A8B; }

.page {
    max-width: 900px;
    margin: 0 auto;
    background: #c0c0c0;
    border: 2px solid #fff;
    border-right-color: #000;
    border-bottom-color: #000;
    box-shadow: 4px 4px 0 #000;
}

.titlebar {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    padding: 7px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; top: 0; z-index: 10;
}
.titlebar .btns span {
    display: inline-block; width: 16px; height: 14px;
    background: #c0c0c0; border: 1px solid #000;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
    text-align: center; line-height: 14px; margin-left: 3px; color: #000; font-size: 0.65rem;
}

.menubar {
    background: #c0c0c0; border-bottom: 1px solid #808080;
    padding: 5px 10px; font-size: 1rem; display: flex; gap: 18px; flex-wrap: wrap;
}
.menubar a { color: #000; text-decoration: none; }
.menubar a:hover { text-decoration: underline; }

.content { background: #fff; margin: 10px; border: 2px solid; border-color: #808080 #fff #fff #808080; padding: 20px 26px; }

hr.rainbow {
    border: none; height: 4px; margin: 20px 0;
    background: repeating-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet, red 200px);
}

header.hero { text-align: center; padding: 10px 0 20px; }
h1 { font-family: 'Press Start 2P', monospace; font-size: 1.4rem; color: #000080; margin-bottom: 10px; line-height: 1.6; }

h2 {
    font-family: 'Press Start 2P', monospace; font-size: 0.95rem; color: #fff;
    background: linear-gradient(90deg, #000080, #1084d0);
    padding: 8px 12px; margin: 30px 0 16px; display: flex; align-items: center; gap: 10px;
}
h2::before { content: "📁"; }

h3 { font-family: 'Press Start 2P', monospace; font-size: 0.8rem; color: #000080; margin: 20px 0 10px; }

p { margin-bottom: 12px; line-height: 1.5; }
ul.bullets, ol.steps { margin: 10px 0 14px 26px; }
ul.bullets li, ol.steps li { margin-bottom: 8px; line-height: 1.45; }

blockquote {
    background: #fff8ee; border: 1px solid #808080; border-left: 4px solid #000080;
    padding: 10px 16px; margin: 14px 0; font-style: italic; color: #333;
}

table.info { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
table.info td { border: 1px solid #808080; padding: 8px 10px; vertical-align: top; font-size: 1.1rem; }
table.info td.label { background: #dcdcdc; width: 140px; font-weight: bold; }

pre {
    background: #0a0a0a; color: #ccffcc; border: 2px solid; border-color: #404040 #fff #fff #404040;
    padding: 14px 16px; overflow-x: auto; margin: 14px 0; font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.95rem; line-height: 1.5;
}
code { font-family: 'Consolas', 'Courier New', monospace; }
p code, li code, td code {
    background: #eee; border: 1px solid #ccc; padding: 1px 5px; font-size: 0.95em; color: #a00;
}

.result-box {
    background: #000; color: #0f0; border: 2px inset #808080; padding: 12px 16px;
    font-family: 'Consolas', 'Courier New', monospace; margin: 14px 0; font-size: 1rem;
}

.tag {
    display: inline-block; font-size: 0.8rem; background: #000080; color: #fff;
    padding: 2px 8px; margin: 4px 4px 0 0;
}
.cat-crypto { background: #7a0d7a; }
.cat-forensics { background: #0d5c7a; }
.cat-rev { background: #7a4b0d; }
.cat-web { background: #0d7a3a; }
.cat-misc { background: #5c0d7a; }
.cat-pwn { background: #7a0d0d; }
.cat-osint { background: #7a6a0d; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 6px 0 16px; }
.card {
    background: #eee; border: 2px solid; border-color: #fff #808080 #808080 #fff;
    padding: 14px 16px; text-decoration: none; color: #000; display: block;
}
.card:hover { background: #e2eefc; }
.card h3 { font-size: 0.8rem; margin-bottom: 8px; }
.card .subline { color: #333; font-weight: bold; font-size: 1.05rem; }
.card .meta { font-size: 0.95rem; color: #555; margin-top: 6px; }

.chall-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.chip { background: #dcdcdc; border: 1px solid #fff; border-right-color: #808080; border-bottom-color: #808080; padding: 3px 10px; font-size: 0.95rem; }

footer.page-footer {
    text-align: center; padding: 24px; font-size: 1.1rem; color: #333;
    border-top: 2px solid #808080; margin-top: 10px;
}
.webring { font-size: 1rem; margin-top: 10px; }

@media (max-width: 640px) {
    body { padding: 10px; font-size: 1.05rem; }
    .content { padding: 14px 16px; margin: 8px; }
    .menubar { gap: 10px 16px; }
    h1 { font-size: 1.1rem; }
    .titlebar span:first-child { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}