:root {
    --web1-bg: #c0c0c0;
    --web1-text: #000000;
    --web1-link: #0000ee;
    --web1-vlink: #551a8b;
    --web1-border-light: #ffffff;
    --web1-border-dark: #808080;
    --web1-border-darker: #404040;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--web1-bg); color: var(--web1-text);
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px; line-height: 1.4;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23c0c0c0"/><circle cx="50" cy="50" r="2" fill="%23b0b0b0"/></svg>');
}
a { color: var(--web1-link); text-decoration: underline; }
a:visited { color: var(--web1-vlink); }
a:hover { color: #ff0000; }

.web1-container { max-width: 800px; margin: 0 auto; background: #ffffff; border: 2px solid var(--web1-border-dark); padding: 10px;}

/* Header */
.web1-header { text-align: center; border-bottom: 3px double var(--web1-border-dark); padding-bottom: 10px; margin-bottom: 20px;}
.web1-brand { font-size: 36px; font-weight: bold; font-family: 'Comic Sans MS', cursive, sans-serif; color: #000080;}
.web1-nav { background: #eeeeee; padding: 5px; text-align: center; border: 1px solid var(--web1-border-dark); margin-top: 10px;}
.web1-nav a { margin: 0 10px; font-weight: bold; }

/* Hero */
.web1-hero { text-align: center; margin-bottom: 30px; padding: 20px; border: 1px dashed var(--web1-border-dark); background: #ffffcc;}
.web1-hero h1 { font-size: 28px; margin-bottom: 10px; color: #ff0000;}
.web1-hero p { font-size: 18px; margin-bottom: 20px;}
.web1-btn {
    display: inline-block; background: #c0c0c0; color: #000; padding: 5px 15px; text-decoration: none;
    border-top: 2px solid var(--web1-border-light); border-left: 2px solid var(--web1-border-light);
    border-right: 2px solid var(--web1-border-darker); border-bottom: 2px solid var(--web1-border-darker);
    font-weight: bold; font-family: 'Arial', sans-serif; font-size: 14px; cursor: pointer;
}
.web1-btn:active {
    border-top: 2px solid var(--web1-border-darker); border-left: 2px solid var(--web1-border-darker);
    border-right: 2px solid var(--web1-border-light); border-bottom: 2px solid var(--web1-border-light);
}

/* Marquee */
.web1-marquee { background: #000080; color: #ffff00; padding: 5px; font-weight: bold; margin-bottom: 20px; font-family: 'Courier New', Courier, monospace;}

/* Layout */
.web1-layout { display: flex; gap: 20px; margin-bottom: 30px;}
.web1-sidebar { width: 200px; background: #eeeeee; border: 1px solid var(--web1-border-dark); padding: 10px;}
.web1-main { flex: 1; }

.sidebar-title { background: #000080; color: #fff; padding: 2px 5px; font-weight: bold; margin-bottom: 10px; font-size: 14px;}
.sidebar-list { list-style-type: square; margin-left: 20px; font-size: 14px;}
.sidebar-list li { margin-bottom: 5px;}

/* Content Blocks */
.content-block { margin-bottom: 20px;}
.content-title { border-bottom: 2px solid #000080; color: #000080; margin-bottom: 10px; padding-bottom: 2px;}

/* Table */
.web1-table { width: 100%; border-collapse: collapse; margin-bottom: 20px;}
.web1-table th, .web1-table td { border: 1px solid var(--web1-border-dark); padding: 5px; text-align: left; font-size: 14px;}
.web1-table th { background: #cccccc; font-weight: bold;}
.web1-table tr:nth-child(even) { background: #f0f0f0;}

/* Guestbook */
.guestbook { border: 1px solid var(--web1-border-dark); padding: 10px; background: #e6e6fa;}
.gb-entry { border-bottom: 1px dashed var(--web1-border-dark); padding-bottom: 5px; margin-bottom: 5px; font-size: 14px;}

footer { text-align: center; border-top: 3px double var(--web1-border-dark); padding-top: 10px; font-size: 12px;}

@media (max-width: 600px) {
    .web1-layout { flex-direction: column; }
    .web1-sidebar { width: 100%; }
}