:root{
    --bar-height:4.5rem;
    --accent-color:rgb(90,15,200);
    --glass-color:rgba(255,255,255,0.5);
    --glass-color-dark:rgba(0,0,0,0.5);
    --text-accent-color:white;
}
body{
    background-image:url("immagini/background_light.jpg");
    background-size:cover;
    background-attachment:fixed;
    background-position:50% 50%;
    color:black;
    font-family:sans-serif;
}
#barra{
    position:fixed;
    z-index:99999;
    top:0; left:0; right:0; height:var(--bar-height);
    background:var(--glass-color);
    backdrop-filter:blur(0.5rem);
    box-shadow:0 0 2rem rgba(0,0,0,0.2), 0 0 0.2rem rgba(0,0,0,0.2);
    text-align:center;
}
#logo{
    height:var(--bar-height);
    width:auto;
}
#principale{
    max-width:35rem;
    margin:0 auto;
    margin-top:calc(var(--bar-height) + 2rem);
}
div.riquadro{
    background:var(--glass-color);
    backdrop-filter:blur(0.5rem);
    color:black;
    margin-bottom:2rem;
    box-shadow:0 0.2rem 0.7rem rgba(0,0,0,0.2);
    min-height:5rem;
    border-radius:0.2rem;
    overflow:hidden;
}
div.riquadro > div.prop{
    background:var(--accent-color);
    color:var(--text-accent-color);
    font-weight:bold;
    padding:0.2rem;
    text-align:center;
}
div.riquadro > div.val{
    padding:0.5rem;
}
#map{
    display:block;
    width:100%;
    height:15rem;
    border:none;
}

@media all and (prefers-color-scheme:dark){
    body{
        background-image:url("immagini/background_dark.jpg");
    }
    #barra{
        background:var(--glass-color-dark);
    }
    div.riquadro{
        background:var(--glass-color-dark);
        color:white;
    }
}

