html {scroll-behavior: smooth; }
body{
	background-color: #dcdcdc;
	margin-top: 100px;
	color: #262626;
	font-size: 1.0rem; 
	font-family: 'Palanquin', sans-serif;
	font-size-adjust: 0.58;
}
h1, h2, h3, h4, h5, h6{
	font-family: "Courier New", Courier, monospace;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: auto;
	margin-top: 1rem;
}
h1 { font-size: 2rem;}
h2 { font-size: 1.75rem;}
h3 { font-size: 1.5rem;}
h4 { font-size: 1.25rem;}
h5 { font-size: 1rem;}
h6 { font-size: 0.75rem;}
p { 
	text-align: justify;
	margin: 1rem auto;
}
a, a:hover{
	text-decoration: none;
	color: inherit;
}
mark{
	padding: 0 0.5em;
	background-color: #F0E68C;
}
mark a{
	text-decoration: underline;
}
blockquote{
	background-color: rgba(0,0,0,0.05);
    margin: 1.5em;
    padding: 0.5em 1em;
    border-left: #262626 solid 2px;
}


.satisfy {
	font-family: 'Satisfy', cursive !important;
	font-weight: 100 !important;
}
.courier-new{
	font-family: "Courier New", Courier, monospace;
}
.arial{ 
	font-family: Arial;
}
.palanquin{ 	
	font-family: 'Palanquin', sans-serif;
}
.row{
	padding: 15px 0 15px 0;
}
/*
::placeholder{
	font-style: italic;
	opacity: 0.25;
	color: var(--gray);
	background-color: lightcyan !important;
}
/*
 █████╗ ███████╗██╗   ██╗███╗   ███╗███████╗████████╗██████╗ ██╗ ██████╗
██╔══██╗██╔════╝╚██╗ ██╔╝████╗ ████║██╔════╝╚══██╔══╝██╔══██╗██║██╔════╝
███████║███████╗ ╚████╔╝ ██╔████╔██║█████╗     ██║   ██████╔╝██║██║     
██╔══██║╚════██║  ╚██╔╝  ██║╚██╔╝██║██╔══╝     ██║   ██╔══██╗██║██║     
██║  ██║███████║   ██║   ██║ ╚═╝ ██║███████╗   ██║   ██║  ██║██║╚██████╗
╚═╝  ╚═╝╚══════╝   ╚═╝   ╚═╝     ╚═╝╚══════╝   ╚═╝   ╚═╝  ╚═╝╚═╝ ╚═════╝
                                                                        
*/
.asymmetric::before, .asymmetric::after {
	content:'';
	background: inherit;
	display: block;
	position: relative;
	z-index: 900;
}
.asymmetric:first-child::before{
	height: 3rem;
	clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
	-webkit-clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
	top: -5rem;

}
.asymmetric:nth-child(odd){
	padding-top: 2rem;
}
.asymmetric:nth-child(odd)::after{
	height: 3rem;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
	bottom: -3rem;

}

.asymmetric:nth-child(even){
	padding-top: 3rem;
}            
.asymmetric:nth-child(even)::after{
	content:'';
	height: 2rem;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
	bottom: -2rem;

}


/*
 ██████╗ ██████╗ ██╗      ██████╗ ██████╗ ███████╗
██╔════╝██╔═══██╗██║     ██╔═══██╗██╔══██╗██╔════╝
██║     ██║   ██║██║     ██║   ██║██████╔╝███████╗
██║     ██║   ██║██║     ██║   ██║██╔══██╗╚════██║
╚██████╗╚██████╔╝███████╗╚██████╔╝██║  ██║███████║
 ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝
*/

.color-teal 				{color: #008080 !important;} .bg-teal 					{background-color: #008080 !important;}
.color-medium-sea-green 	{color: #3cb371 !important;} .bg-medium-sea-green 		{background-color: #3cb371 !important;}
.color-medium-aqua-marine 	{color: #66cdaa !important;} .bg-medium-aqua-marine 	{background-color: #66cdaa !important;}
.color-medium-turquoise 	{color: #48d1cc !important;} .bg-medium-turquoise		{background-color: #48d1cc !important;}
.color-cadet-blue 			{color: #5f9ea0 !important;} .bg-cadet-blue 			{background-color: #5f9ea0 !important;}
.color-rebecca-purple 		{color: #663399 !important;} .bg-rebecca-purple 		{background-color: #663399 !important;}
.color-indigo 				{color: #4b0082 !important;} .bg-indigo 				{background-color: #4b0082 !important;}
.color-pale-violet-red 		{color: #db7093 !important;} .bg-pale-violet-red 		{background-color: #db7093 !important;}
.color-crimson 				{color: #dc143c !important;} .bg-crimson 				{background-color: #dc143c !important;} .bg-crimson-10 				{background-color: rgba(220,20,60,0.10) !important;}
.color-orange-red 			{color: #ff4500 !important;} .bg-orange-red 			{background-color: #ff4500 !important;}
.color-orange 				{color: #ffa500 !important;} .bg-orange 				{background-color: #ffa500 !important;}
.color-gold 				{color: #ffd700 !important;} .bg-gold 					{background-color: #ffd700 !important;}
.color-khaki 				{color: #f0e68c !important;} .bg-khaki 				    {background-color: #f0e68c !important;}
.color-cornsilk 			{color: #fff8dc !important;} .bg-cornsilk 				{background-color: #fff8dc !important;}

.color-gray-85	 			{color: #262626 !important;} .bg-gray-85 				{background-color: #262626 !important;}
.color-gray-15	 			{color: #d9d9d9 !important;} .bg-gray-15 				{background-color: #d9d9d9 !important;}
.color-gray-05	 			{color: #f2f2f2 !important;} .bg-gray-05 				{background-color: #f2f2f2 !important;}
.color-white	 			{color: #ffffff !important;} .bg-white 				    {background-color: #ffffff !important;}

.color-gainsboro	 		{color: #dcdcdc !important;} .bg-gainsboro				{background-color: #dcdcdc !important;}

.color-html5{}
.color-css3{}
.color-excel{}
.color-eword{}

.text-clip{
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/*
 ██████╗ ██████╗  █████╗ ██████╗ ██╗███████╗███╗   ██╗████████╗███████╗
██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║██╔════╝████╗  ██║╚══██╔══╝██╔════╝
██║  ███╗██████╔╝███████║██║  ██║██║█████╗  ██╔██╗ ██║   ██║   ███████╗
██║   ██║██╔══██╗██╔══██║██║  ██║██║██╔══╝  ██║╚██╗██║   ██║   ╚════██║
╚██████╔╝██║  ██║██║  ██║██████╔╝██║███████╗██║ ╚████║   ██║   ███████║
 ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═════╝ ╚═╝╚══════╝╚═╝  ╚═══╝   ╚═╝   ╚══════╝                                                       
*/
.gradient-teal-indigo  {
	background: linear-gradient(90deg, #008080, #4b0082);
	background-size: 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-orange-red-gold  {
	background: linear-gradient(270deg, #ff4500, #ffd700);
	background-size: 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-medium-sea-green-cadet-blue  {
	background: linear-gradient(270deg, #3cb371, #5f9ea0);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-crimson-orange  {
	background: linear-gradient(270deg, #dc143c, #ffa500);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-pale-violet-red-rebecca-purple  {
	background: linear-gradient(270deg, #db7093, #663399);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-dimgray-gainsboro  {
	background: linear-gradient(270deg, #dcdcdc, #696969);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-html5  {
	background: linear-gradient(270deg, #e34c26, #f06529);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-css3  {
	background: linear-gradient(270deg, #264de4, #2965f1);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-php  {
	background: linear-gradient(270deg, #474A8A, #787CB5);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-javascript  {
	background: linear-gradient(270deg, #F0DB4F, #f0e68c);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-bootstrap  {
	background: linear-gradient(270deg, #602C50, #080135);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-excel  {
	background: linear-gradient(90deg, #0C7238, #29C27F);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}
.gradient-word  {
	background: linear-gradient(90deg, #00488D, #2D92D4);
	background-size: 400% 400%;
	-webkit-animation: animated-gradient 30s ease infinite;
	-moz-animation: animated-gradient 30s ease infinite;
	animation: animated-gradient 30s ease infinite;
}

@-webkit-keyframes animated-gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes animated-gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes animated-gradient { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.nav-link:hover .tada, .section-title-white:hover .tada, .tada:hover{
	        animation-name: tada;
	-webkit-animation-name: tada;
	        animation-duration: 1s;
	-webkit-animation-duration: 1s;
	        animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
}
@-webkit-keyframes tada {
	0% 		{ -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
	10%, 20% 	{ -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
	30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
	40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
	100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes tada {
	0%{ 
		-webkit-transform: scale3d(1, 1, 1); 
		transform: scale3d(1, 1, 1); 
	}
	10%, 20% { 
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 
	}
	30%, 50%, 70%, 90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	40%, 60%, 80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}


.flash {
	        animation-name: flash;
	-webkit-animation-name: flash;
	        animation-duration: 5s;
	-webkit-animation-duration: 5s;
	        animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	        animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
@keyframes flash {
	0%, 10%, 20%, 30% {
		opacity: 1;
	}
	05%, 15%, 25% {
		opacity: 0;
	}
} 


.text-clip { -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-line-through { text-decoration: line-through; }

.toTop{
	background-color: rgba(255, 255, 255, 0.75);
	position: fixed;
	bottom: 1rem; right: 1rem;
	padding: 10px;
	z-index: 1000;
	font-size: 0.9rem;
	font-weight: bold;
	/*line-height: 0.9em;*/
}
.print-page{
	background-color: rgba(255, 255, 255, 0.75);
	position: fixed;
	top: 1rem; right: 1rem;
	padding: 10px;
	z-index: 1000;
	font-size: 0.9rem;
	/*font-weight: bold;*/
	/*line-height: 0.9em;*/
	border: none;
	font-family: inherit;
}

.liste-mots{
	font-size: 100%;
	line-height: 2.25rem;
}
.trapezoid{
	display: inline-block;
	margin: 0.5rem;
	transform: skew(-25deg);
}

.trapezoid span{
	display: inline-block;
	white-space: nowrap;
	padding: 0 1rem;
	transform: skew(25deg);
	opacity: 1;
	
}
/*
.liste-mots::after{
	content: "\0025CF";
	margin-left: 15px;
}
.liste-mots:last-of-type::after{
	content: "";
}
*/


/*
███╗   ██╗ █████╗ ██╗   ██╗
████╗  ██║██╔══██╗██║   ██║
██╔██╗ ██║███████║██║   ██║
██║╚██╗██║██╔══██║╚██╗ ██╔╝
██║ ╚████║██║  ██║ ╚████╔╝ 
╚═╝  ╚═══╝╚═╝  ╚═╝  ╚═══╝                             
*/
.navbar-dark *, .nav-link *{ color: inherit; } 
.nav, .nav-link { font-family: "Courier New", Courier, monospace; }
 
.card, .card-img, .card-img-top, .btn{
	border-radius: 0;
	/*border: none;
	border-style: none; */
}


@media (max-width: 576px) {
	.top-clipClass1 .container, .top-clipClass2 .container{
		width: 95%;
	}
}








.top-clipClass1{
	margin-top: -2rem;
	padding-top: 2rem;
}
.top-clipClass2{
	margin-top: -3rem;
	padding-top: 3rem;
}
.clipClass1, .clipClass2{
	position: relative;
	z-index: 900;
	top: -2px;
}
.clipClass1 {
	height: 3rem;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	-o-clip-path: polygon(0 0, 100% 0, 0 100%);
	-ms-clip-path: polygon(0 0, 100% 0, 0 100%);
	-moz-clip-path: polygon(0 0, 100% 0, 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
}
.clipClass2 {
	height: 2rem;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	-o-clip-path: polygon(0 0, 100% 0, 100% 100%);
	-ms-clip-path: polygon(0 0, 100% 0, 100% 100%);
	-moz-clip-path: polygon(0 0, 100% 0, 100% 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
}





.section-title-white{
	text-align:  center;
}
.section-title-white h1, .section-title-white h2{
	display: inline-block;
	margin: 2rem auto;
	padding: 0.5rem;
	background-color: white;
	mix-blend-mode: screen;
}
.out{
	mix-blend-mode: multiply;
	position: absolute;
	left: 53%; bottom: 12%;
	text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
}