body {
    margin: 0;
    padding: 0;
    background-image: url("background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    color: #333366;
}

a {
    color: #0000cc;
    text-decoration: underline;
}

a:visited {
    color: #800080;
}

a:hover {
    color: #ff0099;
    background-color: #ffff99;
}

.page {
    width: 1000px;
    margin: 12px auto;
    padding: 8px;
    background-color: #fffde8;
    border: 3px ridge #9c78c5;
    box-shadow: 3px 3px 8px #777;
}

.top-message {
    text-align: center;
    padding: 5px;
    background-color: #ffff99;
    border: 1px dashed #cc6600;
    color: #990099;
    font-weight: bold;
}

.counter {
    color: red;
    font-family: "Courier New", monospace;
    background: black;
    padding: 2px 5px;
    letter-spacing: 2px;
}

header {
    text-align: center;
    padding: 15px 5px 12px;
    margin-top: 5px;
    color: white;
    border: 4px ridge #e9c5ff;
    background: linear-gradient(
        135deg,
        #330066,
        #663399,
        #cc3399,
        #3366cc
    );
}

header h1 {
    margin: 8px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 39px;
    color: #ffff66;
    text-shadow: 3px 3px #330033;
    letter-spacing: 2px;
}

header h2 {
    margin: 5px;
    font-size: 17px;
    color: #ffffff;
    font-style: italic;
}

header p {
    color: #ffffcc;
    font-size: 12px;
}

.banner-decoration {
    color: #ffff66;
    font-weight: bold;
    letter-spacing: 3px;
}

nav {
    text-align: center;
    padding: 8px 3px;
    margin-top: 5px;
    background: #ffcc66;
    border: 2px outset #ffff99;
    font-weight: bold;
}

nav a {
    margin: 0 5px;
    color: #660066;
}

.announcement {
    margin-top: 6px;
    padding: 5px;
    color: #990033;
    background: #ffccff;
    border: 1px dashed #cc3399;
    font-weight: bold;
}

.columns {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
}

.main-content {
    width: 760px;
}

aside {
    width: 230px;
}

.welcome {
    padding: 8px 12px;
    background-color: #e5f5ff;
    border: 2px dotted #6699cc;
    margin-bottom: 12px;
    line-height: 1.5;
}

.welcome h2 {
    margin-top: 0;
    color: #663399;
    font-family: Georgia, serif;
    font-size: 19px;
}

.pink-text {
    color: #cc0066;
}

.section-title {
    padding: 5px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(to right, #663399, #cc3399, #663399);
    border: 2px ridge #ffccff;
    font-family: Georgia, serif;
    font-size: 17px;
    margin-bottom: 5px;
}

.forum-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border: 2px solid #663399;
}

.forum-table th {
    padding: 6px;
    color: #ffffff;
    background-color: #663399;
    border: 1px solid #9966cc;
    font-size: 11px;
}

.forum-table td {
    padding: 7px 5px;
    border: 1px solid #c9b3df;
    text-align: center;
}

.forum-table tr:nth-child(even) {
    background-color: #f5edff;
}

.forum-table tr:nth-child(odd) {
    background-color: #fff9ed;
}

.forum-table tr:hover {
    background-color: #ffffcc;
}

.forum-icon {
    width: 35px;
    font-size: 22px;
}

.forum-name {
    width: 340px;
    text-align: left !important;
}

.forum-name a {
    display: block;
    font-weight: bold;
    font-size: 12px;
}

.forum-name small {
    display: block;
    margin-top: 4px;
    color: #666666;
    font-size: 10px;
}

.forum-table td:nth-child(3),
.forum-table td:nth-child(4) {
    width: 45px;
    color: #663399;
    font-weight: bold;
}

.forum-table td:last-child {
    width: 130px;
    font-size: 10px;
}

.legend {
    padding: 8px;
    margin-top: 8px;
    background-color: #ffffcc;
    border: 1px dotted #cc9933;
}

.legend span {
    margin-left: 12px;
}

.side-box {
    margin-bottom: 10px;
    padding: 7px;
    background-color: #fff0fa;
    border: 2px ridge #cc66cc;
    line-height: 1.5;
}

.side-box h3 {
    margin: -7px -7px 7px;
    padding: 5px;
    text-align: center;
    color: white;
    background: linear-gradient(to right, #993399, #cc3399);
    font-family: Georgia, serif;
    font-size: 13px;
}

.side-box ul {
    padding-left: 20px;
    margin-bottom: 4px;
}

.side-box li {
    margin-bottom: 5px;
}

.side-box p {
    margin: 6px 2px;
}

.admin-name {
    color: red;
    font-weight: bold;
}

.online-name {
    color: green;
    font-weight: bold;
}

.poll label {
    display: block;
    margin: 5px 0;
}

.poll button {
    margin-top: 5px;
    padding: 4px 12px;
    color: white;
    background: #663399;
    border: 2px outset #cc99ff;
    font-weight: bold;
    cursor: pointer;
}

.poll button:hover {
    background: #cc3399;
}

.bottom-box {
    margin-top: 12px;
    padding: 8px;
    text-align: center;
    background-color: #ccffff;
    border: 3px ridge #66cccc;
}

.bottom-box h3 {
    color: #990099;
    font-family: Georgia, serif;
    font-size: 17px;
}

.webring {
    margin-top: 10px;
    color: #663399;
    font-weight: bold;
}

footer {
    margin-top: 10px;
    padding: 8px;
    text-align: center;
    color: #666666;
    background-color: #eeeeee;
    border: 1px solid #aaaaaa;
    font-size: 10px;
    line-height: 1.5;
}

@media (max-width: 1020px) {
    .page {
        width: 96%;
        box-sizing: border-box;
    }

    .columns {
        flex-direction: column;
    }

    .main-content,
    aside {
        width: 100%;
        box-sizing: border-box;
    }

    .forum-table {
        font-size: 9px;
    }

    .forum-name {
        width: auto;
    }
}

@media (max-width: 600px) {
    header h1 {
        font-size: 27px;
    }

    .forum-table td:last-child,
    .forum-table th:last-child {
        display: none;
    }

    nav a {
        display: inline-block;
        margin: 4px;
    }
}

/* Individual forum pages */

.forum-breadcrumb {
    margin-top: 12px;
    margin-bottom: 8px;
    padding: 5px;
    background-color: #ffffcc;
    border: 1px solid #cc9933;
    color: #663399;
    font-weight: bold;
}

.forum-description {
    padding: 10px;
    margin-bottom: 10px;
    background-color: #e5f5ff;
    border: 2px dotted #6699cc;
    color: #333366;
    line-height: 1.5;
}

.thread-header {
    display: flex;
    justify-content: space-between;
    padding: 6px;
    margin-bottom: 4px;
    background-color: #ffcc99;
    border: 1px solid #cc9966;
    color: #663300;
    font-weight: bold;
}

.thread-header span:last-child {
    color: #0000cc;
    text-decoration: underline;
    cursor: pointer;
}

.thread-table {
    margin-bottom: 10px;
}

.thread-table .forum-name {
    width: 350px;
}

.thread-table td {
    vertical-align: middle;
}

.thread-table td:last-child {
    font-size: 10px;
}

.forum-breadcrumb a {
    font-weight: bold;
}


/* Individual thread pages */

.thread-info {
    padding: 7px;
    margin-bottom: 8px;
    background-color: #ffffcc;
    border: 1px solid #cc9933;
    color: #663399;
}

.thread-posts {
    margin-top: 10px;
}

.post {
    display: flex;
    margin-bottom: 10px;
    border: 2px solid #9966cc;
    background-color: #ffffff;
    min-height: 150px;
}

.post-user {
    width: 145px;
    flex-shrink: 0;
    padding: 10px;
    text-align: center;
    background-color: #eee0ff;
    border-right: 2px ridge #cc99ff;
    color: #663399;
}

.user-rank {
    margin-top: 5px;
    font-size: 10px;
    color: #cc3399;
}

.user-avatar {
    width: 65px;
    height: 65px;
    margin: 10px auto;
    line-height: 65px;
    font-size: 35px;
    background-color: #ffffcc;
    border: 2px ridge #cc99ff;
    color: #993399;
}

.post-user small {
    font-size: 9px;
    color: #666666;
}

.post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-header {
    display: flex;
    justify-content: space-between;
    padding: 6px;
    background-color: #ffccff;
    border-bottom: 1px solid #cc99cc;
    color: #663366;
    font-size: 10px;
}

.post-text {
    white-space: pre-wrap !important;
    overflow-wrap: break-word;
}

.post-footer {
    margin-top: auto;
    padding: 6px;
    text-align: right;
    background-color: #fff9ed;
    border-top: 1px dotted #cc99cc;
    font-size: 10px;
}

.thread-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding: 8px;
    background-color: #ffffcc;
    border: 1px dotted #cc9933;
}

.thread-actions a {
    padding: 5px 10px;
    background-color: #ffcc99;
    border: 2px outset #ffddaa;
    font-weight: bold;
}

@media (max-width: 600px) {
    .post {
        flex-direction: column;
    }

    .post-user {
        width: auto;
        border-right: none;
        border-bottom: 2px ridge #cc99ff;
    }

    .user-avatar {
        display: none;
    }
}


/* Reply form */

.reply-box {
    margin-top: 15px;
    padding: 10px;
    background-color: #e5f5ff;
    border: 2px ridge #6699cc;
}

.reply-box h3 {
    margin: -10px -10px 10px;
    padding: 7px;
    text-align: center;
    color: white;
    background: linear-gradient(to right, #663399, #cc3399);
    font-family: Georgia, serif;
    font-size: 15px;
}

.reply-box label {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    font-weight: bold;
    color: #663399;
}

.reply-box input,
.reply-box textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 7px;
    border: 2px inset #cccccc;
    background-color: #fffef5;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    color: #333366;
}

.reply-box textarea {
    resize: vertical;
}

.reply-box button {
    margin-top: 10px;
    padding: 6px 15px;
    color: white;
    background-color: #663399;
    border: 2px outset #cc99ff;
    font-weight: bold;
    cursor: pointer;
}

.reply-box button:hover {
    background-color: #cc3399;
}

.reply-error {
    padding: 7px;
    margin-bottom: 10px;
    background-color: #ffcccc;
    border: 1px dashed red;
    color: #990000;
    font-weight: bold;
}

/* Login and registration pages */

.auth-box {
    max-width: 450px;
    margin: 20px auto;
}

.auth-box p {
    margin-top: 15px;
    text-align: center;
}

.auth-box a {
    color: #cc3399;
    font-weight: bold;
}

.auth-box a:hover {
    color: #663399;
    text-decoration: underline;
}

/* Member profiles */

.profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 15px 0;
    padding: 15px;
    background: linear-gradient(to right, #fff0cc, #ffccff);
    border: 3px ridge #cc66cc;
}

.profile-avatar {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #663399, #ff66cc);
    border: 3px ridge #ffff99;
    color: #ffff99;
    font-size: 55px;
    font-weight: bold;
}

.profile-details h2 {
    margin: 0 0 5px;
    color: #663399;
    font-family: Georgia, serif;
}

.profile-details p {
    margin: 5px 0;
    font-size: 12px;
}

.profile-rank {
    color: #cc3399;
    font-weight: bold;
}

.profile-posts {
    margin-top: 20px;
}

.profile-post {
    margin-bottom: 12px;
    border: 2px ridge #9999cc;
    background-color: #fffef5;
}

.profile-post-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px;
    background: linear-gradient(to right, #ccccff, #ffccff);
    border-bottom: 1px solid #9999cc;
    font-size: 12px;
}

.profile-post-header a {
    color: #663399;
    font-weight: bold;
}

.profile-post-header span {
    color: #666666;
}

.profile-post-content {
    padding: 12px;
    font-size: 12px;
    color: #333366;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.profile-post-footer {
    padding: 6px;
    background-color: #eeeeff;
    border-top: 1px dashed #9999cc;
    text-align: right;
    font-size: 11px;
}

.no-posts {
    padding: 15px;
    background-color: #fff0cc;
    border: 1px dashed #cc99cc;
    text-align: center;
}

@media (max-width: 500px) {

    .profile-card {
        align-items: flex-start;
        gap: 10px;
    }

    .profile-avatar {
        width: 60px;
        height: 60px;
        font-size: 35px;
        flex-shrink: 0;
    }

    .profile-post-header {
        flex-direction: column;
    }
}

/* Avatar images */

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Profile editing */

.profile-edit-link {
    margin: 10px 0;
    text-align: right;
}

.profile-edit-link a {
    color: #cc3399;
    font-weight: bold;
}

.profile-bio {
    max-width: 450px;
    padding: 8px;
    background-color: #fffef5;
    border: 1px dashed #cc99cc;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.avatar-preview {
    margin: 10px 0;
}

.avatar-preview img {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border: 3px ridge #cc66cc;
    background-color: white;
}

.remove-avatar {
    font-weight: normal !important;
    color: #990000 !important;
}

.form-help {
    margin: 4px 0 12px;
    color: #666666;
    font-size: 11px;
    font-style: italic;
}

/* Forum signatures */

.post-signature {
    margin-top: 15px;
    padding-top: 8px;
    border-top: 1px dashed #9999cc;
    color: #996699;
    font-size: 11px;
    font-style: italic;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Post image attachments */

.post-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #fff9e8;
    border: 1px dashed #c9a65b;
}

.post-images a {
    display: block;
    max-width: 100%;
}

.post-images img {
    display: block;
    max-width: 100%;
    max-height: 450px;
    width: auto;
    height: auto;
    border: 2px solid #b9a16b;
    padding: 3px;
    background-color: white;
}

.post-images img:hover {
    border-color: #8b5da8;
}

.post-images a:hover {
    background: none;
}

/* Image upload preview */

#image-preview-container {
    margin-top: 15px;
    padding: 12px;
    background-color: #fff9e8;
    border: 1px dashed #c9a65b;
}

#image-preview-count {
    font-weight: bold;
    color: #704b91;
    margin-top: 0;
}

#image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.image-preview-item {
    width: 130px;
    padding: 6px;
    background-color: white;
    border: 1px solid #c9a65b;
    text-align: center;
}

.image-preview-item img {
    width: 100%;
    height: 110px;
    object-fit: contain;
    background-color: #f3f0e8;
}

.image-preview-item p {
    font-size: 11px;
    overflow-wrap: anywhere;
    margin: 5px 0 0;
}


/* Remove image button */

.remove-image-button {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px;

    background-color: #f5d6d6;
    color: #8b2929;

    border: 1px solid #c77b7b;
    cursor: pointer;
    font-size: 11px;
}

.remove-image-button:hover {
    background-color: #eababa;
}

.delete-thread-button {
    background-color: #cc4444;
    color: white;
    border: 2px outset #ff8888;
    padding: 5px 12px;
    font-family: inherit;
    cursor: pointer;
}

.delete-thread-button:hover {
    background-color: #aa2222;
}


/* ADMINISTRATION PANEL */

.admin-page {
    background-color: #fff8dc;
    border: 3px ridge #b58b42;
    padding: 15px;
    margin-top: 15px;
}

.admin-heading {
    background-color: #d9c4f0;
    border: 2px dashed #8055a5;
    padding: 10px;
    margin-bottom: 15px;
}

.admin-heading h2 {
    margin-top: 0;
    color: #542c80;
}

.admin-navigation {
    margin-bottom: 15px;
}

.admin-user-list {
    background-color: #fffdf2;
    border: 2px solid #c9ad73;
    padding: 10px;
}

.admin-user-list h3 {
    color: #704b26;
    border-bottom: 2px dotted #c9ad73;
    padding-bottom: 8px;
}

.admin-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 12px 8px;
    border-bottom: 1px dashed #c9ad73;
}

.admin-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-user-info strong {
    color: #593d87;
    font-size: 16px;
}

.admin-user-info span {
    font-size: 12px;
    color: #665c50;
}

.admin-user-controls form {
    display: flex;
    gap: 5px;
    align-items: center;
}

.admin-user-controls select,
.admin-user-controls button {
    font-family: inherit;
    padding: 5px;
}

.admin-user-controls button {
    background-color: #b9d9a5;
    border: 2px outset #d9f0c8;
    cursor: pointer;
}

.admin-user-controls button:hover {
    background-color: #a0c98a;
}

.admin-you-label {
    color: #a04444 !important;
    font-weight: bold;
}

.admin-message {
    padding: 8px;
    margin: 10px 0;
    border: 1px solid;
}

.admin-message.success {
    background-color: #e1f3d8;
    border-color: #75a85c;
}

.admin-message.error {
    background-color: #f8dada;
    border-color: #bd6666;
}

@media (max-width: 600px) {
    .admin-user {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-user-controls form {
        flex-wrap: wrap;
    }
}

.poll-result {
    margin-top: 8px;
}

.poll-bar {
    width: 100%;
    height: 10px;
    background: #ddd;
    border: 1px solid #999;
    margin-top: 3px;
}

.poll-bar div {
    height: 100%;
    background: #cc66aa;
}

.poll form label {
    display: block;
    margin: 5px 0;
}

.poll hr {
    margin: 12px 0;
    border: 0;
    border-top: 1px dashed #999;
}

.poll-bar-fill {
    width: var(--poll-width);
    height: 100%;
    background: #cc66aa;
}

.reset-poll-button {
    background: #ffcccc;
    color: #990000;
    border: 1px solid #cc6666;
    padding: 5px 10px;
    margin-top: 5px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
}

.reset-poll-button:hover {
    background: #ff9999;
}

.guestbook-page {
    width: 100%;
}

.guestbook-form {
    background: #fff0fa;
    border: 2px dashed #cc77aa;
    padding: 12px;
    margin: 15px 0;
}

.guestbook-form h3 {
    color: #aa4488;
    margin-top: 0;
}

.guestbook-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #cc88aa;
    background: #fffaff;
    font-family: inherit;
    resize: vertical;
}

.guestbook-entry {
    background: #fffaff;
    border: 1px solid #ddaacc;
    padding: 12px;
    margin: 12px 0;
}

.guestbook-author {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #cc99bb;
}

.guestbook-author small {
    margin-left: auto;
    color: #888;
}

.guestbook-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid #cc88aa;
}

.guestbook-message {
    padding: 12px 4px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.delete-entry-button {
    background: #ffcccc;
    color: #990000;
    border: 1px solid #cc6666;
    padding: 4px 8px;
    font-family: inherit;
    cursor: pointer;
}

.delete-entry-button:hover {
    background: #ff9999;
}

.guestbook-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-top: 15px;
    border-top: 1px dashed #cc99bb;
}

.guestbook-form button {
    margin-top: 5px;
}

nav form {
    display: inline;
    margin: 0;
    padding: 0;
}

nav form button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-decoration: inherit;
    cursor: pointer;
}

nav form button:hover {
    text-decoration: underline;
}

.delete-user-button {
    background-color: #b83232;
    color: white;
    border: 1px solid #812020;
    padding: 6px 12px;
    font: inherit;
    cursor: pointer;
}

.delete-user-button:hover {
    background-color: #8f2020;
}

.delete-post-button {
    background: none;
    border: none;
    padding: 0;
    color: #b83232;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.delete-post-button:hover {
    color: #8f2020;
}

/* Recent Posts */

.recent-posts-section {
    margin-top: 25px;
}

.recent-posts-list {
    border: 1px solid #cc99cc;
    background-color: #fff9ed;
}

.recent-post {
    padding: 10px;
    border-bottom: 1px dotted #cc99cc;
}

.recent-post:last-child {
    border-bottom: none;
}

.recent-post:nth-child(even) {
    background-color: #fff0f8;
}

.recent-post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.recent-post-header a {
    color: #663366;
    font-weight: bold;
}

.recent-post-header small {
    color: #888888;
    font-size: 10px;
    white-space: nowrap;
}

.recent-post-info {
    margin-top: 4px;
    color: #777777;
    font-size: 10px;
}

.recent-post-info a {
    color: #cc6699;
}

.recent-post-preview {
    margin-top: 6px;
    color: #444444;
    font-size: 12px;
    overflow-wrap: break-word;
}