/* ---- Inizio proprietà pagina ---- */
@font-face
{
    font-family: "Cascadia code";
    src: url(../fonts/CascadiaCode.ttf);
}

*
{
    font-family: "Cascadia code";
}

/* Scelta tema in base a quello del sistema */
@media(prefers-color-scheme: light)
{
    *
    {
        color: black;
    }
    
    body
    {
        background: white;
        color: black;
    }

    input[type="number"]
    {
        background: white;
        border: 0.3vw solid black;
    }

    progress[value]
    {
        /* Colore della barra di progresso */
        --progress_color: rgb(13, 202, 240);
        /* Colore di sfondo della barra di progresso */
        --progress_background: white;

        border: 0.2vw solid black;
    }
}

@media(prefers-color-scheme: dark)
{
    *
    {
        color: white;
    }
    
    body
    {
        background: black;
        color: white;
    }

    input[type="number"]
    {
        background: rgb(40, 40, 40);
        border: 0.3vw solid white;
    }

    progress[value]
    {
        /* Colore della barra di progresso */
        --progress_color: rgb(13, 202, 240);
        /* Colore di sfondo della barra di progresso */
        --progress_background: rgb(40, 40, 40);

        border: 0.2vw solid white;
    }
}

/* ---- Fine proprietà pagina ---- */

/* ---- Inizio proprietà flexbox ---- */
.flex
{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

/* Orientamento verticale */
.flex.column
{
    flex-direction: column;
}

/* Orientamento orizzontale */
.flex.row
{
    flex-direction: row;
}

.flex.wrap
{
    flex-wrap: wrap;
}

/* Distanza tra gli elementi: */
.flex.gap
{
    gap: 1vw;
}

/* Distanza tra gli elementi (grande): */
.flex.double_gap
{
    gap: 3vw;
}
/* ---- Fine proprietà flexbox ---- */

/* ---- Inizio proprietà titolo ---- */
h1
{
    margin: 1vw;
    font-size: 6vw;
    text-align: center;
    color: rgb(13, 202, 240);
}
/* ---- Fine proprietà titolo ---- */


/* ---- Inizio proprietà input e label ---- */
label
{
    font-size: 4vw;
    text-align: center;
}

input[type="number"]
{
    width: 30vw;
    border-radius: 0.4vw;
    font-size: 4vw;
    text-align: center;
    outline: none;
}

progress[value]
{
    /* Border radius della barra di progresso */
    --progress_border_radius: 0.3vw;

    /* Eliminazione stili di Chrome/Firefox */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    height: 2vw;
    width: 31.7vw;

    border-radius: var(--progress_border_radius);
    background: var(--progress_background);

    /* -webkit-transition : all 5s ease;
    -moz-transition : all 5s ease;
    -o-transition : all 5s ease;
    transition : all 5s ease; */
}

/* Stile per Chrome */
progress[value]::-webkit-progress-bar
{
    background: var(--progress_background);
    transition: all 700ms ease-out;
}

/* Stile per Chrome */
progress[value]::-webkit-progress-value
{
    background: var(--progress_color);
    transition: all 700ms ease-out;
}

/* Stile per Firefox */
progress[value]::-moz-progress-bar
{
    background: var(--progress_color);
    transition: all 700ms ease-out;
}

/* ---- Fine proprietà input e label ---- */

/* ---- Inizio proprietà pulsanti ---- */
/* Colore custom_button (ciano): */
button.custom_button.cyan
{
    --color: rgb(13, 202, 240);
}

/* Pulsante personalizzato: */
button.custom_button
{
    background: transparent;
    outline: none;
    border: 0.2vw solid var(--color);
    border-radius: 0.4vw;
    padding: 0.5vw 0.8vw;

    color: var(--color);
    font-size: 3.4vw;

    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;

    /* Disabilita la selezione del testo: */
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

button.custom_button:hover
{
    background: var(--color);

    color: white;
}

/* Colore custom_button disabilitato */
button.custom_button:disabled
{
    filter: brightness(60%);
}

#start
{
    font-size: 10vw;
    border: 0.5vw solid var(--color);
}
/* ---- Fine proprietà pulsanti ---- */

/* Compatibilità per smartphone: */
@media only screen and (max-width: 800px)
{
    /* Scelta tema in base a quello del sistema */
    @media(prefers-color-scheme: light)
    {
        input[type="number"]
        {
            border: 0.4vw solid black;
        }

        progress[value]
        {
            border: 0.4vw solid black;
        }
    }

    @media(prefers-color-scheme: dark)
    {
        input[type="number"]
        {
            border: 0.4vw solid white;
        }

        progress[value]
        {
            border: 0.4vw solid white;
        }
    }
    
    .flex.gap
    {
        gap: 2vw;
    }

    .flex.double_gap
    {
        gap: 10vw;
    }
    
    h1
    {
        margin: 2vw;
        font-size: 12vw;
    }
    
    label
    {
        font-size: 8vw;
    }

    input[type="number"]
    {
        width: 50vw;
        font-size: 8vw;
        border-radius: 0.8vw;
    }

    progress[value]
    {
        height: 4vw;
        width: 61vw;
    }

    button.custom_button
    {
        border: 0.5vw solid var(--color);
        font-size: 7.3vw;
        border-radius: 0.8vw;
    }

    #start
    {
        font-size: 20vw;
        border: 0.8vw solid var(--color);
    }
}