@font-face {
	font-family: 'Bradford';
	src: url('../fonts/bradford.otf') format('opentype');
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 2.5vw;
	font-family: 'Bradford';
	overflow: hidden;
}

.flag-container {
	position: absolute;
    top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
}

.col {
	width: calc(100% / 3);
	position: relative;
}

.col1 {
	background-color: #0800ff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 100vh;
  }


  
  #star01 {
	position: absolute;
	height: 8vw;
	width: 8vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	
  }

  #star02 {
	position: absolute;
	height: 8vw;
	width: 8vw;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#star03 {
	position: absolute;
	height: 8vw;
	width: 8vw;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#star04 {
	position: absolute;
	height: 8vw;
	width: 8vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none; /* Ajout de cette ligne pour désactiver les événements de souris */
	z-index: 9999;

}

#star05 {
	position: absolute;
	height: 8vw;
	width: 8vw;
	top: 37.5%;
	left: calc(100VW/3); /* Calcul de la position relative en pourcentage */
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 9999;
}

#star06 {
	position: absolute;
	height: 8vw;
	width: 8vw;
	top: 62.5%;
	left: calc(100VW/3); /* Calcul de la position relative en pourcentage */
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	transform-origin: center;
}

.rotation1 {
	animation: rotate1  2s infinite
  }

.rotation2 {
	animation: rotate2 3s alternate-reverse 0s infinite;
}

.rotation3 {
	animation: scaleAnimation3 0.5s infinite;
}

.rotation4 {
	animation: rotate4 3s linear 0s infinite
  }

  .rotation5 {
	animation: scaleAnimation5 2s infinite;
}

  .rotation6 {
	animation:  vibration6  6s infinite
}


  .rotation7 {
	animation: blink7 4s ease-in-out infinite;
}


.rotation8 {
	animation: rotate8  2s infinite
  }

 .rotation9 {
	animation: rotate9 3s alternate-reverse 0s infinite;
}


.rotation10 {
	animation: scaleAnimation10 1s infinite;
}

.rotation11 {
	animation: rotate11 5s linear 0s infinite
  }

  .rotation12 {
	animation: scaleAnimation12 4s infinite;

}


.rotation13 {
	animation:  vibration13  6s infinite
}


.rotation14 {
	animation: blink14 2s ease-in-out infinite;
}


.rotation15 {
	animation: rotate15  2s infinite
  }

.rotation16 {
	animation: rotate16  5s infinite
  }

  .rotation17 {
	animation: blink17 1s ease-in-out infinite;
}

.rotation18 {
	animation: scaleAnimation18 1s infinite;
}

#croix {
	position: absolute;
	height: 8vw;
	width: 8vw;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 9999;
	transform-origin: center;
	transform-origin: center;
	/* animation: rotateStar 4s linear 0s infinite; */

}



@keyframes rotate1 {
	0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	50% { transform: translate(-50%, -50%) rotate(180deg) scale(2.5); }
	100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
  }


@keyframes rotate2 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg) scale(1) ;
	  } 	  
	  50% {
		transform: translate(-50%, -50%) rotate(0deg) scale(2.5);
	}

	  100% {
		transform: translate(-50%, -50%) rotate(180deg) scale(1);  }
}



@keyframes scaleAnimation3 {
	0% {
	  transform: translate(-50%, -50%) scale(1);
	}
	50% {
	  transform: translate(-50%, -50%) scale(2.5);
	}
	100% {
	  transform: translate(-50%, -50%) scale(1);
	}
  }

  @keyframes rotate4 {
	0% {
	  transform: translate(-50%, -50%) rotate(0deg) scale(1) ;
	}
	50% {
		transform: translate(-50%, -50%) rotate(180deg) scale(2.5);
	}

	100% {
	  transform: translate(-50%, -50%) rotate(360deg) scale(1) ;
	}
  }



@keyframes scaleAnimation5 {
	0% {
	  transform: translate(-50%, -50%) scale(1);
	}
	50% {
	  transform: translate(-50%, -50%) scale(2.5);
	}
	100% {
	  transform: translate(-50%, -50%) scale(1);
	}
  }

  @keyframes vibration6 {
	0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	50% { transform: translate(-50%, -50%) rotate(180deg) scale(2.5); }
	100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
  }

  @keyframes blink7 {
	0%, 100% {
	  opacity: 1;
	}
	50% {
	  opacity: 0;
	}
	0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	50% { transform: translate(-50%, -50%) rotate(180deg) scale(2.5); }
	100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
  }

  @keyframes rotate8 {
	0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	50% { transform: translate(-50%, -50%) rotate(180deg) scale(2.5); }
	100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
  }


  @keyframes rotate9 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg) scale(1) ;
	  } 	  
	  75% {
		transform: translate(-50%, -50%) rotate(0deg) scale(2.5);
	}

	  100% {
		transform: translate(-50%, -50%) rotate(180deg) scale(1);  }
}

@keyframes scaleAnimation10 {
	0% {
	  transform: translate(-50%, -50%) scale(1);
	}
	50% {
	  transform: translate(-50%, -50%) scale(2.5);
	}
	100% {
	  transform: translate(-50%, -50%) scale(1);
	}
  }

  @keyframes rotate11 {
	0% {
	  transform: translate(-50%, -50%) rotate(0deg) scale(1) ;
	}
	50% {
		transform: translate(-50%, -50%) rotate(180deg) scale(2.5);
	}

	100% {
	  transform: translate(-50%, -50%) rotate(360deg) scale(1) ;
	}
  }


@keyframes scaleAnimation12 {
	0% {
	  transform: translate(-50%, -50%) scale(1);
	}
	50% {
	  transform: translate(-50%, -50%) scale(2.5);
	}
	100% {
	  transform: translate(-50%, -50%) scale(1);
	}
  }


  @keyframes vibration13 {
	0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	50% { transform: translate(-50%, -50%) rotate(180deg) scale(2.5); }
	100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
  }

  @keyframes blink14 {
	0%, 100% {
	  opacity: 1;
	}
	50% {
	  opacity: 0;
	}
	0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	50% { transform: translate(-50%, -50%) rotate(180deg) scale(2.5); }
	100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
  }


  @keyframes rotate15 {
	0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	50% { transform: translate(-50%, -50%) rotate(180deg) scale(2.5); }
	100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
  }

  @keyframes rotate16 {
	0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	50% { transform: translate(-50%, -50%) rotate(0deg) scale(2.5); }
	100% { transform: translate(-50%, -50%) rotate(720deg) scale(1); }
  }

  @keyframes blink17 {
	0%, 100% {
	  opacity: 1;
	}
	25% {
	  opacity: 0;
	}
	0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	50% { transform: translate(-50%, -50%) rotate(0deg) scale(2.5); }
	100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
  }

  @keyframes scaleAnimation18 {
	0% {
	  transform: translate(-50%, -50%) scale(1);
	}
	50% {
	  transform: translate(-50%, -50%) scale(2.5);
	}
	100% {
	  transform: translate(-50%, -50%) scale(1);
	}
  }

.col2 {
	background-color: rgb(255, 255, 255);
	display: flex;
	flex-direction: column; /* Ajout de la direction de la colonne pour centrer verticalement */
	align-items: center; /* Ajout de cette propriété pour centrer horizontalement */
	overflow: auto;
	/* justify-content: center; */
	position: relative;
}

.col3 {
	background-color: rgb(255, 0, 0);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 100vh;
  }


.radio {
    height: 300px;
	background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
    display: flex;
    width: 100%;
    justify-content: center;
  }
  
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(255, 0, 0);
    text-align: center;
    white-space: nowrap;
}

.box1 {
	width: 100%;
	cursor: pointer;
	display: flex;
	height: calc(100vh / 5);
	justify-content: center; /* Centrer horizontalement */
	align-items: center; /* Centrer verticalement */
	text-align: center; /* Centrer le texte horizontalement */
	
  }


  .box2 {
    width: 100%;
    padding-left: 20px; /* Remplacez 3vw par 20px */
    padding-right: 20px; /* Remplacez 3vw par 20px */
    background-image: linear-gradient(to bottom, #c800ff, #a900d8);
    color: rgb(255, 255, 255);
    display: none;
    height: calc(100vh / 5);
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-grow: 1;
}


.box1:hover {
	color: rgb(255, 0, 0);
}


.box1.clicked {
	display: none;
	color: rgb(255, 0, 0);

}



.box2:hover {
	color: rgb(255, 0, 0);
}

.box2.clicked {
	display: block;
}

.image-logo {
	width: 300px;
	height: 103.8px;
	position: absolute;
	animation: top 7.522s linear 0s infinite alternate, left 3s linear 0s infinite alternate;
	display: none;
	z-index: 9999;
	pointer-events: none;
}

@keyframes top {
	0% {
		top: 0;
	}
	100% {
		top: calc(100% - 103.8px);
	}
}

@keyframes left {
	0% {
		left: 0;
	}
	100% {
		left: calc(100% - 300px);
	}
}

/*.image-logo {
	width: 20vw;
	height: 6.92vw; 
	position: absolute;
	animation: top 7.522s linear 0s infinite alternate, left 3s linear 0s infinite alternate;
	display: none;
	z-index: 9999;
  }

@keyframes top {
	0% {
		top: 0;
	}
	100% {
		top: calc(100% - 6.92vw);
	}
}

@keyframes left {
	0% {
		left: 0;
	}
	100% {
		left: calc(100% - 20vw);
	}
}*/

@media screen and (max-width: 768px) {
	.box1 {
		height: 25vh;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		text-align: center;

	}

	.box2 {
		height: 37.5vh;
		overflow-x: hidden; /* Disable horizontal scrolling */
		justify-content: center;
		align-items: center;
		text-align: center;


	}

	html, body {
		font-size: 20px;
		overflow-x: hidden; /* Disable horizontal scrolling */
	}

	.image-logo {
		width: 150px;
		height: 52px;
		position: absolute;
		animation: top 7.522s linear 0s infinite alternate, left 3s linear 0s infinite alternate;
		display: none;
		z-index: 9999;
		pointer-events: none;
	}

	@keyframes top {
		0% {
			top: 0;
		}
		100% {
			top: calc(100% - 52px);
		}
	}

	@keyframes left {
		0% {
			left: 0;
		}
		100% {
			left: calc(100% - 150px);
		}
	}
}