:root{
    user-select: none;
    box-sizing: border-box;
    font-size: 16px;

    --blu: #369;
    --verde: #396;
    --arancione: #963;
    --rosso: #936;
    --scuro : #222;
    --chiaro : #CCC;
    --nero : #000;
    --grigio : #999;
    --bianco : #fff;
}

.blu { color: var(--blu); } .bblu{ background-color: var(--blu); }
.verde { color: var(--verde); } .bverde{ background-color: var(--verde); }
.arancione { color: var(--arancione); } .barancione{ background-color: var(--arancione); }
.rosso { color: var(--rosso); } .brosso{ background-color: var(--rosso); }
.scuro { color: var(--scuro); } .bscuro{ background-color: var(--scuro); }
.chiaro { color: var(--chiaro); } .bchiaro{ background-color: var(--chiaro); }
.nero { color: var(--nero); } .bnero{ background-color: var(--nero); }
.grigio { color: var(--grigio); } .bgrigio{ background-color: var(--grigio); }
.bianco { color: var(--bianco); } .bbianco{ background-color: var(--bianco); }

.clickable{ cursor: pointer;}
.shadowed{  box-shadow: 2px 3px 10px var(--scuro); }
.rounded{  border-radius: 4px; }

.mauto{ margin:auto}

.pt10{ padding-top: 10px; } .pt20{ padding-top: 20px; }.pt30{ padding-top: 30px; }
.pb10{ padding-bottom: 10px; } .pb20{ padding-bottom: 20px; }.pb30{ padding-bottom: 30px; }
.p10{ padding: 10px; }  .p20{ padding: 20px; } .p30{ padding: 30px; }
.m10{ margin: 10px; }  .m20{ margin: 20px; } .m30{ margin: 30px; }

.w100{ width:100%;}
.w75{ width:75%;}
.w50{ width:50%;}

.bselected{ background-color: var(--verde); box-shadow: 0px 0px 10px var(--bianco ); }


.picturecontainer{
    display: grid;
    width: 100%;
    padding: 10px;
    grid-template-columns: repeat( auto-fit, 200px );
    gap: 10px;
}

.foto{
    display: grid;
    place-items: center center;
    padding: 5px;
    gap: 5px;
}

.foto .imageContainer{
    width: 100%;
    max-height: 200px;
}
.foto .imageContainer img{
    width: 100%;
    object-fit: contain;
}