@font-face {
    font-family: "Averia Gruesa Libre";
    font-weight: 400;
    src:
        url("fonts/AveriaGruesaLibre-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Outfit";
    font-weight: 100 900;
    src:
        url("fonts/Outfit-VariableFont_wght.ttf") format("truetype");
}

:root {
    --background: #fff;
    --ghost:      #e7e7e7;
    --gray:       #999;
    --orange:     #f87524;
}

html {
    --size: 75px;
    --gradient: #0000 90deg, var(--ghost) 0;

    background:
        conic-gradient( from 90deg at 1px 1px, var(--gradient) ),
        conic-gradient( from 90deg at 0.5px 0.5px, var(--gradient) ),
        var(--background);
    background-size:
        var(--size) var(--size), calc( var(--size) / 5 ) calc( var(--size) / 5 );
}

main {
    display: flex;
    justify-content: center;
    margin-top: 30vh;
}

[prompt] {
    width: 60vw;
}

[prompt] p {
    margin: 0;
    color: var(--gray);
    font-family: "Outfit";
    font-size: 4.2rem;
    font-weight: 444;
}

h1 {
    display: inline;
    color: var(--orange);
    font-family: "Averia Gruesa Libre";
    font-size: 5rem;
    font-weight: 700;
    min-height: 1.2em;
    border-right: 0.3rem solid var(--orange);
}

@keyframes blink {
    50% { border-color: transparent }
}

@media screen and (max-width: 500px) {
    main       { margin-top: 15vh; }
    [prompt]   { width: 70vw; }
    [prompt] p { font-size: 2.2rem; }
    h1         { font-size: 3rem; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #111;
        --ghost:      #1a1a1a;
        --gray:       #777;
        --orange:     #ff512f;
    }
}