/* Authentic Personal Website CSS - Inspired by Real Retro Sites */

:root {
   --main-bg: #f8f5f2;
   --sidebar-bg: #e8e3d7;
   --accent-pink: #d4a574;
   --accent-purple: #b8a5d1;
   --text-dark: #2d2d2d;
   --text-light: #654321;
   --border-color: #c8b5a8;
}

body {
   margin: 0;
   padding: 5px;
   font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif;
   background: var(--main-bg) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><circle cx="3" cy="3" r="0.5" fill="%23e8e3d7" opacity="0.4"/><circle cx="18" cy="10" r="0.5" fill="%23d4a574" opacity="0.3"/><circle cx="10" cy="20" r="0.5" fill="%23c8b5a8" opacity="0.5"/><rect x="0" y="12" width="25" height="0.5" fill="%23e8e3d7" opacity="0.2"/></svg>');
   color: var(--text-dark);
   line-height: 1.3;
   cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M2 2l4 12 2-4 4-2z" fill="%23654321"/></svg>') 2 2, auto;
}

/* Custom selection styling */
::selection {
   background: var(--accent-pink);
   color: white;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Links with personality */
a {
   color: #8B4513;
   text-decoration: underline;
   text-decoration-style: wavy;
   cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M2 2l4 12 2-4 4-2z" fill="%23d4a574"/></svg>') 2 2, pointer;
   transition: all 0.2s ease;
}

a:hover {
   color: var(--accent-pink);
   text-decoration-style: solid;
   transform: translateY(-1px);
}

a:visited {
   color: #A0522D;
}

/* Remove modern styling from tables */
table {
   border-collapse: separate;
   border-spacing: 0;
}

/* Navigation links in sidebar */
.nav-link {
   color: #FFFF00;
   text-decoration: underline;
   font-weight: bold;
   font-size: 12px;
   display: block;
   margin: 3px 0;
}

.nav-link:hover {
   color: #FFFFFF;
   background-color: #003399;
   text-decoration: none;
}

.nav-link:visited {
   color: #FFFF99;
}

/* Content area styling */
#content-area {
   padding: 10px;
   min-height: 500px;
}

.page-content {
   width: 100%;
}

/* Make sure images don't break layout */
img {
   max-width: 100%;
   height: auto;
}

/* Retro form elements if needed */
input, textarea, select {
   border: 2px inset #CCCCCC;
   background-color: white;
   font-family: Arial, sans-serif;
   font-size: 12px;
}

/* Retro button styling */
button {
   border: 2px outset #CCCCCC;
   background-color: #CCCCCC;
   font-family: Arial, sans-serif;
   font-size: 12px;
   padding: 2px 6px;
   cursor: pointer;
}

button:active {
   border: 2px inset #CCCCCC;
}

/* Retro scrollbar for webkit browsers */
::-webkit-scrollbar {
   width: 16px;
}

::-webkit-scrollbar-track {
   background-color: #CCCCCC;
   border: 1px inset #CCCCCC;
}

::-webkit-scrollbar-thumb {
   background-color: #999999;
   border: 1px outset #999999;
}

::-webkit-scrollbar-thumb:hover {
   background-color: #777777;
}

/* Retro link styling for content */
a {
   color: #0000FF;
   text-decoration: underline;
}

a:visited {
   color: #800080;
}

a:hover {
   color: #FF0000;
}

/* Retro list styling */
ul {
   list-style-type: disc;
   margin-left: 20px;
}

ol {
   list-style-type: decimal;
   margin-left: 20px;
}

/* Retro horizontal rule */
hr {
   border: none;
   border-top: 2px solid #0066CC;
   height: 2px;
   background-color: #0066CC;
}

/* Make sure text in font tags displays properly */
font {
   display: inline;
}

/* Retro paragraph spacing */
p {
   margin: 10px 0;
   line-height: 1.4;
}

/* Bold text styling */
b, strong {
   font-weight: bold;
}

/* Italic text styling */
i, em {
   font-style: italic;
}

/* Center alignment */
center {
   text-align: center;
   display: block;
   margin: 10px 0;
}

/* Basic responsive behavior for very small screens */
@media (max-width: 600px) {
   table[width="100%"] {
      width: 100% !important;
   }
   
   td[width="200"] {
      width: 100% !important;
      display: block;
   }
   
   .nav-link {
      display: inline-block;
      margin: 2px 5px;
   }
}

/* Ensure proper display of nested tables */
table table {
   width: 100%;
}

/* Retro selection styling */
::selection {
   background-color: #0066CC;
   color: white;
}

::-moz-selection {
   background-color: #0066CC;
   color: white;
}

/* Animated GIF styling - let them be chunky and pixelated */
img[src$=".gif"] {
   image-rendering: pixelated;
   image-rendering: -moz-crisp-edges;
   image-rendering: crisp-edges;
}

/* Ensure proper spacing in sidebar sections */
td[bgcolor="#0066CC"] {
   padding: 5px;
}

/* Make sure font tags work properly */
font[face] {
   font-family: inherit;
}

font[size="1"] { font-size: 10px; }
font[size="2"] { font-size: 12px; }
font[size="3"] { font-size: 14px; }
font[size="4"] { font-size: 18px; }
font[size="5"] { font-size: 24px; }

font[color] {
   color: inherit;
}

/* Retro table border styling */
table[border="2"] {
   border: 2px outset #CCCCCC;
}

table[border="1"] {
   border: 1px solid black;
}

/* Cell padding and spacing */
td {
   vertical-align: top;
}

/* Ensure proper alignment */
td[align="center"] {
   text-align: center;
}

td[align="left"] {
   text-align: left;
}

td[align="right"] {
   text-align: right;
}

/* Authentic Retro Web Aesthetic - Mixed Visual Elements */

/* Left navigation rail - classic retro blue with personality */
td[bgcolor="#0066CC"] {
   background: #4169E1;
   border: 2px outset #6495ED;
   box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
   position: relative;
}

td[bgcolor="#0066CC"]::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><circle cx="2" cy="2" r="0.5" fill="%23B0C4DE" opacity="0.4"/><circle cx="10" cy="7" r="0.5" fill="%23E6E6FA" opacity="0.3"/><circle cx="6" cy="12" r="0.5" fill="%23F0F8FF" opacity="0.5"/></svg>');
   pointer-events: none;
}

td[bgcolor="#003399"] {
   background: #191970;
   border: 2px inset #4169E1;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
   box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
}

/* Main content area - clean but textured */
td[bgcolor="#CCCCCC"] {
   background: #F5F5F5 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="3" cy="3" r="0.5" fill="%23E0E0E0" opacity="0.3"/><circle cx="15" cy="10" r="0.5" fill="%23D3D3D3" opacity="0.2"/><circle cx="8" cy="16" r="0.5" fill="%23DCDCDC" opacity="0.4"/></svg>');
   border: 2px ridge #C0C0C0;
   box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

/* Right personality rail - soft pastels with character */
td[bgcolor="#FF6699"] {
   background: #DDA0DD;
   border: 2px inset #DA70D6;
   box-shadow: inset 0 0 8px rgba(221,160,221,0.4);
   position: relative;
}

td[bgcolor="#FF6699"]::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><circle cx="3" cy="3" r="0.5" fill="%23F0E68C" opacity="0.4"/><circle cx="12" cy="8" r="0.5" fill="%23FFB6C1" opacity="0.3"/><circle cx="7" cy="14" r="0.5" fill="%23E6E6FA" opacity="0.5"/></svg>');
   pointer-events: none;
}

td[bgcolor="#FF3366"] {
   background: #BA55D3;
   border: 2px outset #DA70D6;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
   box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

tr[bgcolor="#0066CC"] {
   background-color: #0066CC;
}

tr[bgcolor="#FF6600"] {
   background-color: #FF6600;
}

tr[bgcolor="#00CC00"] {
   background-color: #00CC00;
}

tr[bgcolor="#CC0066"] {
   background-color: #CC0066;
}

tr[bgcolor="#9900CC"] {
   background-color: #9900CC;
}

tr[bgcolor="#FF3300"] {
   background-color: #FF3300;
}

tr[bgcolor="#006600"] {
   background-color: #006600;
}

/* Ensure images align properly */
img[align="left"] {
   float: left;
   margin-right: 10px;
   margin-bottom: 5px;
}

img[align="right"] {
   float: right;
   margin-left: 10px;
   margin-bottom: 5px;
}

/* Clear floats */
br[clear="all"] {
   clear: both;
}

/* Retro cursor styles */
a, button {
   cursor: pointer;
}

/* Custom personality badges - more organic and handcrafted */
.custom-badge {
   background: linear-gradient(45deg, #ffeb3b 0%, #ffc107 100%);
   color: #2d2d2d;
   border: 2px outset #ffeb3b;
   padding: 3px 8px;
   margin: 3px 2px;
   font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif;
   font-size: 11px;
   font-weight: bold;
   display: inline-block;
   text-align: center;
   min-width: 50px;
   transform: rotate(-1deg);
   box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
   text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.custom-badge:nth-child(2n) {
   transform: rotate(1deg);
   background: linear-gradient(45deg, #4caf50 0%, #8bc34a 100%);
   border-color: #4caf50;
}

.custom-badge:nth-child(3n) {
   transform: rotate(-0.5deg);
   background: linear-gradient(45deg, #ff9800 0%, #ffc107 100%);
   border-color: #ff9800;
}

.custom-badge:hover {
   transform: rotate(0deg) scale(1.05);
   box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
}

/* Authentic retro typography mixing */
h1, h2, h3 {
   font-family: "Impact", "Arial Black", sans-serif;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
   letter-spacing: 1px;
}

/* Navigation links with more personality */
.nav-link {
   color: #ffff88;
   text-decoration: none;
   font-weight: bold;
   font-size: 13px;
   display: block;
   margin: 4px 2px;
   padding: 2px 4px;
   border-radius: 3px;
   font-family: "Trebuchet MS", Arial, sans-serif;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
   transition: all 0.2s ease;
}

.nav-link:hover {
   color: #ffffff;
   background: rgba(255,255,255,0.2);
   text-decoration: underline;
   transform: translateX(2px);
}

/* Add visual texture and depth */
table[border="2"] {
   border: 3px ridge #d4c8b8;
   box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
   background: #faf7f2;
}

/* Organic spacing and imperfect alignment */
#content-area {
   padding: 15px 12px;
   min-height: 500px;
   transform: rotate(0.1deg);
}

/* Make visitor counter more authentic */
font[face="Courier New"] {
   font-family: "Courier New", "Lucida Console", monospace;
   background: #000;
   color: #00ff00;
   padding: 2px 4px;
   border: 1px inset #333;
   text-shadow: 0 0 5px #00ff00;
}

/* Authentic widget styling - decorative and organic */

/* Currently section - notebook style */
.currently-section {
   background: #f9f6f1 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><circle cx="5" cy="5" r="1" fill="%23e8e3d7" opacity="0.4"/><circle cx="20" cy="15" r="1" fill="%23ded9cd" opacity="0.3"/><circle cx="10" cy="25" r="1" fill="%23e5e0d4" opacity="0.5"/></svg>');
   border: 2px dashed #c8b5a8;
   border-radius: 8px;
   padding: 8px;
   margin: 5px 0;
   transform: rotate(-0.5deg);
   box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
   position: relative;
}

.currently-section::before {
   content: "✦";
   position: absolute;
   top: -5px;
   right: -5px;
   color: #d4a574;
   font-size: 16px;
   transform: rotate(15deg);
}

/* Recent updates - bulletin board style */
.updates-section {
   background: #f5f2ed;
   border: 3px ridge #d4c8b8;
   border-radius: 6px;
   padding: 10px;
   margin: 8px 0;
   transform: rotate(0.3deg);
   box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
   position: relative;
}

.updates-section::after {
   content: "📌";
   position: absolute;
   top: -8px;
   left: 10px;
   font-size: 14px;
   transform: rotate(-20deg);
}

/* Console section - display case style */
.console-section {
   background: linear-gradient(135deg, #2a3d5a 0%, #1a2d4a 100%);
   border: 3px inset #4a5d7a;
   border-radius: 8px;
   padding: 8px;
   margin: 6px 0;
   box-shadow: inset 0 0 15px rgba(0,0,0,0.4);
   position: relative;
}

.console-section::before {
   content: "🎮";
   position: absolute;
   top: -6px;
   right: -6px;
   font-size: 12px;
   background: #4a5d7a;
   border-radius: 50%;
   padding: 2px;
}

/* Pokemon team section - card collection style */
.pokemon-section {
   background: #f8f5f0;
   border: 2px solid #d4a574;
   border-radius: 10px;
   padding: 10px;
   margin: 8px 0;
   transform: rotate(-0.8deg);
   box-shadow: 3px 3px 6px rgba(0,0,0,0.25);
   position: relative;
}

.pokemon-section::before {
   content: "⭐";
   position: absolute;
   top: -8px;
   left: -8px;
   color: #d4a574;
   font-size: 18px;
   transform: rotate(-25deg);
}

.pokemon-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 5px;
   margin-top: 5px;
}

.pokemon-slot {
   width: 40px;
   height: 40px;
   border: 2px dashed #c8b5a8;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255,255,255,0.5);
   transform: rotate(1deg);
}

.pokemon-slot:nth-child(2n) {
   transform: rotate(-1deg);
}

/* Now playing section - music player style */
.music-section {
   background: linear-gradient(135deg, #a592c1 0%, #8a77a8 100%);
   border: 2px outset #b5a2d1;
   border-radius: 8px;
   padding: 8px;
   margin: 6px 0;
   box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
   position: relative;
}

.music-section::after {
   content: "♪";
   position: absolute;
   top: -5px;
   right: 5px;
   color: #fff;
   font-size: 14px;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Organic text styling for widgets */
.widget-text {
   font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif;
   font-size: 11px;
   line-height: 1.3;
   color: #2d2d2d;
}

.widget-title {
   font-family: "Impact", "Arial Black", sans-serif;
   font-size: 12px;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
   margin-bottom: 5px;
   transform: rotate(-1deg);
}

/* Three-column layout adjustments */
@media (max-width: 800px) {
   td[width="180"] {
      width: 100% !important;
      display: block;
   }
   
   /* Stack columns on mobile */
   table[width="100%"] tr {
      display: block;
   }
   
   table[width="100%"] tr td {
      display: block;
      width: 100% !important;
   }
}

/* Make sure the layout doesn't break on very wide screens */
@media (min-width: 1200px) {
   body {
      max-width: 1200px;
      margin: 0 auto;
   }
}