:root {
    --accent: #5f97ec;
    --dull-accent: #3563ab;
    --black-0: #000;
    --black-1: #1a1a1a;
    --gray-1: #333333;
    --gray-2: #4d4d4d;
    --gray-3: #666666;
    --gray-4: #808080;
    --gray-5: #999999;
    --gray-6: #b3b3b3;
    --gray-7: #d7d7d7;
    --white: #fff;
    --red: #ff5454;
    --green: #5def5d;
    --dull-green: #2c892c;

    --border: var(--gray-5);
    --error: var(--red);
}

body, html {
    background-color: var(--black-0);
    color: var(--white)
}

html {
    font-size: 22px
}

* {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

a {
    color: var(--accent);
}

a:visited {
    color: var(--accent)
}

button {
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: solid 1px;
    border-color: var(--border);
    border-radius: 5px;
    background-color: var(--dull-accent);
    color: var(--white);
    transition: border-color 300ms;
}

button:hover {
    border-color: var(--accent);
}

button:disabled {
    background-color: var(--gray-4);
    cursor: default;
    border-color: var(--gray-1) !important;
}

button.secondary {
    background-color: #00000000;
}

label {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
}

input {
    padding: 0.25rem 0.5rem;
    background-color: var(--gray-1);
    border: 1px solid;
    border-radius: 5px;
    border-color: var(--border);
    transition: border-color 300ms;
    color: var(--white);
    font-size: 1rem;
    outline: none;
    margin-bottom: 0.5rem;
}

input:focus {
    border-color: var(--accent);
}

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

main.centered {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.error {
    color: var(--error);
    text-align: center;
}