:root {
	--wp--preset--color--black: #000000;
	--wp--preset--color--cyan-bluish-gray: #abb8c3;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--pale-pink: #f78da7;
	--wp--preset--color--vivid-red: #cf2e2e;
	--wp--preset--color--luminous-vivid-orange: #ff6900;
	--wp--preset--color--luminous-vivid-amber: #fcb900;
	--wp--preset--color--light-green-cyan: #7bdcb5;
	--wp--preset--color--vivid-green-cyan: #00d084;
	--wp--preset--color--pale-cyan-blue: #8ed1fc;
	--wp--preset--color--vivid-cyan-blue: #0693e3;
	--wp--preset--color--vivid-purple: #9b51e0;
	--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
	--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
	--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
	--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
	--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
	--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
	--wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
	--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
	--wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
	--wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
	--wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
	--wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
	--font-family-sans-serif: "Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	
	/* --defaultBg: url('../img/default.webp'); */
	/* --loginBg: url('/img/login.webp'); */
	--defaultBg: var(--wp--preset--gradient--midnight);
	--loginBg: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan);
	--notfoundBg: url('/img/404.webp');

	--font-table: var(--font-family-sans-serif);
	--font-container: var(--font-family-monospace);
	--form-table-radius: 1rem;
}
/*
	@font-face {font-family: Montserrat-Bold;src: url(/font/Montserrat-Bold.ttf);}
	@font-face {font-family: Montserrat-Regular;src: url(/font/Montserrat-Regular.ttf);}
	@font-face {font-family: raleway;src: url(/font/raleway.regular.ttf);}
*/

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	background-image: var(--defaultBg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;

	.container {
		font-family: var(--font-container);
		position: absolute;
        top:5px;
        left:5px;
        width: calc( 100% - 10px) ;
        height: calc( 100% - 10px) ;
		/* overflow-y: auto;
		overflow-x: hidden; */
			background-color: #ffffff44;
			background-image: linear-gradient(hsla(0, 0%, 0%, .05) 2px, transparent 0),
				linear-gradient(90deg, hsla(0, 0%, 0%, .05) 2px, transparent 0),
				linear-gradient(hsla(0, 0%, 0%, .05) 1px, transparent 0),
				linear-gradient(90deg, hsla(0, 0%, 0%, .05) 1px, transparent 0);
			background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
			background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
		padding-top: 60px;
		padding-bottom: 60px;
		display: flex;
		align-items: center;
		flex-direction: column;

		/* PAGE */
		/* Styles de base pour les textes */
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			color: #2c3e50;
			text-align: center;
			letter-spacing: 2px;
			text-transform: uppercase;
			margin-bottom: 10px;
		}
		h3,
		h4,
		h5,
		h6 {
			text-align: left;
		}
		h1 {
			background-color: #ffffffbb;
			border-radius: 6px;
			padding: 2px 5px;
			transform: rotate(-4deg);
			font-style: italic;
		}
		h2 {
			background-color: #fffb00a8;
			border-radius: 6px;
			padding: 2px 5px;
			transform: rotate(-4deg);
			margin-top:-15px;
			font-style: italic;
		}
		p {
			color: #7f8c8d;
			line-height: 1.6;
			font-size: 18px;
			margin-bottom: 15px;
			text-align: justify;
		}
	}
	
}

body .container {
	.cards {
		div {
			display: flex;
			/* justify-content: center; */
			flex-direction: column;
			align-items: center;
			color: black;
		}
	}
	.text-container {
		display: flex;
		/* justify-content: center; */
		flex-direction: column;
		/* align-items: center; */
		background-color: #ffffffd0;
		color: black;
	}
	.form-container {
		display: flex;
		/* justify-content: center; */
		flex-direction: column;
		/* align-items: center; */
		color: black;
	}
	.form-container-table {
		max-height: 60vh;
		max-width: 95%;
		overflow: auto;
		border-radius: var(--form-table-radius);
	} 
	.notfound {
		width: 70vh;
		aspect-ratio: 1/1;
		display: flex;
		align-content: center;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 30px;
		-webkit-user-select: none; /* Safari */
		-ms-user-select: none; /* IE 10 and IE 11 */
		user-select: none; /* Standard syntax */
	}
}

body.sombre {
	/* background: none; */
	color: white;
	.container {
		background-color: rgba(6, 7, 19, 0.6);
		background-image: linear-gradient(hsla(0, 0%, 100%, .05) 2px, transparent 0),
			linear-gradient(90deg, hsla(0, 0%, 100%, .05) 2px, transparent 0),
			linear-gradient(hsla(0, 0%, 100%, .05) 1px, transparent 0),
			linear-gradient(90deg, hsla(0, 0%, 100%, .05) 1px, transparent 0);
		background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
		background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	}

	/* PAGE */
	/* Styles de base pour les textes */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: #d2d5d8;
	}

	p {
		color: #d2d5d8;
	}
	h1,h2 {
		color: #2c3e50;
	}

	.clock {
		left: 0px;
	}

	.notfound {

		* {
			color: black;
		}
	}

	.cards {
		color: rgba(0, 0, 0, 0.897);

		div {
			color: black;
		}
	}

	.form {
		background: #47474786;
	}
}
body form {
	.succes {
		color: #71ff4d;
		text-shadow: 0 0 5px rgb(0, 0, 0);
	}
	.alerte {
		color: #be6613;
		text-shadow: 0 0 5px rgb(255, 255, 255);
	}
	.error {
		color: red;
		text-shadow: 0 0 5px rgb(255, 255, 255);
	}
	.info {
		color: rgb(17, 0, 255);
		text-shadow: 0 0 5px rgb(255, 255, 255);
	}
}