:root {
    --color-accent: rgb(100, 149, 237);
    --color-link: var(--color-accent);
    --color-text: black;
    --color-header: white;
    --color-background-header: rgb(100, 149, 237);
    --color-background-subheader: lightgrey;
    --color-background-page: rgb(235 235 235);
    --color-hover: rgb(231, 231, 231);
    --color-grid: white;
    --color-icon: white;
    --font-size-header: 50px;
    --font-size-subheader: 36px;
    --font-size-body: 20px;
    --font-style-header: bold;
    --text-align: center;
    --text-align-list: left;
    --font-family-header: 'Alan Sans', sans-serif;
    --font-family-body: 'Montserrat', sans-serif;
    --margin: 20px;
    --padding: 10px;
    --box-shadow: 0 2px 6px rgba(0,0,0,0.06)
}

body.dark-mode {
    --color-text: rgb(240, 240, 223);
    --color-background-subheader: rgb(76, 76, 76);
    --color-background-page: rgb(43, 43, 43);
    --color-hover: rgb(96, 96, 96);
    --color-grid: rgb(60, 60, 60);
    --color-icon: white;
}