:root {
	--background-filler-color:#C8E4CB;
	--site-background-color:#FFD500;
	--colore-testo:black;
	/*--colore-titoli:#E84C58; */
	--colore-titoli:#007f3f;

	--max-width-site:800px;
	--min-width-site:320px;

	--site-width:clamp(var(--min-width-site),90vw, var(--max-width-site));
	--gradient-width:calc((100vw - var(--site-width))/2);
}

.no-wrap{
	white-space: nowrap;
}

body{
	background-color:var(--background-filler-color);
	color:var(--colore-testo);
	font-family: "Pangolin", cursive;
	font-weight: 200;
	font-style: italic;
	overflow-x: hidden;
}

#wrapper{
	display: flex;
	justify-content: center;
	width:100%;
	min-width:var(--min-width-site);
}

/* contenitore del sito */
#site-container{
	position: relative;
	background-color:var(--site-background-color);
	/*width:clamp(var(--min-width-site), 90vw, var(--max-width-site));*/
	width:var(--site-width);
	min-height:100vh;
}

/* sfumature a sinistra e a destra del container del sito */
#site-container::before{
	content: "";
	position: absolute;
	top: 0;
	/*
	left: calc(-1 * clamp(5vw, 5vw, 450px));
	width: clamp(5vw, 5vw, 450px);
	*/
	width:var(--gradient-width);
	left: calc(-1 * var(--gradient-width));
	
	height: 100%;
	background: linear-gradient(to left, var(--site-background-color), var(--background-filler-color));
	z-index: 11;
	pointer-events: none;
}

#site-container::after{
	content: "";
	position: absolute;
	top: 0;
	/*
	right: calc(-1 * clamp(5vw, 5vw, 450px));;
	width: clamp(5vw, 5vw, 450px);
	*/
	width:var(--gradient-width);
	right: calc(-1 * var(--gradient-width));

	height: 100%;
	background: linear-gradient(to right, var(--site-background-color), var(--background-filler-color));
	z-index: 11;
	pointer-events: none;
}

@media ( max-width: 800px ){
	#site-container::before, #site-container::after{
		display:none;
	}
	#site-container{
		width:100%;
	}
}

/* header */
.logo-img{
	width:clamp(250px, 30vw, 350px);
}

#flags-container{
	position: absolute;
	top:5px;
	right:20px;	
	display: flex;	
	flex-direction: row;
	list-style: none;
	gap: 1px;
	text-align: center;
	width:224px;
	z-index:12;
}

#flags-container a, #flags-container img{
	width:55px;
}

#flags-container a{
	transition: transform 0.5s ease;
}

#flags-container a:hover, #flags-container a:focus{
	filter: drop-shadow(2px 4px 8px #000);
}
#flags-container img.disabled {
	opacity: 0.5;
}

.tooltip-text{
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #333;
	color: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 14px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 10;	
}
a:hover .tooltip-text, a:focus .tooltip-text{
	opacity: 1;
}

@media ( max-width: 450px ){
	#flags-container  {width:182px;}
	#flags-container a, #flags-container img  {width:40px;}
	.tooltip-text{left: -30px;}
}

/* main */
#main{
	padding:30px 0 0 0;
	min-height:35vh;
}

h1 {
	text-transform: uppercase;
	font-weight: bold;
	display:inline;
	font-size:1.5em;
	line-height:1.3em;
}

#main-text p{
	font-size:1.5em;
	line-height:1.3em;
	display:inline;	
}


@media ( max-width: 800px ){
	#main{padding:10px 10px;}
}

@media ( max-width: 450px ){	
	h1, #main-text p  {font-size:1.0em; line-height:1.0em;}
}


/* Puzzle pieces */

#puzzle-pieces{
	position:relative;
	width:100%;
}
.puzzle-piece .puzzle-piece-resizable{
	width:300px;
	/*width:50%;
	max-width:390px;
	min-width:320px;*/
}
.puzzle-1 .piece{
	position:absolute;
	left: 5px;
	top: -5px;
}
.puzzle-piece .piece-shadow{
	margin: 50px 10px;
}

.child-1{
	position: absolute;
	/*top: clamp(150px, calc(150px + (100vw - 710px) * 0.25), 190px);*/
	top: 140px;
	/*left: clamp(230px, calc(230px + (100vw - 710px) * 0.25), 270px);*/
	left: 210px;
	/*width: clamp(90px, calc(90px + (100vw - 710px) * 0.25), 100px);*/
	width:80px;
	transform: rotate(5deg);
	transform-origin: center center;
}

.puzzle-1 .texts{
	position: absolute;
	left:45px;
	top:5px;	
	z-index:11;
	max-width:250px;
	transform: rotate(-5deg);
}
 
.puzzle-piece .texts {
    color: var(--colore-testo);
	font-size: 1.3em;
    line-height: 1.5em;
	/*text-shadow: 2px 2px 4px rgba(0,0,0,0.6);*/
}
.puzzle-piece .texts h2 {
    color: var(--colore-titoli);
	font-size: 1.3em;
    line-height: 1.5em;
	margin-top:1em;
	text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}
.puzzle-piece .texts p{
	width:180px;
}

img.piece{
	opacity: 0.8; 
}

.puzzle-1 a{
	display:block;
	transform: rotate(5deg);
	max-width: 310px;
}

.puzzle-1 a:hover {
	transition: all 0.3s ease;
	transform: rotate(1deg);
}

.puzzle-1 a:hover .texts{
	transition: all 0.3s ease;
	transform: rotate(0deg);
	transform: scale(1.11);
}

.puzzle-2 .piece{
	position:absolute;
	right: 25px;
	top: -20px;
	/*transform: scale(1.11);*/
}

.puzzle-2 .piece-shadow{
	position:absolute;
	right: 10px;
	top: -65px;
}
	
.puzzle-2 .puzzle-piece-resizable{
	transform: rotate(-15deg);
	transform-origin: center center;
}

.child-2{
	position: absolute;
	/*top: clamp(150px, calc(150px + (100vw - 710px) * 0.25), 190px);*/
	top: 125px;
	/*left: clamp(230px, calc(230px + (100vw - 710px) * 0.25), 270px);*/
	right: 20px;
	/*width: clamp(90px, calc(90px + (100vw - 710px) * 0.25), 100px);*/
	width:55px;
}

.puzzle-2 .texts{
	position: absolute;
	right:20px;
	top:5px;	
	z-index:11;
	width:230px;
}

.puzzle-2 .texts h2 {
	font-size: 1.3em;
    line-height: 1.5em;
	margin-top:0;
	width:210px;
}
.puzzle-piece .texts p{
	width:180px;
}

@media ( max-width: 680px ){
	/* sposta tutto più in basso*/
	.puzzle-2 .piece{
		top: 320px;
		right: 35px;
	}	
	.puzzle-2 .piece-shadow{
		top: 275px;
		right: 20px;
	}
	.puzzle-2 .texts{
		top:345px;	
	}	
	.child-2{
		top: 465px;
		right: 30px;
	}

	#puzzle-pieces{
		height:630px;
		margin-bottom: 20px;
	}
}

@media ( max-width: 350px ){
	body{
		overflow-x:initial;
	}
}


/* footer */

#footer {
	text-align:center;
	margin:-40px 5px 0 5px;
}

#footer p{
	font-size:1.3em;
	line-height:1.5em;
	display:block;
}

#footer a{
	color:var(--colore-testo);
}

#footer b{
	font-weight: bold;
}

@media ( max-width: 850px ){
	#footer .singleLineOnly{display: none;}
	#footer p{display: block;}
}

@media ( max-width: 450px ){
	#footer .divisore{display:none}
	#footer .tel{
		display:block;
	}
}