:root {
    --background: hsl(0, 0%, 17%);
    --background-light: hsl(0, 0%, 20%);
    --background-lighter: hsl(0, 0%, 25%);
    --good: hsl(103, 53%, 40%);
    --good-dark: hsl(103, 53%, 30%);
    --normal: hsl(223, 52%, 45%);
    --normal-dark: hsl(223, 52%, 35%);
    --danger: hsl(0, 52%, 45%);
    --danger-dark: hsl(0, 52%, 35%);
    --active: rgb(0, 255, 200);
}

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

html,
body {
    min-height: 100%;
    background: var(--background);
    color: white;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;

    row-gap: 2rem;
    padding: 1rem 0;
}

button {
    text-decoration: none;
    box-sizing: border-box;
    padding: 0.75rem;
    border: 0;
    border-radius: 0.3rem;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
}

input,
select {
    outline: none;
    padding: 0.75rem;
    border-radius: 0.2rem;
    border: 0;
}

.add-button {
    background: var(--good);
}

.add-button:hover {
    background: var(--good-dark);
}

.edit-button {
    background: var(--normal);
}

.edit-button:hover {
    background: var(--normal-dark);
}

.delete-button {
    background: var(--danger);
}

.delete-button:hover {
    background: var(--danger-dark);
}

.clients,
.links,
.users {
    width: 80%;
    height: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
}

.controls {
    display: flex;
    width: 25rem;
    max-width: 95%;
}

.select-controls {
    flex-direction: column;
    row-gap: 1rem;
}

.select-controls > div {
    display: flex;
    width: 100%;
    column-gap: 1rem;
}

.select-controls > div > * {
    flex-grow: 1;
}

.select-controls > div > button:disabled {
    background: var(--background-lighter);
    user-select: none;
    cursor: default;
}

.select-controls input {
    width: 100%;
}

.link-controls {
    column-gap: 1rem;
    align-items: center;
    justify-content: center;
}

.link-controls > * {
    flex-grow: 1;
}

.display-none {
    display: none;
}

@media only screen and (max-width: 1800px) {
    .clients,
    .links,
    .users {
        width: 100%;
    }
}