button {
    border: 1px solid var(--tint);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.button {
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem;
    transition: 0.25s;

    &.border {
        border: 1px solid var(--tint);
    }

    &.border-radius {
        border-radius: 0.5rem;
    }

    &:hover {
        opacity: 0.5;
    }
}

input {
    border-left: 1px solid hsla(0, 0%, 0%, 0);
    border-top: 1px solid hsla(0, 0%, 0%, 0);
    border-right: 1px solid hsla(0, 0%, 0%, 0);
    border-bottom: 1px solid var(--tint);
    padding: 0.5rem;
}

label {
    padding: 0.5rem;
}

select {
    border-left: 1px solid hsla(0, 0%, 0%, 0);
    border-top: 1px solid hsla(0, 0%, 0%, 0);
    border-right: 1px solid hsla(0, 0%, 0%, 0);
    border-bottom: 1px solid var(--tint);
    padding: 0.5rem;
}

.muted {
    font-size: 0.75rem;
    opacity: 0.75;
}

:root {
    --background-transparent-dark: hsl(0, 0%, 10%, 0.75);
    --color-transparent-dark: hsl(0, 0%, 100%);
    --background: hsl(0, 0%, 90%);
    --color: hsl(0, 0%, 0%);
    --card-background: hsl(0, 0%, 95%);
    --card-color: hsl(0, 0%, 5%);
    --item-background: hsl(0, 0%, 100%);
    --item-color: hsl(0, 0%, 10%);
    --tint-dark: hsl(235, 5%, 5%);
    --tint: hsl(235, 50%, 50%);
    --tint-light: hsl(235, 95%, 95%);
}

html {
    background-color: var(--tint-dark);
    color: var(--tint-light);
}