:root {
    --bg-color: #ddd;
    --text-color: #333333;
    --border-color: #aaa;
    --button-bg: transparent;
    --button-hover-bg: rgba(240, 240, 240, 0.8);
    --pagination-bg: #f1f1f1;
    --input-bg: transparent;
    --input-color: black;
}
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --border-color: #444444;
    --button-bg: transparent;
    --button-hover-bg: rgba(255, 255, 255, 0.1);
    --pagination-bg: #333333;
    --input-bg: black;
    --input-color: white;
}
* {
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    max-width: 1024px;
}
h1 {
    text-transform: uppercase;
}
h2 {
    margin: 0.2em 0em;
}
.error { color: #ff5555; }
.success {
    color: #55ff55;
    font-size: 40px;
}
input[type="text"], input[type="date"], input[type="time"], textarea {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--input-color);
    width: 100%;
}
input[type="text"]:hover, input[type="date"]:hover, input[type="time"]:hover, textarea:hover {
    background-color: var(--button-hover-bg);
}
button {
    padding: 10px 20px;
    border-radius: 8px;
    background-color: var(--button-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
}
button:hover {
    background-color: var(--button-hover-bg);
}
.submission {
    margin: 10px 0;
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.pagination {
    margin: 20px 0px;
}
.pagination a, .pagination span {
    margin: 0 5px;
    padding: 5px 10px;
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
}
.pagination a:hover {
    background: var(--button-hover-bg);
}
.pagination .current {
    background: var(--pagination-bg);
    color: var(--text-color);
}
.pagination .disabled {
    color: var(--border-color);
    pointer-events: none;
}
form {
    display: grid;
    gap: 10px;
}
.theme-toggle {
    align-self: center;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: 100%;
    padding: 4px;
    text-align: center;
    line-height: 12px;
    background-color: var(--button-bg);
}
.char-counter {
    font-size: 12px;
    color: var(--text-color);
    text-align: right;
}
.char-counter.error {
    color: #ff5555;
}
.form-section {
    margin-bottom: 15px;
}
.form-section label {
    display: block;
    margin-bottom: 5px;
}
.checkbox-group, .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
a {
    color: #666;
}
section
{
    margin-top: 1em;
    margin-bottom: 1em;
    border: 2px solid var(--border-color);
    padding: 1em;
    border-radius: 1em;
}