/* Piwnichan Style for Desktop Archive Site */
body {
    background: #FFF0DF; /* Light background */
    color: #800000; /* Dark red text */
    font-family: sans-serif; /* Font family */
    font-size: 16px; /* Slightly larger font size for readability */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

header {
    background-color: #EED1C2; /* Header background */
    color: #800000; /* Dark red text for header */
    padding: 20px; /* Padding for header */
    text-align: center; /* Center align header text */
    border-bottom: 2px solid #E2C5B1; /* Border below header */
}

header h1 {
    font-size: 36px; /* Larger font size for main title */
    margin: 0; /* Remove margin */
}

#searchBox {
    padding: 10px; /* Padding for search box */
    width: 80%; /* Make input wider for desktop */
    max-width: 600px; /* Limit max width */
    margin: 20px auto; /* Center the input box */
    display: block; /* Display as block element */
    border: 1px solid #E2C5B1; /* Border color */
    background-color: #FAE8D4; /* Search box background */
    color: #800000; /* Dark red text for input */
    font-size: 14px; /* Font size for input */
}

#archive ul {
    list-style-type: none; /* Remove list style */
    padding: 0; /* Remove padding */
}

#archive ul li {
    padding: 15px; /* Padding for items */
    background-color: #FAE8D4; /* Item background */
    margin: 10px 0; /* Margin between items */
    border: 1px solid #E2C5B1; /* Border around items */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

#archive ul li:hover {
    background-color: #E2C5B1; /* Change background on hover */
}

#archive ul li a {
    text-decoration: none; /* Remove underline from links */
    color: #A32615; /* Link color */
    font-weight: bold; /* Bold link text */
}

#archive ul li a:hover {
    color: #d00; /* Color on hover */
    text-decoration: underline; /* Underline on hover */
}

/* Footer styles */
footer {
    background-color: #EED1C2; /* Footer background */
    color: #800000; /* Dark red text for footer */
    text-align: center; /* Center align footer text */
    padding: 10px; /* Padding for footer */
    border-top: 2px solid #E2C5B1; /* Top border for footer */
}

/* Additional styles for elements like pagination or omitted messages */
div.pages {
    padding: 7px 5px; /* Padding for pagination */
    color: #800; /* Maroon color */
    font-size: 8pt; /* Font size for pagination */
    background: none; /* No background */
    border-width: 1px; /* Border width */
    border-style: inset; /* Inset border style */
}

div.pages selected {
    color: #800; /* Color for selected link */
}

omitted {
    color: gray; /* Color for omitted items */
}

hr {
    border-width: 1px; /* Border width */
    border-style: inset; /* Inset border style */
}

/* Desktop-specific styles */
.desktop-style div.boardlist:nth-child(1) {
    text-shadow: #fff 1px 1px 1px, #fff -1px -1px 1px; /* Text shadow for first item */
}

.desktop-style div.boardlist:nth-child(1):hover {
    background-color: rgba(90%, 90%, 90%, 0.55); /* Background on hover for first item */
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    header {
        padding: 15px; /* Adjust header padding for smaller screens */
    }

    #searchBox {
        padding: 8px; /* Adjust input padding */
        width: 90%; /* Make input wider */
    }

    #archive {
        width: 95%; /* Make archive section wider */
    }

    #archive ul li {
        padding: 10px; /* Reduce padding for list items */
    }
}

.button {
    background-color: #A32615; /* Dark red button */
    color: #FFF; /* White text */
    padding: 10px 20px; /* Padding for button */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    font-size: 16px; /* Button text size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center button text */
    display: inline-block; /* Inline-block display */
    margin-top: 20px; /* Margin at the top */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

.button:hover {
    background-color: #8F2211; /* Darker shade on hover */
}