// Display Font
@font-face {
    font-family: 'zeta-serif';
    src: url('/sitefonts/dialogue/DialogueB-Regular.woff2') format('woff2'),
         url('/sitefonts/dialogue/DialogueB-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
	}
@font-face {
	font-family: "zeta";
	src: url("/sitefonts/interface/UxSansVariableVF.woff2") format("woff2-variations"),
	   url('/sitefonts/interface/UxSansVariableVF.ttf') format('truetype-variations');
	font-weight: 100 800;
    font-style: normal;
  	font-style: oblique 0deg 20deg;
  	font-display:swap;
	}



:root {
	--unit: clamp(1.5rem, 1.1vw,2rem);
	--unit-border: 1px solid #888;
	
	--unit075: var(--small-unit);
	--unit05: var(--half-unit);
	--unit025: var(--micro-unit);
	--unit02: calc(var(--unit)*0.2);
	--unit015: calc(var(--unit)*0.15);
	
	
	--small-unit: calc(var(--unit)*0.75);
	--half-unit: calc(var(--unit)*0.50);
	--micro-unit: calc(var(--unit)*0.25);
	--unit15: calc(var(--unit)*1.5);
	--unit2: calc(var(--unit)*2);
	--unit25: calc(var(--unit)*2.5);
	--unit3: calc(var(--unit)*3);
	--unit35: calc(var(--unit)*3.5);
	--unit4: calc(var(--unit)*4);
	--unit45: calc(var(--unit)*4.5);
	--unit5: calc(var(--unit)*5);
	--unit6: calc(var(--unit)*6);
	--unit7: calc(var(--unit)*7);
	--unit8: calc(var(--unit)*8);
	--unit10: calc(var(--unit)*10);
	--unit12: calc(var(--unit)*12);
	--unit20: calc(var(--unit)*20);
	--bollino: min(9vw,170px);
	
	--text-size: var(--unit);
	--small-font-size: calc(var(--text-size)*0.8);
	--head-font-size: calc(var(--text-size)*1.2);
	--bt-fontsize: var(--text-size); 

--shake: rotate2 0.5s ease-in-out;
	--home-unit: max(6rem, 14vw, 30vw);
	
	--pink: #FC0D40;
--radius:calc(var(--unit)*1.5);
	/*
	--collection-title-size: clamp(3rem,6vw,12rem);

	--big-title-font-size: clamp(3.8em, 2.5vw,6rem);

	--menu-font-size: var(--unit);
	--menu-margin: calc(var(--menu-font-size));
	--menu-height: calc(var(--menu-font-size)*3.5);
	--menu-gap: calc(var(--menu-font-size)*0.9);

	--margin-container: var(--unit2);
	--margin-small: var(--unit4);
	--margin-medium: var(--unit8);
	
	--huge-logo: calc(var(--unit)*8);


	--text-sizeQ1: max(6rem, 14vw);
	--text-sizeQ2: calc(var(--unit)*10);
	--pangram-sizeQ1: calc(var(--text-sizeQ1)*0.75);
	--tag-sizeQ1: 7vw;

	--pangram-paddingQ1: max(4rem,5vw);
	--box-height: 60vw;
	
	--gridmargin: max(2rem,2vw);
	--grid-padding-left: var(--pangram-paddingQ1);
	
	
	--beta-bg-color:#333;
	--beta-main-color:#ddd;
	--beta-secondary-color:#d0ff00;
	--beta-border: rgba(220,220,220,0.3);
	
	--lightgray: @lightgray2;
	--grayborder: @lightgray2;
	--gray: @mediumgray2;
	--mediumgray:@gray3;
	--darkgray:@gray2;
	--black: rgba(0,0,0,0.95);
	--white: rgba(255,255,255,0.95);
	
	
	--white-font-color: #fafafa;
	--white-border-color: rgba(240,240,240,0.3);
	
	
	--pink-color: @pink;
	
	--col-link: #4bb6f5;
	
	// GALLERY COLOR SWITCH
	--col1-bg-color:#222;
	--col1-light-color: @black;
	
	--col2-bg-color: #ffff00;
	--col2-light-color: #eeee00;
	
	--col3-bg-color: #0000ff;
	--col3-light-color: #0000de;
	
	--screenwidth_cart:clamp(95rem,70vw,@maxscreensize);
	--screenwidth:clamp(90rem,90vw,@maxscreensize);
	--screenwidth_half:calc(var(--screenwidth)/2);
	--screenwidth_mid:calc(var(--screenwidth)*0.8); 	
	
	--standard-margin: calc(var(--unit)*0.6);
	
	--max-width: 180rem;
	
	--char-gap: 3px;
	--grid: grid;
	--shake: rotate2 0.5s ease-in-out;
	
	--c: 0 auto; */
	}

/* Definizione dell'animazione rotate */
@keyframes rotate2 {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-1deg); }
  35% { transform: translateX(-5px); }
  50% { transform: rotate(1deg); }
   75% { transform: translateX(-5px); }
  75% { transform: rotate(-1deg); }
  90% { transform: translateX(0deg); }
  100% { transform: rotate(0deg); }
}

#top {
    width: 100%;
    text-align: center;
}
#top .header-title {
    font-size: var(--unit);
    font-weight: 550;
    -webkit-transition: 0.5s 
ease-in-out;
    transition: 0.5s 
ease-in-out;
    text-transform: uppercase;
	top: var(--unit05);
	}
	
#top a{
	text-transform: uppercase;
    text-decoration: none;
    color: black;
    }
    
.title{text-align: center;
	font-size: 400%;
    margin: 0;
    padding-bottom: var(--unit);
    font-weight: 200;
	}



body{font-size: var(--text-size); font-weight: 300; overflow-x: hidden; font-family:zeta,sans; font-variation-settings: "MONO" 500; }
body a{color:var(--pink); }
body a:hover{
	font-weight: 700;
	opacity: 0.9;
	animation: var(--shake);	
	}




select{display: block}
h2{font-size: 50px; text-align: center;  top: -66px; display: block; width: auto; font-weight: 200; text-align: center; position: relative; margin: 0}
h3{font-size: var(--unit); text-align: center;  top: -15px; display: block; width: auto; font-weight: 600; text-align: center; position: relative; margin: 0}
h4{font-size: var(--unit); text-align: center;  top: -15px; display: block; width: auto; font-weight: 600; text-align: left; position: relative; margin: 0}
label {padding: var(--unit035) 0; display: block; font-size:var(--unit075);}
button {display: block; background: #000000; color: #ffffff; 
		text-transform: uppercase; text-align: center; 
		font-size: var(--unit); font-weight: 500; border: none; padding: 15px 20px; 
		margin-bottom: 10px; margin: 20px auto; 0;border-radius: var(--radius);
		font-family: 'zeta';}

.inner #main{border-top: 3px solid black !important; position:relative; margin-top: 80px; position: relative}
#sub-menu-title{border-bottom: none !important}
body .info{column-count: 1!important; -webkit-column-count: 1!important; -moz-column-count: 1!important;}


width: 17vw;
margin: 0.5vw;
padding: 1.2vw 1vw;
background: #d0d0cc;
font-size: 2.3vw;
height: 7vw;
line-height: 0.9;
font-weight: 200;
color: black;
text-decoration: none;}
/*flex p a:hover{opacity: 0.5; font-weight: 900}
*/flex p label{font-weight: 400}


.largo{ width: 80vw;  margin: 0  auto;}
.w70{ width: 70vw;  margin: 0  auto;}
.info, .medio{ width: 60vw;  margin: 0  auto;}
.w50{ width: 50vw;  margin: 0  auto;}
.stretto{ width: 900px; margin: 0  auto;}

pre {background: #d6d4b4; padding: 1vw; white-space: normal; 
word-break: break-word; overflow: scroll; min-height:15vw; max-height: 30vw;    border-radius: var(--radius);
}


textarea, input {
color: dark;
font-size: 100%;
padding: 10px;
border: gray 1px solid;
width: 100%;
} 
textarea{
width: 100%;
height: 80px;	
}
.txcode{font-family: monospace; font-size: 12px;}

.bottom_info{text-align: center; margin-bottom: var(--unit2); font-size: 80%;}
logo{display: block; text-align: center; margin-top: var(--unit)}





.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--unit075); /* spazio tra i box */
  padding: var(--unit075); /* spazio ai lati */
  max-width: 100%;
}

/* Limita a massimo 4 colonne */
@media (min-width: 800px) {
  .griglia {
    grid-template-columns: repeat(auto-fit, minmax(208px, calc(25% - var(--unit))));
    max-width: calc(1400px); /* 4 box × 160px + gap */
    margin: 0 auto; /* centra la griglia */
  }
}

.box {
	margin: 0;
	}

.box a{
	background: #f0f0f0;
	font-size: 120%;
	padding: var(--unit075);
	min-height: var(--unit7);
	border-radius: var(--unit075);
	display: block;
	text-decoration: none;	
	}