:root {
    --page-padding: 16%;
    --bg-lighter: #e2e2e2;
    --bg: #ececec;
    --bg-darker: #f4f4f4;
    --border: rgb(195, 195, 195);
    --text: #232323;
    --text-darker: #2d2d2d;
    --inverse-text: white;
    --primary: rgb(31, 108, 99);
    --primary-hover: rgb(23, 81, 74);
    --accent: #ff9f1b;
    --danger: rgb(192, 29, 29);
    --card-bg: rgba(200, 200, 200, 0.5);
    --card-bg-hover: rgba(121, 121, 121, 0.5);
    --radius: 14px;
    --spacing-small: 8px;
    --spacing-medium: 24px;
    --spacing-large: 52px;
    --header-top-height: 34px;
}

@media screen and (max-width: 1200px) {
    :root {
        --page-padding: 8%;
    }
}


@media screen and (max-width: 600px) {
    :root {
        --page-padding: 1rem;
        --spacing-small: 6px;
        --spacing-medium: 12px;
        --spacing-large: 44px;
    }
}