@font-face {
  font-family: dosis;
  src: url(https://lacolmena.be/bibliotheque/fonts/dosis/static/Dosis-Medium.ttf);
}

body > img{
  position: absolute;
  z-index: -1;
  height: 140vh;
  width: auto;
  opacity: 0.2;
}

body{
	background: #679b7c;
	margin: 0;
	display: flex;
	place-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	color: #000000;
	overflow: hidden;
	font-family: dosis;
	position: fixed;
}

.cadre{
	background: #033f33;
  position: relative;
  aspect-ratio: 16/10;
  width: 64vw;
  #height: 70vh;
  min-height: 420px;
  min-width: 670px;
  margin-top: 15px;
  margin-left: -5px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.info{
	position: absolute;
	width: 65%;
	height: 8%;
	background: #025543;
	transform: translate(-50%, -50%);
  top: 0%;
  left: 50%;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.cadre > a > img{
  position: absolute;
  width: 4.2%;
  right : -4.7%;
  cursor: pointer;
  filter: contrast(70%);
}


h1{
	color: #cfcfc6;
  #letter-spacing: 1.5px;
  letter-spacing: 0.07ch;
  font-size: clamp(20px, 2vw, 2.05vw);
}

p{
	color: #cfcfc6;
  word-spacing: 0.05ch;
  letter-spacing: 0.05ch;
  line-height: 127%;
  font-size: clamp(14.5px, 1.3vw, 1.35vw);
  #background-color: darkred;
  margin: 0.4vw 0.5vw 0.8vw 0.25vw;
}

ul{
	color: #cfcfc6;
  word-spacing: 0.05ch;
  #letter-spacing: 1.2px;
  letter-spacing: 0.05ch;
  line-height: 127%;
  font-size: clamp(15px, 1.3vw, 1.35vw);
  #background-color: darkred;
  margin: 0;
}

li{
	 margin: 0.3vw 0px 0px 0px;
}


.center{
	position: relative;
	width: 97.5%;
	height: 90%;
  margin-top: 3%;
  overflow-x: hidden;
  overflow-y: auto;
  #border: solid;
  border-width: 0.3em;
  border-color: #025543;
  border-radius: 6px;
}

.center::-webkit-scrollbar {
  display: none;
}

.center{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.big1{
	position: relative;
	width: 100%;
	height: 45%;
	#background: blueviolet;
	display: flex;
}

.bloc1{
	position: relative;
	width: 70%;
	height: 100%;
	#background: black;
}

.photo1{
	position: relative;
	width: 30%;
	height: 100%;
	background: #025543;
	border-radius: 6px;
	overflow: hidden;
}

.photo1 > img{
	position: absolute;
  width: 110%;
  z-index: 1;
  top : 38%;
  left : 48%;
  transform: translate(-50%, -50%);
}


.big2{
	top: 3%;
	position: relative;
	width: 100%;
	height: 55%;
	#background: green;
	display: flex;
}

.bloc2{
	position: relative;
	width: 71%;
	height: 100%;
	#background: black;
	left: 0.8%;
}

.photo2{
	position: relative;
	width: 30%;
	height: 100%;
	background: #025543;
	border-radius: 6px;
	overflow: hidden;
}

.photo2 > img{
	position: absolute;
  width: 215%;
  z-index: 1;
  top : 50%;
  left : 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 1110px) {
	

	.big2{
		height: 72%;
	}


}

@media (max-width: 1025px) 
{
	@media (max-width: 768px)
	{
		.cadre{
		  background: #033f33;
		  position: relative;
		  aspect-ratio: 10/16;
		  height: 75vh;
		  width: auto;
		  min-height: 420px;
		  min-width: 250px;
		  border-radius: 6px;
		  top: -3%;
		  margin-left: 0px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}

		.big1 > .photo1{
			display: none;
		}

		.big2 > .photo2{
			display: none;
		}

		.big3 > .photo3{
			display: none;
		}

		.bigE {
			top: 1%;
			position: relative;
			width: 100%;
			height: 30%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-evenly;
			text-align: center;
		}
		.bigE > .photo1, .photo2{
			position: relative;
			width: auto;
			height: 95%;
			aspect-ratio: 1/1;
			background: black;
			border-radius: 6px;
			overflow: hidden;
		}

		.bigE > .photo1 > img{
			width: 130%;
		}
		.bigE > .photo2 > img{
			width: 160%;
		}

		.info{
			width: 65%;
			height: 8%;
		}
		.big1, .big2, .big3{
			position: relative;
			width: 100%;
			height: auto;
			#background: blueviolet;
			display: flex;
			flex-direction: column;
			align-items: center;
			#justify-content: center;
			text-align: center;
		}

		.bloc1, .bloc2, .bloc3{
			top : 0%;
			position: relative;
			width: 99%;
			height: auto;
			#background: black;
			left: 0%;
		}
	}
}