#preferences-modal{
	--clr-preferences-accent:deepskyblue;
	--clr-preferences-accent-darker:royalblue;
}
#preferences-modal, :where(#preferences-modal) * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#preferences-modal{
	font-family: sans-serif;
	position: fixed;
	background-color: #fff;
	border-radius: 5px;
	padding: 15px 25px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	font-size: 15px;
	line-height: 1.5;
	width: 850px;
	max-width: 95%;
	bottom: 40px;
	left: 50%;
	transform-origin: bottom center;
	translate: -50% 0;
	z-index: 9999999;
	opacity: 0;
	filter: drop-shadow(0px 0px 10px rgba(25,25,25,.3));
	animation: openPreferences .4s .5s forwards cubic-bezier(0,0,.5,1.2);
}

#preferences-modal.preferences-closing{
	opacity: 1;
	animation: closePreferences .4s .1s forwards cubic-bezier(0.30,-0.5, 1, 1);
}

@keyframes openPreferences{
	from{
		opacity: 0;
		transform: scale(.6);
	}
	to{
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes closePreferences{
	from{
		opacity: 1;
		transform: scale(1);
	}
	to{
		opacity: 0;
		transform: scale(.6);
	}
}

#preferences-modal p{
	width: 100%;
}
#preferences-modal p{
	margin-bottom: 15px;
}

#preferences-modal p a, #preferences-modal ul a{
	text-decoration: underline;
	color: var(--clr-preferences-accent);
	opacity: 1;
}
#preferences-modal p a:hover, #preferences-modal ul a:hover{
	text-decoration: none;
	color: var(--clr-preferences-accent-darker);
}

#preferences-modal ul{
	padding-left: 30px;
	list-style-type:square;
	margin-bottom: 10px;
}
#preferences-modal ul ::marker {
	color: rgba(25,25,25,.3);
}

.preferences-title{
	font-size: 25px;
	margin-bottom: 20px;
}

button#preferences-continuer{
	appearance:none;
	-webkit-appearance:none;
	display: inline-block;
	border:0;
	background-color: transparent;
	color: rgba(25,25,25,.5);
	font-size: 13px;
	cursor: pointer;
	align-self: center;
	margin-bottom: 20px;
}

button#preferences-continuer:hover{
	text-decoration: underline;
	color: rgba(25,25,25,.7);
}

.preferences-boutons{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap:10px;
}

button.preferences-button{
	appearance:none;
	-webkit-appearance:none;
	display: inline-block;
	border:4px solid rgba(25,25,25,.1);
	border-radius:50vh;
	background-color: transparent;
	padding: 10px 25px;
	font-size: 15px;
	color: rgba(25,25,25,.6);
	cursor: pointer;
}

button.preferences-button:hover{
	background-color: rgba(25,25,25,.6);
	border-color: rgba(25,25,25,0);
	color: #fff;
}
button#preferences-accepter{
	background-color: var(--clr-preferences-accent);
	border-color: var(--clr-preferences-accent);
	color: #fff;
}
button#preferences-accepter:hover{
	border-color:4px solid var(--clr-preferences-accent);
	color: var(--clr-preferences-accent);
	background-color: transparent;
}

#preferences-modal hr{
	width: 100%;
	height: 3px;
	border:0;
	background-color: rgba(25,25,25,.05);
	margin: 10px 0 20px;
}

@media screen and (max-width:860px){
	#preferences-modal{animation-timing-function: cubic-bezier(0,0,.5,1);}
	#preferences-modal.preferences-closing{animation-timing-function: cubic-bezier(0,0, 1, 1);}
}
@media screen and (max-width:500px), screen and (max-height: 660px){
	#preferences-modal{padding: 10px 15px;bottom: 15px;font-size: 14px;}
	.preferences-title{font-size: 20px;margin-bottom: 15px;}
	button#preferences-continuer{order:-1;margin-left: auto;margin-bottom: 5px;}
	#preferences-modal hr{margin: 0px 0px 10px;}
	.preferences-boutons{width: 100%;margin-top: 5px;}
}