body {

    --padding: 20px;
    --form-el-padding: 10px;
    --gap: 20px;

    --secondary-color: #007BFF;
    --secondary-color-hover: #0065d2;
    --primary-font: "Roboto", sans-serif;
    --secondary-font: 'Times New Roman', Georgia, serif;
    /* light mode */
    --background-color: #eee;
    --content-background-color: #fff;
    --content-background-color-hover: #e4e7ed;
    --text-color: #222;
    --placeholder-text-color: #666;
    --border-color: #666;
    --border-color-secondary: #aaa;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: var(--primary-font);
    font-optical-sizing: auto;
    font-size: 20px;
}