body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    transition: background-color 0.3s, color 0.3s;

    /* Light mode default */
    background-color: #f4f4f4;
    color: #333;
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ddd" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

body.dark-mode {
    /* Dark mode */
    background-color: #1a1a1a;
    color: #fff;
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23333" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

#theme-toggle-button {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    z-index: 999;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

body.dark-mode #theme-toggle-button {
    background-color: #f4f4f4;
    color: #1a1a1a;
    border-color: #f4f4f4;
}

body:not(.dark-mode) #theme-toggle-button {
    background-color: #1a1a1a;
    color: #f4f4f4;
    border-color: #1a1a1a;
}