body {
	margin: 0;
	padding: 0;
	overflow: hidden;
  }

  :root{
	--font-size: calc(0.6rem + 0.8vw);
	/* font-size: calc(var(--font-size) * 2); */
  }

  .container{
	width: 100vw;
	height: 100vh;
  }
  

  .fill-img {
    display: flex;
    /* justify-content: center;
    align-items: center; */
	margin-top: 0%;
	width: 100%;
    height: 105%;
	overflow: hidden;
}

.fill-img img {
width: 100%;
height: 100%;
	object-fit: cover; 
	flex-shrink: 0;
}

.flag-img {
	position: absolute;
	min-width: 40vw;
	min-height: 100vh;
  }
  
  .flag-img img {
	width: 100%;
    height: 100vh;
    object-fit: cover;
  }

 .street-img {
	position: fixed;
	bottom: 0vh;
	width: 100vw;
	height: 10%;
	overflow: hidden;
	z-index: 4; 
  }
  
  .street-img img {
	width: 100%;
	height: 150%; 
	object-fit: cover; 
  } 

  .top-left-box {
    position: absolute;
    top: 2%;
    left: 1%;
    width: 25%;
    height: 20%;
    background-color: #ffffff;
    z-index: 1;
    border-radius: 10px;
    border: 3px solid rgb(0, 174, 255);
    display: flex; 
    align-items: center;
    text-align: left;
}

.typo-link-stresa{
	display: none;
	position: fixed;
    color: #46aaec;
    font-size: calc(var(--font-size) * 0.9);
    font-family: 'Times New Roman', Times, serif, sans-serif;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
    margin-left: 20%;
    margin-top: 10px;
    line-height: calc(var(--font-size) * 1.7);
}


.typo-link-stresa:hover {
	text-decoration: underline;
  }

  .typo-link-convention{
	display: none;
    color: #46aaec;
    font-size: calc(var(--font-size) * 0.9);
    font-family: 'Times New Roman', Times, serif, sans-serif;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
    margin-left: 20%;
    margin-top: 10px;
    line-height: calc(var(--font-size) * 1.7);
}


.typo-link-convention:hover {
	text-decoration: underline;
  }

  .typo-link-definition{
	display: none;
    color: #46aaec;
    font-size: calc(var(--font-size) * 0.9);
    font-family: 'Times New Roman', Times, serif, sans-serif;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
    margin-left: 20%;
    margin-top: 10px;
    line-height: calc(var(--font-size) * 1.7);
}


.typo-link-definition:hover {
	text-decoration: underline;
  }

  .typo-link-fromage{
	display: none;
    color: #46aaec;
    font-size: calc(var(--font-size) * 0.9);
    font-family: 'Times New Roman', Times, serif, sans-serif;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
    margin-left: 20%;
    margin-top: 10px;
    line-height: calc(var(--font-size) * 1.7);
}


.typo-link-fromage:hover {
	text-decoration: underline;
  }

  .plateau-fromage {
	position: absolute;
	top: 2%;
	left: -10%;
	width: 20%;
	height: 40%;
	z-index: 5;
  }
  
  .plateau-fromage img {
	width: 150%;
	height: 150%;
	object-fit: contain;
	transform: rotate(45deg);
	transition: transform 0.3s ease-in-out;
  }
  

  .plateau-fromage img:hover {
	transition: transform 0.3s ease-in-out;
	transform: rotate(125deg); 
  }

  .middle-right-box {
	display: flex; 
	position: absolute;
	top:calc(100% / 2.5);
	right: 2.5%;
	width: 55%;
	height: 30%; 
	background-color: #ffffff;
	z-index: 3;
	border-radius: 10px;
	border: 2px solid rgb(0, 174, 255);
	align-items: center;
  	justify-content: center;
	text-align: center;
	overflow: hidden;
}

  .typo1{
	margin-top: 5%;
    color: rgb(0, 0, 0); 
    font-size: calc(var(--font-size) * 1); 
    font-weight: bold; 
	font-family: 'Times New Roman', Times, serif, sans-serif; 
}

@font-face {
    font-family: "coeur";
    src: url("./../../assets/fonts/love-story.ttf") format('woff');
}

@font-face {
    font-family: "baloo";
    src: url("./../../assets/fonts/BalooDa-Regular.ttf") format('woff');
}

.typo2{
    color: rgb(255, 0, 0); 
	font-size: calc(var(--font-size) * 1.6); 
	font-family: "coeur", sans-serif;
}

.typo-3{
    color: #000000; 
	font-size: calc(var(--font-size) * 1.8); 
	font-style: italic; 
	font-family: "baloo",sans-serif;
}

  .top-right-box {
	position: absolute;
	right: 2%;
	width: 30%;
	height: 25%;
	z-index: 4;
	display: flex;
	transform-origin: center; 
    transition: transform 0.3s ease;
  }

  .top-right-box:hover {
    transform: scale(1.1); 
}

  .pancarte-stresa {
	position: fixed;
	bottom: -5%;
	left: 10%;
	width: 30%;
	height: 30%; 
	z-index: 5;
  }

  .pancarte-stresa img{
	width: 100%;
	height: 100%; 
	object-fit: contain;
  }

  .pancarte-stresa:hover img {
	filter: blur(5px);
  }

  .fleche {
	position: absolute;
	bottom: 25%;
	left: 18%;
	width: 10%;
	height: 30%; 
	z-index: 5;
  }

  .fleche img{
	width: 150%;
	height: 150%; 
	object-fit: contain;
  }

  .postcards {
	display: flex;
	width: 100%;
	height: 10%;
	position: absolute;
	top: 25%; 
	z-index: 2 
  }

  .postcards-unit-1 {
	flex: 1;
	width: 100%;
  }
  .postcards-unit-2 {
	flex: 1;
	width: 100%;
	cursor: pointer;
  }
  .postcards-unit-3 {
	flex: 1;
	width: 100%;
	cursor: pointer;
  }
  .postcards-unit-4 {
	flex: 1;
	width: 100%;
	cursor: pointer;
  }
  .postcards-unit-5 {
	flex: 1;
	width: 100%;
	cursor: pointer;
  }
  .postcards-unit-6 {
	flex: 1;
	width: 100%;
	cursor: pointer;
  }
  .postcards-unit-7 {
	flex: 1;
	width: 100%;
	cursor: pointer;
  }
  .postcards-unit-8 {
	flex: 1;
	width: 100%;
	cursor: pointer;
  }
  .postcards-unit-9 {
	flex: 1;
	width: 100%;
	cursor: pointer;
  }
  .postcards-unit-10 {
	flex: 1;
	width: 100%;
	cursor: pointer;
  }

  .postcards img{
	position: fixed;
	width: 10%;
	height: 10%;
	object-fit: fill;
 }


  .appelation{
	position: absolute;
	right: 45%;
	top: 2%;
	width: 15%;
	height: 20%;
	z-index: 5;
	display: flex;
  }

  .appelation img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	animation: rotate 4s linear infinite; 
  }

  .appelation:hover {
    animation: rotate 2s linear infinite; 
}

  @keyframes rotate {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }

  .next{
	position: absolute;
	right: 3%;
	bottom: 10%;
	width: 15%;
	height: 15%;
	z-index: 5;
	display: flex;
	transition: transform 0.3s ease-in-out;
  }

  .next:hover {
	transform: scale(2); 
  }

  .next img{
	scale: 2;
	object-fit: contain;
  }