:root {
    --main: white;
    --accent: rgb(117, 117, 255);
    --secondary: rgb(237, 91, 47);

    --radius: 4px;
}

::selection {
    background-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

:focus-visible {
    outline: 1px dashed var(--accent);
    outline-offset: 2px;
}


body {
    margin: 0;
    min-height: 100dvh;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;

    background: radial-gradient(#141414, #000);
    background-color: black;
    color: var(--main);
    font: 400 12px monospace;
    
}

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

a:hover {
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 70%, var(--main))
}

input, button {
    font: inherit;
    color: var(--main);
    background-color: transparent;
    text-align: center;

    border: 1px solid color-mix(in srgb, var(--main) 10%, transparent);
    /* border: none; */
    border-radius: var(--radius);

    padding: 0.3em 0.8em;

    transition: 80ms all;
}


input:hover, button:hover {
    --main: var(--accent);

    transition: 100ms all;
}

input::before, button::before {
    content: "> ";
}

label {
    display: flex;
    flex-flow: column nowrap;
    gap: 1em;
    justify-content: space-between;
    align-items: baseline;
}


input#password {
    -webkit-text-security: disc;
}

@keyframes fadeIn {
    0% {
        opacity: 0
    } 100% {
        opacity: 1;
    }
}