:root{
    --colore-sfondo-chiaro: #eee;
    --colore-sfondo-scuro: #333;
    --padding-h2: 0.5rem;
    --padding-h3: 1.5rem;
    --padding-h4: 2.5rem;
    --dimensioni-font-h4: 1rem;
    --dimensioni-font-h1: calc(var(--dimensioni-font-h4) + 2rem);
    --dimensioni-font-h2: calc(var(--dimensioni-font-h4) + 1rem);
    --dimensioni-font-h3: calc(var(--dimensioni-font-h4) + 0.5rem);
    --colore-bottone-tema-chiaro: #6e90f7;
    --colore-bottone-tema-scuro: #227;
}
header{
    padding-left: 1rem;
}
button{
    margin: 1em;
    background-color:var(--colore-bottone-tema-chiaro);
    padding: 1em;
    border-radius: 1em;
    border-style: none;
}
form input{
    display: block;
    margin: 0.5em;
    border: 0.5px solid lightgrey;
    border-radius: 0.5em;
    height: 2em;
    width: 90%;
}
.contenitore {
    background-color: var(--colore-sfondo-chiaro);
    border-radius: 1rem;
    padding: 1rem;
    margin-top: 2rem;
}

.risultato{
    visibility: hidden;
}

.H1 {
    font-size: var(--dimensioni-font-h1);

}
.H1:hover::before {
    display:block;
    content: "h1";
    font-size: 0.9rem;
}
.H2 {
    font-size: var(--dimensioni-font-h2);
    padding-left: 0.5em;

}
.H2:hover::before {
    display:block;
    content: "h2";
    font-size: 0.9rem;
}
.H3 {
    font-size: var(--dimensioni-font-h3);
    padding-left: 1.5em;
}
.H3:hover::before {
    display:block;
    content: "h3";
    font-size: 0.9rem;
}
.H4 {
    font-size: var(--dimensioni-font-h4);
    padding-left: 2.5em;
}
.H4:hover::before {
    display:block;
    content: "h4";
    font-size: 0.9rem;
}
.H1:active::before {
    display:block;
    content: "h1";
    font-size: 0.9rem;
}
.H2:active::before {
    display:block;
    content: "h2";
    font-size: 0.9rem;
}
.H3:active::before {
    display:block;
    content: "h3";
    font-size: 0.9rem;
}
.H4:active::before {
    display:block;
    content: "h4";
    font-size: 0.9rem;
}
:where(.H1,.H2,.H3,.H4):hover{
    color:grey;
    --dimensioni-font-h4: calc(var(--dimensioni-font-h4) + 0.25rem);
}

@media (prefers-color-scheme: dark){
.risultato {
    background-color: var(--colore-sfondo-scuro);
}
.contenitore{
    background-color: var(--colore-sfondo-scuro);
}
button{
    background-color:var(--colore-bottone-tema-scuro);
}
}