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

/* //////////////////////// */

  .fill-img {
    display: flex;
	max-width: 100vw;
    min-height: 100vh;
	overflow: hidden;
	left: 50%;
}

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

/* //////////////////////// */

.dishes {
	display: flex;
	width: 100vw;
	height: 7%;
	position: absolute;
	top: 0px; 
	z-index: 2;
  }

  .dishes-unit {
	flex: 1;
	width: 100%;
	overflow: hidden; 
  }
  
  .dishes-unit img {
	width: 100%; 
	height: 100%; 
	object-fit: contain; 
  }

  /* //////////////////////// */

  .mario-cadre {
	position: absolute;
	width: 70vw;
	height: 70%;
	overflow: hidden;
	display: flex;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
  }
  
  .mario-cadre img {
	width: 100%;
	height: 100%;
	object-fit: contain;
  }

/* //////////////////////// */

  .cadre-1 {
	position: absolute;
	width: 35vw;
	height: 35vw;
	display: flex;
	bottom: 40%;
	right: 0%;
	z-index: 9;
  }

  .cadre-1 img {
	width: 100%;
	height: 100%;
	object-fit: contain;
  }

  .cadre-2 {
	position: absolute;
	width: 35%;
	height: 35%;
	display: flex;
	bottom: 22%;
	right: 0%;
	z-index: 8;
  }
  .cadre-2 img {
	width: 100%;
	height: 100%;
	object-fit: contain;
  }

/* //////////////////////// */

  .italia {
	position: absolute;
	width: 20%;
	height: 20%;
	display: flex;
	bottom: 0%;
	left: 0%;
	z-index: 6;
  }

  .suisse {
	position: absolute;
	width: 175px;
	height: 175px;
	display: flex;
	bottom: 0px;
	right: 0px;
	z-index: 10;
	transition: transform 0.3s ease-in-out;
	transform-origin: bottom right;
  }

  .suisse img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }

  .suisse:hover {
	transform: scale(1.5); 
	transform-origin: bottom right;
	transition: transform 0.3s ease-in-out; 
  }

  /* //////////////////////// */

  .lasagna1 {
	position: absolute;
	width: 15%;
	height: 20%;
	display: flex;
	top: 7%;
	left: 12%;
	z-index: 8;
  }

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

  .pasta {
	position: absolute;
	width: 15%;
	height: 20%;
	display: flex;
	top: 15%;
	left: 2%;
	z-index: 8;
  }

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

  .pizza1 {
	position: absolute;
	width: 10%;
	height: 15%;
	display: flex;
	top: 15%;
	left: 27%;
	z-index: 8;
  }

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

  .pizza2 {
	position: absolute;
	width: 7%;
	height: 10%;
	display: flex;
	top: 27%;
	left: 17%;
	z-index: 8;
  }

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

  .lasagna2 {
	position: absolute;
	width: 10%;
	height: 12%;
	display: flex;
	top: 25%;
	left: 25%;
	z-index: 8;
  }

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

  .pizza-box {
	position: absolute;
	width: 23%;
	height: 37%;
	display: flex;
	top: 40%;
	left: 1%;
	z-index: 9;
  }

  /* //////////////////////// */
  .message {
	position: absolute;
	width: 30%;
	height: 35%;
	display: flex;
	top: 10%;
	z-index: 9;
	left: 37%;
  }

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

  .message:hover {
	-webkit-animation-name: wiggle;
	-ms-animation-name: wiggle;
	-ms-animation-duration: 1000ms;
	-webkit-animation-duration: 1000ms;
	-webkit-animation-iteration-count: 1;
	-ms-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
	-ms-animation-timing-function: ease-in-out;
  }

  @-webkit-keyframes wiggle {
	0% {-webkit-transform: rotate(10deg);}
	25% {-webkit-transform: rotate(-10deg);}
	50% {-webkit-transform: rotate(20deg);}
	75% {-webkit-transform: rotate(-5deg);}
	100% {-webkit-transform: rotate(0deg);}
  }
  
  @-ms-keyframes wiggle {
	0% {-ms-transform: rotate(1deg);}
	25% {-ms-transform: rotate(-1deg);}
	50% {-ms-transform: rotate(1.5deg);}
	75% {-ms-transform: rotate(-5deg);}
	100% {-ms-transform: rotate(0deg);}
  }
  
  @keyframes wiggle {
	0% {transform: rotate(10deg);}
	25% {transform: rotate(-10deg);}
	50% {transform: rotate(20deg);}
	75% {transform: rotate(-5deg);}
	100% {transform: rotate(0deg);}
  }

    /* //////////////////////// */

  .fleches-fleches {
	position: absolute;
	width: 60%;
	height: 10%;
	display: flex;
	z-index: 7;
	top: 90%;
	left: 55%;
	transform: translate(-50%, -50%);
  }

  .fleches-unit {
	flex: 1;
	width: 100%;
	overflow: hidden; 
  }
  
  .fleches-unit img {
	width: 100%; 
	height: 100%; 
	object-fit: contain; 
  }

    /* //////////////////////// */

.avion {
    position: absolute;
    width: 20%;
    height: 20%;
    top: 80%;
    left: 15%;
    z-index: 11;
    transition: transform 1s ease;
    animation: fly 4s linear infinite; 
}

@keyframes fly {
    to {
        transform: translateX(300%);
    }
}

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