:root {
    --font-sans-serif: system-ui, Arial, sans-serif;
    --font-monospace: "Lucida Console", Monaco, monospace;;
    --body-font-family: var(--font-sans-serif);
    --base-text-color: #000;
    --gap: 4px;

    --wine: #6b2737;
    --persian-orange: #e08e45;
    --vanilla: #f8f4a6;
    --tea-green: #bdf7b7;
    --violet-blue: #3943b7;
}

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

body {
    margin: 0;
    font-family: var(--body-font-family);
    color: var(--base-text-color);
}

.container {
    max-width: 540px;
    width: 100%;
    padding-right: calc(var(--gap) * 4);
    padding-left: calc(var(--gap) * 4);
    margin-right: auto;
    margin-left: auto;
}

a {
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}