:root {
    --color-white: rgb(255, 255, 255);
    --color-brown-extra-light: rgb(225, 220, 214);
    --color-brown-lighter: rgb(186, 163, 137);
    --color-brown-light: rgb(160, 132, 100);
    --color-brown: rgb(118, 72, 29);
    --color-brown-dark: rgb(77, 44, 14);
    --color-green: rgb(98, 120, 28);
    --color-green-light: rgb(235, 240, 223);
    --color-red: rgb(204, 123, 101);
    --color-shadow: rgba(118, 72, 29, 0.05);
    --color-main-background: rgb(235, 206, 164);

    --default-animation-duration: .15s;

    --size-1: 0.063rem;
    --size-4: 0.25rem;
    --size-5: 0.313rem;
    --size-8: 0.5rem;
    --size-14: 0.875rem;
    --size-18: 1.125rem;
    --size-24: 1.5rem;
    --size-30: 1.875rem;
    --size-32: 2rem;
    --size-40: 2.5rem;
}

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

* {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    box-sizing: border-box;
    height: 100%;
}

body {
    margin: 0;

    background-color: var(--color-main-background);
}

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.8;
    color: var(--color-brown);
}

::selection {
    color: var(--color-brown);
    background-color: var(--color-green-light);
}

@media (prefers-reduced-motion) {
    * {
        transition: none !important;
        animation: none !important;
    }
}