:root {
    --colore-sfondo: #111;
    --colore-superficie: #202020;
    --colore-header: #2a2a2a;
    --colore-testo: #e6e1e3;
    --colore-secondario: #aaaaaa;
    --colore-accento: #fc0;
    --colore-accento-hover: #c9a400;
    --colore-accento-trasparetente: #ffe61933;
    --colore-bordo: #777; 
    --colore-ombra: #eeeeee;
    --colore-superficie-trasparente: rgba(0,0,0,0.8);

    --font-family-titolo:  "Corpo",   "Arial", sans-serif;
    --font-family-corpo:   "Corpo",   "Arial", sans-serif;
    --font-family-accento: "Accento", "Arial", sans-serif;
    --font-family-mono:    "Mono",    "Arial", sans-serif;

    --dimensione-titolo-principale: 1.875rem;
    --dimensione-titolo:            1.250rem;
    --dimensione-sottotitolo:       1.125rem;
    --dimensione-testo:             1.000rem;
    --dimensione-testo-secondario:  0.875rem;
    --dimensione-testo-piccolo:     0.750rem;
    --dimensione-icona:             2.250rem;
  
    --wght-titolo: 600;
    --wght-corpo:  400;
  }

body { 
    background: var(--colore-sfondo);
    min-height: 100vh; height: auto;
    display: flex; flex-direction: column; 
    scrollbar-width: none;
    margin: 0; padding: 0;
    color: var(--colore-testo);
  
    font-family: var(--font-family-corpo);
    font-size: var(--dimensione-testo); font-variation-settings: "wght" var(--wght-corpo);
    font-feature-settings: "cv05" 1, "cv08" 1, "ss01" 1, "tnum" 1; /*varianti di numeri più leggibili*/
    -webkit-font-smoothing: antialiased;
}
  
* {
    box-sizing: border-box;
    max-width: 100%;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

header {
	display: flex;
	position: relative;
	justify-content: end;
	align-items: center;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	z-index: 97;
	height: 60px;
}

svg {
	display: block;
	width: var(--dimensione-icona);
	height: var(--dimensione-icona);
	max-width: 40px;
	max-height: 40px;
	fill: none;
	stroke: currentColor;
	stroke-width: 0.05rem;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
	pointer-events: none;
	margin: 5px;
	transition: fill 0.25s ease, color 0.25s ease, stroke 0.25s ease;
}

button, .button {
	background: none;
	border: 2px solid var(--colore-bordo);
	color: var(--colore-testo);
	padding: 7px 12px;
	border-radius: var(--angolo-medio);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--font-family-titolo);
	font-size: var(--dimensione-testo);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}


button.senza-bordo, .button.senza-bordo {
	border: none;
	background: none;
	padding: 6px;
	border-radius: var(--angolo-tondo);
}




#menu-toggle {
	background: none;
	border: none;
	padding: 5px;
	left: 0;
	top: 0;
	z-index: 101;
	position: fixed;
}