:root {
    --color-border: #d9d9d9;
    --color-box-shadow: rgba(0, 0, 0, 0.3);
    --color-red: #ff5722;
    --color-orange: #ffb800;
    --color-green: #16baaa;
    --color-blue: #1e9fff;
    --color-purple: #a233c6;
    --color-dark: #2f363c;
    --color-light: #fafafa;
    --color-hover: #eeeeee;
    --font-size-head: 16px;
    --width-workspace: 1280px;
    --height-head: 60px;
    --height-foot: 30px;
}

html, body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    background-color: #EEEEEE;
}

a {
    color: var(--color-dark);
    text-decoration-line: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.btn {
    border: none;
    border-radius: 3px;
    padding: 10px;
    cursor: pointer;
}

.btn:active {
    opacity: 0.95;
}

.btn-red {
    background-color: var(--color-red);
    color: var(--color-light);
}

.btn-orange {
    background-color: var(--color-orange);
    color: var(--color-light);
}

.btn-green {
    background-color: var(--color-green);
    color: var(--color-light);
}

.btn-blue {
    background-color: var(--color-blue);
    color: var(--color-light);
}

.btn-purple {
    background-color: var(--color-purple);
    color: var(--color-light);
}

.btn-dark {
    background-color: var(--color-dark);
    color: var(--color-light);
}

.btn-light {
    background-color: var(--color-light);
    color: var(--color-dark);
}