:root {
    --base-color: #fad895;
    --primary-color: #f2a65a;
    --container-background-color: #fff;
    --link-color: #2063ff;
    --text-color: #000;
    --text-color-inverse: #fff;
    --text-color-hover: #fff;
    --border-color-light: #fff;
    --border-color-inverse: #000;
    --box-shadow-color-dark: rgba(0, 0, 0, 0.1);
}

.darkmode {
    --base-color: #1a1a1a;
    --primary-color: #c98c54;
    --container-background-color: #333;
    --link-color: #709bff;
    --text-color: #fff;
    --text-color-inverse: #000;
    --text-color-hover: #000;
    --border-color-light: #000;
    --border-color-inverse: #fff;
    --box-shadow-color-dark: rgba(255, 255, 255, 0.1);
}

body {
    background: var(--base-color);
    background-color: var(--base-color);
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", "Arial", "sans-serif";
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    padding: 1rem;
    box-sizing: border-box;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Global grayscale mode for mourning/commemoration */
.grayscale-mode {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.grayscale-mode img,
.grayscale-mode video {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}