body {
    /* primary */
    --primary-h: 46;
    --primary-s: 100%;
    --primary-l: 50%;
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-shade: hsl(var(--primary-h), var(--primary-s), 35%);
    --primary-highlight: hsl(var(--primary-h), var(--primary-s), 70%);
    --primary-text: hsl(0, 0%, 20%);
    /* secondary */
    --secondary-h: 0;
    --secondary-s: 0%;
    --secondary-l: 20%;
    --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
    --secondary-text: hsl(0, 0%, 93%);
    /* other */
    --background: hsl(0, 0%, 66%);
    --border-radius: 8px;
    --line-thickness: 2px;
    --shadow-color: hsla(var(--primary-h), var(--primary-s), 5%, .3);
    --transition-time: .3s;
    --margin: 15px;
    --input-line-height: 50px;
    --card-line-height: 35px;
}

.inputwrapper {
    box-shadow: 0 0 0 2px var(--shadow-color);
}

.inputwrapper.active {
    box-shadow: 0 0 0 3px var(--secondary);
}