@font-face
{
	font-family: "forgetica";
	src: url('../FONT/SansForgetica-Regular.otf');
}

body
{
	text-align: justify;
	background-color: lightgray;
	color: black;
	font-family: monospace;
	margin: auto;
	max-width: 1080px;
}

li
{
	list-style: circle;
}

nav
{
	background-color: rgba(211, 211, 211, 0.8);
	text-align: center;
	position: sticky;
	top: 0;
	z-index: 666;
	border-bottom: 1px double #428b64;
	padding: 0px;
}

nav ul li
{
	display: inline-block;
	text-align: center;
	padding: 2px;
}

a
{
	color: #428b64;
}

a:visited
{
	color: deeppink;
}

nav ul li a:visited
{
	color: #428b64;
}

a:hover
{
	font-size: 20px;
	font-family: "forgetica";
}

nav ul li a:hover
{
	font-size: 13px;
	font-family: monospace;
	font-weight: bold;
}

h1
{
	font-family: "forgetica";
	text-align: center;
	font-size: 40px;
	color: black;
	animation-name: shadow;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-out;
	animation-fill-mode: backwards;
}

h2
{
	text-align: center;
	font-size: 25px;
}

h3
{
	font-size: 20px;
	border-left-style: solid;
	padding-left: 10px;
}

footer
{
	margin-top: 25px;
	text-align: center;
	border-top: 1px solid black;
	padding: 15px 0px;
}

.haut
{
	height: 25px;
}

.conteneur
{
	display: flex;
	width: 75%;
	margin: auto;
}

.lg1 {width: calc(100%/1)}
.lg2 {width: calc(100%/2)}
.lg3 {width: calc(100%/3)}
.lg4 {width: calc(100%/4)}
.lg5 {width: calc(100%/5)}
.lg6 {width: calc(100%/6)}
.lg7 {width: calc(100%/7)}
.lg8 {width: calc(100%/8)}
.lg9 {width: calc(100%/9)}
.lg10{width: calc(100%/10)}

.turn0
{
	animation-name: turn0;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: linear;
	font-size: 25px;
	text-align: center;
	display: block;
	margin: auto;
	padding: 25px;
}

.turn1
{
	animation-name: turn1;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	font-size: 25px;
	text-align: center;
	display: block;
	margin: auto;
	padding: 25px;
}

.turn2
{
	animation-name: turn2;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: linear;
	font-size: 25px;
	text-align: center;
	display: block;
	margin: auto;
	padding: 25px;
}

.js
{
	display: inline-flex;
	margin: auto;
	padding: 20px;
	text-align: center;
	height: 5vh;
}

.js0
{
	animation-name: js;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: linear;
	animation-delay: 200ms;
	font-size: 15px;
}

.js1
{
	animation-name: js;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: linear;
	animation-delay: 400ms;
	font-size: 15px;
}

.js2
{
	animation-name: js;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: linear;
	animation-delay: 600ms;
	font-size: 15px;
}

.js3
{
	animation-name: js;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: linear;
	animation-delay: 800ms;
	font-size: 15px;
}

.js4
{
	animation-name: js;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: linear;
	animation-delay: 1000ms;
	font-size: 15px;
}

@keyframes turn0
{
	0%
	{
		transform: rotate(0deg);
		color: grey;
	}

	25%
	{
		transform: rotate(25deg);
		color: white;
	}

	50% 
	{
		transform: rotate(50deg);
		color: deeppink;
	}
}

@keyframes turn1
{
	0%
	{
		transform: rotate(0deg);
		color: grey;
		text-shadow: 1px 1px 8px deeppink;
	}

	25%
	{
		transform: rotate(180deg);
		color: white;
		text-shadow: 1px 8px 5px grey;
	}

	50% 
	{
		transform: rotate(360deg);
		color: deeppink;
		text-shadow: 1px 25px 1px black;
	}
}

@keyframes turn2
{
	0%
	{
		transform: rotate(0deg);
		color: grey;
	}

	25%
	{
		transform: rotate(-25deg);
		color: white;
	}

	50% 
	{
		transform: rotate(-50deg);
		color: deeppink;
	}
}

@keyframes js
{
	0%
	{
		color: grey;
		font-size: 27.5px;
		text-shadow: 2px 3px 5px black;
	}

	25%
	{
		font-size: 30px;
		text-shadow: 5px 8px 2px black;
	}

	50% 
	{
		color: deeppink;
		font-size: 33px;
		text-shadow: 9px 15px 8px black;
	}
}

@keyframes shadow 
{
	0%	{text-shadow: 15px 15px 10px}
	25%	{text-shadow: 12.5px 12.5px 8px}
	50%	{text-shadow: 10px 10px 6px}
	75%	{text-shadow: 5px 5px 4px}
	100%{text-shadow: 2px 2px 2px}
}


@media screen and (max-width:900px)
{
	nav
	{
		padding: 1px;
	}

	.md1 {width: calc(100%/1)}
	.md2 {width: calc(100%/2)}
	.md3 {width: calc(100%/3)}
	.md4 {width: calc(100%/4)}
	.md5 {width: calc(100%/5)}
	.md6 {width: calc(100%/6)}
	.md7 {width: calc(100%/7)}
	.md8 {width: calc(100%/8)}
	.md9 {width: calc(100%/9)}
	.md10{width: calc(100%/10)}

	.conteneur
	{
		display: flex;
		margin: auto;
		box-sizing: border-box;
		width: 90%;
	}

}

@media only screen and (max-width:700px)
{
	nav
	{
		display: none;
	}

	.sm1 {width: calc(100%/1)}
	.sm2 {width: calc(100%/2)}
	.sm3 {width: calc(100%/3)}
	.sm4 {width: calc(100%/4)}
	.sm5 {width: calc(100%/5)}
	.sm6 {width: calc(100%/6)}
	.sm7 {width: calc(100%/7)}
	.sm8 {width: calc(100%/8)}
	.sm9 {width: calc(100%/9)}
	.sm10{width: calc(100%/10)}

	.conteneur
	{
		width: 95%;
		display: flex;
	}

	.js
	{
		display: flex;
		padding: 5px 0px;
		margin: auto;
	}

}

@media print
{
	.print
	{
		display: none;
	}

	.conteneur
	{
		width: 100%;
	}

	.turn0, .turn1, .turn2, .js, h1, h2, h3
	{
		padding: 3px;
		margin: 3px;
		font-size: 20px;
		height: 25px;
	}
}