/* =========================================================
   ARTHUR'S PERSONAL HOMEPAGE (EST. MARCH 2001)
   Optimized for Netscape Communicator 4.7 & IE 5.5
   Resolution: 800x600 pixels (High Color 16-bit)
   ========================================================= */

body {
    background-color: #00002b;
    background-image: radial-gradient(#112255 15%, transparent 16%), radial-gradient(#223377 15%, transparent 16%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    color: #ffffff;
    font-family: "Times New Roman", Times, serif;
    margin: 10px;
    padding: 0;
}

/* 2001 Link Styles */
a:link { color: #00ffff; text-decoration: underline; }
a:visited { color: #ff99ff; text-decoration: underline; }
a:hover { color: #ffff00; background-color: #000088; text-decoration: underline; }
a:active { color: #ff0000; }

/* Classic Beveled Container */
.main-table {
    width: 780px;
    margin: 0 auto;
    background-color: #000044;
    border: 3px outset #9999cc;
    box-shadow: 4px 4px 0px #000000;
}

.header-banner {
    background: linear-gradient(90deg, #800000, #ff0000, #ff6600, #ffff00, #009900, #0000ff, #800080);
    padding: 3px;
    text-align: center;
    border: 2px inset #ffffff;
}

.header-inner {
    background-color: #000022;
    padding: 10px;
    border: 1px solid #ffcc00;
}

h1.vintage-title {
    font-family: "Impact", "Arial Black", sans-serif;
    color: #ffff00;
    text-shadow: 2px 2px #ff0000, 4px 4px #000000;
    margin: 5px 0;
    font-size: 30px;
    letter-spacing: 1px;
}

h2.sub-title {
    font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
    color: #00ffcc;
    margin: 2px 0 8px 0;
    font-size: 16px;
    font-weight: normal;
}

/* Left Navigation Sidebar */
.sidebar {
    width: 200px;
    vertical-align: top;
    background-color: #00002b;
    border-right: 2px groove #666699;
    padding: 8px;
}

.nav-box {
    border: 2px outset #cccccc;
    background-color: #1a1a55;
    padding: 6px;
    margin-bottom: 12px;
}

.nav-title {
    background-color: #000080;
    color: #ffffff;
    font-family: "Arial", sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 6px;
    border: 1px inset #ffffff;
    margin-bottom: 6px;
    text-align: center;
    letter-spacing: 1px;
}

.nav-links {
    list-style-type: square;
    padding-left: 20px;
    margin: 5px 0;
    font-family: "Arial", sans-serif;
    font-size: 12px;
    line-height: 1.6;
}

.nav-links li {
    margin-bottom: 4px;
}

/* Content Area */
.content-area {
    vertical-align: top;
    padding: 14px 18px;
    background-color: #000038;
}

.card-box {
    border: 2px groove #8888aa;
    background-color: #000028;
    padding: 12px;
    margin-bottom: 14px;
}

.card-box-alert {
    border: 3px dashed #ff3333;
    background-color: #330000;
    padding: 10px;
    margin-bottom: 14px;
}

/* Animated GIF Emulations */
.construction-bar {
    background: repeating-linear-gradient(
        -45deg,
        #ffcc00,
        #ffcc00 12px,
        #000000 12px,
        #000000 24px
    );
    height: 14px;
    border: 1px solid #000000;
    margin: 10px 0;
}

/* Hit Counter */
.hit-counter {
    display: inline-block;
    background-color: #000000;
    border: 2px inset #888888;
    padding: 2px 6px;
    font-family: "Courier New", monospace;
    font-size: 14px;
    font-weight: bold;
    color: #00ff00;
    letter-spacing: 2px;
}

/* Webring Box */
.webring-box {
    border: 2px outset #888888;
    background-color: #111144;
    padding: 8px;
    text-align: center;
    font-family: "Arial", sans-serif;
    font-size: 11px;
    margin-top: 15px;
}

/* Vintage Button */
.win-button {
    font-family: "MS Sans Serif", "Tahoma", sans-serif;
    font-size: 12px;
    background-color: #c0c0c0;
    color: #000000;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    padding: 3px 8px;
    cursor: pointer;
}

.win-button:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

/* Audio Player Widget */
.midi-player {
    background-color: #222244;
    border: 2px inset #9999cc;
    padding: 6px;
    margin-bottom: 10px;
    text-align: center;
    font-family: "Courier New", monospace;
    font-size: 11px;
}

/* Badges / Buttons (88x31 px style) */
.badge-88x31 {
    display: inline-block;
    width: 88px;
    height: 31px;
    border: 1px solid #666666;
    background: #202020;
    font-family: "Arial", sans-serif;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    color: #ffffff;
    vertical-align: middle;
    margin: 2px;
    box-sizing: border-box;
}

/* Blinking effect */
.blink {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% { opacity: 0; }
}

/* Surreal Glitch Effects */
.glitch-text {
    position: relative;
    color: #ffffff;
}

.glitch-active {
    animation: textFlicker 0.15s infinite;
    color: #ff00ff !important;
    text-shadow: 2px 0 #00ffff, -2px 0 #ff0000 !important;
}

@keyframes textFlicker {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-1px, -1px); }
    60% { transform: translate(2px, 0); }
    80% { transform: translate(1px, -2px); }
    100% { transform: translate(0); }
}

.crt-scanlines {
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.4) 50%
    ), linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.05),
        rgba(0, 255, 0, 0.02),
        rgba(0, 0, 255, 0.05)
    );
    background-size: 100% 3px, 6px 100%;
}