:root {
    /* constant colors */
    --white-color: rgba(255, 255, 255, 1);
    --white-color-alpha: rgba(255, 255, 255, 0.75);
    --dark-color-light: rgba(0, 0, 0, 0.85);
    --dark-color-lighter: rgba(0, 0, 0, 0.4);
    --dark-color: rgba(0, 0, 0, 1);
    --gray-color: rgb(96, 96, 96);
    --color-hare-green: rgba(61, 153, 82, 1);
    --light-color: rgb(248, 248, 248);
    --light-green-color: rgba(61, 153, 82, 0.25);
    --bg-terminal-color: rgba(24, 24, 24, 1);
    --dark-button-color: rgba(0, 0, 0, 0.75);

    /* default colors */
    --nav-color: var(--light-color);
    --text-color: var(--dark-color);
    --nav-text-color: var(--dark-color-lighter);
    --nav-text-color-active: var(--dark-color-light);
    --text-color-trans: var(--dark-color-lighter);
    --footer-color: var(--light-color);
    --wide-color: var(--light-green-color);
    --timeline-color: var(--gray-color);
    --button-color: var(--dark-button-color);

    /* font */
    --main-font: 'Almarai';
    --terminal-font: 'Share Tech Mono';

    /* sizes and proportions */
    --main-content-w: 1080px;
}