/* SPDX-License-Identifier: 0BSD */

@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-variant-alternates: styleset(open-digits, disambiguation);
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-feature-values InterVariable {
    @styleset {
        open-digits: 1;
        disambiguation: 2;
    }
}

@media not (display-mode: browser) {
    a {
      pointer-events: none;
    }
}

:root {
    --main-color: #ff9393;
    --bright-background-color: #402020;
    --background-color: #201010;
    --main-text-color: #cccccc;
    font-size: 1.1em;
}

body {
    font-family: InterVariable, -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Arial, sans-serif;
    align-items: center;
    background-color: var(--background-color);
    color: var(--main-text-color);
    max-width: 40em;
    margin: 0 auto;
    padding: 1em;
}

button {
    background-color: var(--main-color);
    margin-right: 0.5em;
    border-radius: 1em;
    padding: 0.5em 1em;
    border: 0;
}

input[type=password], input[type=text], input[type=number] {
    font-family: "JetBrains Mono", Menlo, "Roboto Mono", Consolas, "Courier New", monospace;
    background-color: var(--bright-background-color);
    color: var(--main-text-color);
    font-variant-ligatures: none;
    border-radius: 0.5em;
    font-size: 1.2em;
    padding: 0.5em;
    border: 0;
}

input {
    margin-right: 0.5em;
}

input[type=checkbox] {
    accent-color: var(--main-color);
}

input:invalid + div::after {
    content: "Too short length";
}

h1, h2, h3, h4, h5, h6, a {
    color: var(--main-color);
}

h1, h2 {
    border-bottom: 2px solid var(--bright-background-color);
}

.new-line {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
}

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

.header {
    margin-bottom: 0.5em;
    font-weight: 600;
    margin-top: 1em;
}

.long {
    width: 80vw;
}

.separator {
    border-top: 2px solid var(--bright-background-color);
    margin-bottom: 0.5em;
    margin-top: 2em;
}

.logos {
    text-align: center;
    display: block;
}

.logo {
    width: 2em;
}