:root {
    --c1-val: 5, 21, 24;
    --c1-alt: 23, 55, 85;
    --c2-val: 49, 115, 153;
    --c3-val: 219, 75, 60;
    --c4-val: 80, 47, 119;
    --c5-val: 253, 245, 232;
    --error-val: 198, 50, 84;
    --right-val: 94, 222, 59;

    /*just to see them here*/
    --cl1: rgb(5,
            21,
            24);
    --cl2: rgb(49,
            115,
            153);
    --cl3: rgb(219,
            75,
            60);
    --cl4: rgb(80,
            47,
            119);
    --cl5: rgb(253,
            245,
            232);
    --rval: rgb(94, 222, 59);

    --c1: rgb(var(--c1-val));
    --c2: rgb(var(--c2-val));
    --c3: rgb(var(--c3-val));
    --c4: rgb(var(--c4-val));
    --c5: rgb(var(--c5-val));

    --contrast-light: var(--c5);
    --contrast-dark: var(--c1);
    --c1-contrast: var(--contrast-light);
    --c2-contrast: var(--contrast-light);
    --c3-contrast: var(--contrast-light);
    --c4-contrast: var(--contrast-light);
    --c5-contrast: var(--contrast-dark);

    --font-size: 20px;
    --inp-font-size: calc(var(--font-size) - 2px);
    --inp-padding: 10px;
    --inp-border-width: 1px;
    --font-family: "Verdana", sans-serif;
    --main-border-color: var(--c2);
    --main-text-color: var(--c1);
    --main-border-radius: 7px;
    --background-color: var(--c1-contrast);

    --error-color: rgb(var(--error-val));
    --error-background: rgba(var(--error-val), 0.2);
    --error-contrast: var(--contrast-light);
    --error-font-size: calc(var(--font-size) - 2px);
}

body {
    font-size: var(--font-size);
    font-family: var(--font-family);
    color: var(--main-text-color);
    background-color: var(--background-color);
}

h1 {
    font-size: calc(var(--font-size) * 1.5);
    position: relative;
}

input,
textarea,
select {
    box-sizing: content-box;
    font-size: var(--inp-font-size);
    color: var(--main-text-color);
    background-color: var(--c1-contrast);
    border-radius: var(--main-border-radius);
    border: var(--inp-border-width) solid var(--main-border-color);
    padding: var(--inp-padding);
}

select,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button {
    border-radius: var(--main-border-radius);
    border: 1px solid var(--main-border-color);
    background-color: var(--c2);
    color: var(--c5);
    padding: var(--inp-padding);
    cursor: pointer;
    font-size: calc(var(--font-size) * 1.5);
}

button:hover {
    background-color: var(--c5);
    color: var(--c2);
    padding: var(--inp-padding);
}