@font-face {
    font-family: 'Inter';
    src: url(./Inter.ttf);
}

:root {
    --light-bg: hsla(205, 6%, 18%, 1);
    --dark-bg: hsla(205, 5%, 12%, 1);
    --text-bright: hsla(205, 0%, 98%, 1);
    --gray: hsla(205, 3%, 33%, 1);
    --primary: hsla(205, 100%, 69%, 1);
    --primary-dark: hsla(205, 78%, 63%, 1);
    --text-dark: hsla(205, 8%, 79%, 1);
    --secondary: hsla(85, 78%, 63%, 1);
    --tertiary: hsla(325, 78%, 63%, 1);

    --gray-morph: #e2e2e24b;

    --border-radius: 5px;

    font-family: Inter;
    font-size: 13px;

    color-scheme: dark;

    border-radius: var(--border-radius);
}

body {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: var(--light-bg);
    padding: 0px;
    margin: 0px;
    height: 100vw;
    overflow: hidden;
}

button {
    border-radius: var(--border-radius);
    cursor: pointer;
}

.button {
    height: 35px;
    padding-inline: 24px;
}
.button:focus {
    outline: none;
}
.button:focus-visible {
    box-shadow: 0px 0px 0px 3px var(--gray);
}

textarea, input[type=text], input[type=number], button {
    background-color: var(--light-bg);
    border: none;
    border-radius: var(--border-radius);
    color: var(--text-bright);
    padding-inline: 12px;

    font-family: Inter;
    font-size: 13px;
}

textarea:focus, :is(input[type=text], input[type=number]):focus {
    outline: 3px solid var(--gray);
}