:root {
    --bg-darkbrown: #3A332B;
    --bg-lightbrown: #F3EEE6;
    --bg-card-lightbrown: #FAF8F3;
    --bg-button-lightbrown: #E8E0D2;

    --title-darkbrown: #2F2A24;
    --text-darkbrown: #463F37;
    --text-lightbrown: #EFE6D6;

    --frame-darkbrown: #6A5D51;

    --hover-lightgreen: #E2EBD6;
    --selected-darkgreen: #355E3B;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    background-color: var(--bg-card-lightbrown);
    color: var(--text-darkbrown);
    font-family: "Noto Sans TC", sans-serif;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}
.wrapper {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    padding-left: 4%;
    padding-right: 4%;
}