:root{--color-primary: #003399;--color-secondary: #ff9900;--color-tertiary: #ffff00;--color-text-dark: #000000;--color-text-light: #ffffff;--color-background: #cccccc;--color-accent: #ff0000;--color-link: #0000ff;--color-link-visited: #800080;--color-border: #808080}*{box-sizing:border-box}html{background-color:var(--color-background);background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMgABXA2kUUQGmICAJwUBgtD9/TnAAAAAElFTkSuQmCC");background-repeat:repeat;scroll-behavior:auto}body{font-family:"Arial",Helvetica,sans-serif;font-size:12px;line-height:1.2;color:var(--color-text-dark);margin:0 auto;width:800px;padding:10px;border-left:3px solid var(--color-border);border-right:3px solid var(--color-border);background-color:var(--color-text-light)}h1,h2,h3,h4,h5,h6{font-family:"Crimson Text",Times,serif;text-align:center;font-weight:bold;margin-top:20px;margin-bottom:20px}h1{font-size:24px;color:var(--color-primary);text-transform:uppercase}h2{font-size:18px;color:var(--color-primary);text-decoration:underline}h3{font-size:16px;color:var(--color-secondary)}p{margin-bottom:10px}a{color:var(--color-link);text-decoration:underline}a:visited{color:var(--color-link-visited)}a:hover{color:var(--color-accent)}hr{border:0;height:2px;background:var(--color-primary);margin:10px 0;background-image:linear-gradient(to right, var(--color-background), var(--color-primary), var(--color-background))}img{border:1px solid var(--color-border);padding:1px;background-color:var(--color-text-light)}table{border-collapse:separate;border-spacing:0;width:100%}td{padding:5px;vertical-align:top}.center-text{text-align:center}ul{list-style-image:url("data:image/gif;base64,R0lGODlhCAAIAIAAAP///wAAACH5BAAAAAAALAAAAAAIAAgAAAIKjI+pywb7opRIFgA7");margin-left:20px;padding-left:20px}.font-times{font-family:"Crimson Text",Times,serif;font-size:16px;font-weight:bold}.font-arial{font-family:"Arial",Helvetica,sans-serif;font-size:14px}.font-comic{font-family:"Comic Neue",cursive;font-size:14px;color:var(--color-accent)}.font-courier{font-family:"Courier Prime",Courier,monospace;font-size:14px;background-color:#f4f4f4;padding:2px 4px}@media(prefers-reduced-motion: reduce){.blink-text,.marquee-text,.header-marquee::before{animation:none !important}}.nav-bar{background-color:var(--color-background);border:2px outset var(--color-border);text-align:center;padding:5px;margin-bottom:20px}.nav-link{color:var(--color-link);text-decoration:none;font-weight:bold;padding:0 10px}.nav-link:hover{text-decoration:underline}.nav-link:visited{color:var(--color-link-visited)}.nav-separator{color:var(--color-border);font-weight:bold}.hero-section{text-align:center;margin-bottom:20px;padding:10px;border:1px solid var(--color-border);background-color:var(--color-background)}.hero-section h1{margin-top:0}.hero-section .construction-gif{margin:10px auto;display:block}.content-wrapper{margin:0 auto}.content-panel{margin-bottom:20px;padding:10px;border:1px solid var(--color-border);background-color:var(--color-text-light)}.content-panel h2{margin-top:0}.counter-box{text-align:center;margin-bottom:20px;font-family:"Courier Prime",Courier,monospace;font-weight:bold}.counter-box .visitor-count{display:inline-block;background-color:#000;color:lime;padding:2px 5px;border:1px inset var(--color-border)}.philosophy-table{background-color:var(--color-text-light)}.philosophy-table td{padding:10px}.philosophy-table .icon-gif{margin-bottom:5px}.philosophy-table h3{margin-top:5px;margin-bottom:5px}.philosophy-table p{font-size:12px;margin:0}.technique{display:flex;margin-bottom:20px;border:1px solid var(--color-border)}.technique .technique-number{background-color:var(--color-primary);color:var(--color-text-light);padding:10px;font-size:24px;font-weight:bold;display:flex;align-items:center;justify-content:center;min-width:40px}.technique .technique-content{padding:10px;flex:1}.technique .technique-content h3{margin-top:0;text-align:left;color:var(--color-primary)}.technique .demo-element{margin-top:10px;border:1px dashed var(--color-border);padding:10px;background-color:var(--color-background);text-align:center}.tile-demo{background-color:#003;background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);background-size:10px 10px;padding:20px;color:var(--color-text-light);text-shadow:1px 1px 1px var(--color-text-dark);text-align:center;font-weight:bold}.color-samples{display:flex;flex-wrap:wrap;gap:5px}.color-samples .color-sample{width:calc(50% - 5px);height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border)}.color-samples .color-sample span{background-color:hsla(0,0%,100%,.7);padding:1px 5px;font-family:"Courier Prime",Courier,monospace;font-size:10px}footer{margin-top:20px;text-align:center;font-size:11px}footer .footer-content{padding:10px}footer .badges{margin-top:10px}footer .badges .badge{margin:0 5px}.button{background-color:var(--color-background);border:3px outset var(--color-border);padding:2px 8px;font-weight:bold;text-align:center;cursor:pointer;font-family:"Arial",Helvetica,sans-serif;margin:5px}.button:active{border-style:inset}.button:hover{background-color:var(--color-tertiary)}.button-container{text-align:center;margin:10px 0}.text-effects{margin:10px 0;padding:10px;border:1px solid var(--color-border);background-color:var(--color-background);text-align:center}.text-effects>div{margin:10px 0;font-weight:bold}.text-effects .blink-text{color:var(--color-accent)}.demo-interactive h3{margin-top:20px;border-bottom:1px dotted var(--color-border);padding-bottom:5px}.demo-gif{margin:0 5px;width:32px;height:32px;display:inline-block;position:relative;border:1px solid var(--color-border)}.demo-gif.email-gif{background:linear-gradient(45deg, #f0f0f0, #e0e0e0)}.demo-gif.email-gif::before{content:"✉";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:16px;color:#1565c0;animation:pulse 1.5s infinite alternate}.demo-gif.new-gif{background:linear-gradient(45deg, #ffe0b2, #ffcc80)}.demo-gif.new-gif::before{content:"NEW";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:10px;font-weight:bold;color:#d84315;animation:blink 1s step-end infinite}.demo-gif.fire-gif{background:linear-gradient(45deg, #ffebee, #ffcdd2);overflow:hidden}.demo-gif.fire-gif::before{content:"🔥";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:16px;animation:flame 1s ease-in-out infinite}@keyframes pulse{0%{transform:translate(-50%, -50%) scale(1)}100%{transform:translate(-50%, -50%) scale(1.2)}}@keyframes flame{0%{transform:translate(-50%, -50%) rotate(-5deg)}50%{transform:translate(-50%, -50%) rotate(5deg)}100%{transform:translate(-50%, -50%) rotate(-5deg)}}.construction-gif{width:60px;height:60px;margin:10px auto;background-color:#fc0;position:relative;display:flex;justify-content:center;align-items:center;border:2px solid #000}.construction-gif::before{content:"UNDER CONSTRUCTION";color:#000;font-size:7px;font-weight:bold;text-align:center;line-height:1;transform:rotate(-45deg)}.construction-gif::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;border:8px solid rgba(0,0,0,0);border-top-color:red;border-bottom-color:red;border-radius:50%;transform:translate(-50%, -50%) rotate(0deg);animation:construction 2s linear infinite}@keyframes construction{0%{transform:translate(-50%, -50%) rotate(0deg)}100%{transform:translate(-50%, -50%) rotate(360deg)}}.icon-gif{width:50px;height:50px;margin:0 auto;display:block;position:relative;border:1px solid var(--color-border)}.icon-gif.content-first-icon{background:linear-gradient(135deg, #ffe0b2, #ffcc80)}.icon-gif.content-first-icon::before{content:"ABC";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-weight:bold;font-size:18px;color:#d84315}.icon-gif.content-first-icon::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background-color:#d84315}.icon-gif.diy-aesthetic-icon{background:linear-gradient(to bottom, #e3f2fd, #bbdefb)}.icon-gif.diy-aesthetic-icon::before{content:"";position:absolute;top:15px;left:10px;right:10px;bottom:15px;border:2px dashed #1565c0}.icon-gif.diy-aesthetic-icon::after{content:"DIY";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-weight:bold;font-size:14px;color:#1565c0}.icon-gif.explicit-navigation-icon{background:linear-gradient(to bottom, #c8e6c9, #a5d6a7)}.icon-gif.explicit-navigation-icon::before{content:"→";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-weight:bold;font-size:24px;color:#2e7d32}.icon-gif.explicit-navigation-icon::after{content:"";position:absolute;width:80%;height:2px;background-color:#2e7d32;bottom:10px;left:10%}.badges{display:flex;justify-content:center;gap:10px;margin-top:10px}.badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border:2px outset var(--color-border);background-color:var(--color-background);font-weight:bold;font-size:10px;height:30px}.valid-html-badge{background-color:#069;color:#fff;position:relative;padding-left:30px}.valid-html-badge::before{content:"✓";position:absolute;left:10px;font-size:16px;font-weight:bold}.notepad-badge{background:linear-gradient(to bottom, #ffffff, #e0e0e0);color:#000;position:relative;padding-left:30px}.notepad-badge::before{content:"N";position:absolute;left:10px;font-size:16px;font-weight:bold;color:#00c}.demo-form{margin:10px 0}.demo-form label{display:block;margin-top:10px;font-weight:bold}.demo-form .form-input,.demo-form .form-textarea{width:100%;padding:2px;border:2px inset var(--color-border);background-color:var(--color-text-light);font-family:"Arial",Helvetica,sans-serif;margin-top:2px}.demo-form .form-textarea{height:80px}.demo-form .form-buttons{margin-top:10px;text-align:center}.blink-text{animation:blink 1s step-end infinite}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}.header-marquee{display:block;white-space:nowrap;overflow:hidden;background-color:var(--color-primary);color:var(--color-text-light);padding:5px;font-weight:bold;width:100%;position:relative}.header-marquee::before{content:"Welcome to the wonderful world of Web 1.0 design (1991-2004)!";display:inline-block;white-space:nowrap;animation:marquee 15s linear infinite;position:absolute}.marquee-text{display:block;white-space:nowrap;overflow:hidden;background-color:var(--color-primary);color:var(--color-text-light);padding:5px;font-weight:bold;position:relative}.marquee-text::before{content:attr(data-text);position:absolute;white-space:nowrap;animation:marquee 15s linear infinite}@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}@media screen and (max-width: 768px){body{width:100%;min-width:640px;overflow-x:auto}}/*# sourceMappingURL=web-1-0.css.map */