/* anim jsuis trop nostalgique */

@keyframes arcciel {
	0% {
		background-color: red;
	}
	20% {
		background-color: orange;
	}
	40% {
		background-color: yellow;
	}
	60% {
		background-color: yellowgreen;
	}
	80% {
		background-color: green;
	}
	100% {
		background-color: limegreen;
	}
}

/* header */

#header {
	border: 5px solid black;
	background-color: rgb(255, 255, 255);
	display: flex;
	flex-direction: column;
	font-size: 100px;
}

#titre {
	text-align: center;
}

#titre a {
	text-decoration: none;
	color: black;
}

.liens {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 25px;
}

.liens a {
	text-decoration: none;
	text-align: center;
	color: green;
	flex-grow: 1;
	padding: 10px;
	background-color: rgb(250, 235, 250);
}

.liens a:hover {
	background-color: purple;
}

#shitpost_gratos {
	position: fixed;
	top: 0;
	left: 20px;
	width: 50px;
	height: 50px;
	z-index: 2;
}

/* footer */

#footer {
	border: 5px solid black;
	background-color: rgb(255, 255, 255);
	font-size: 32px;
	padding: 10px;
}

/* side bar */

#lien_side {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#lien_side a {
	text-decoration: none;
	text-align: center;
	color: green;
	padding: 10px;
	font-size: 1.5em;
}

#lien_side a:hover {
	background-color: purple;
}

#contenusite {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}

#sidebar_spec {
	border: 5px groove rgb(142, 25, 102, 0.3);
	background-color: rgb(255, 255, 255);
	padding: 10px;
	margin: 10px;
	width: 8vw;
	position: sticky;
	top: 10px;
}
/* content accueil */

.corpcontenu {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 70vw;
}

.article {
	display: none;
}

.article.actif {
	display: block;
	text-decoration: none;
	border: 5px solid black;
	background-color: rgb(189, 122, 126);
	margin: 10px;
	padding: 15px;
}

.article p {
	text-decoration: none;
	color: rgb(243, 219, 243);
	font-size: 25px;
	max-width: 75ch;
}

.article li {
	text-decoration: none;
	color: rgb(243, 219, 243);
	font-size: 25px;
	max-width: 75ch;
}
/*
.article p:hover {
	animation-duration: 3s;
	animation-name: arcciel;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}*/

.article h1 {
	text-decoration: none;
	color: rgb(243, 219, 243);
	font-size: 40px;
}

.article h2 {
	text-decoration: none;
	color: rgb(243, 219, 243);
	font-size: 25px;
}

.article a {
	text-decoration: none;
	color: rgb(255, 248, 255);
	font-size: 30px;
	background-color: rgb(103, 147, 6, 1.0);
}

.article img {
	width: 250px;
}

.sousarticle {
	display: none;
}

.sousarticle.actif {
	display: block;
	text-decoration: none;
	border: 5px solid black;
	background-color: rgb(159, 122, 189);
	margin: 20px;
	padding: 15px;
}

.sousarticle p {
	text-decoration: none;
	color: rgb(243, 219, 243);
	font-size: 22px;
	max-width: 75ch;
}

.sousarticle h1 {
	text-decoration: none;
	color: rgb(243, 219, 243);
	font-size: 40px;
}

.sousarticle a {
	text-decoration: none;
	color: rgb(255, 248, 255);
	font-size: 30px;
	background-color: rgb(103, 147, 6, 1.0);
}

.sousarticle img {
	width: 200px;
}

blockquote {
	font-size: 2em;
	color: rgb(29, 48, 29);
	background-image: url("assets/ciel.png");
	background-size: cover;
	text-shadow: 0px 0px 10px white;
}

.imgrevue img {
	width: 350px;
}

.article img:hover {
	border: 2px solid black;
}

.textecache {
	display: none;
}

.galleryImage {

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.ImageDesc {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px;
}

.ImageDesc img {
	width: 150px;
}

.ImageDesc h2 {
	font-size: 12px;
	color: rgb(243, 219, 243);
	justify-content: center;
	text-align: center;
	margin: 0px;
	line-break: auto;
	width: 200px;
}

.outil {
	font-size: 12px;
	color: rgb(243, 219, 243);
	justify-content: center;
	text-align: center;
	margin: 0px;
	font-style: italic;
	line-break: auto;
	width: 200px;
}

.date {
	font-size: 10px;
	color: rgb(243, 219, 243);
	justify-content: center;
	text-align: center;
	margin: 0px;
	font-style: italic;
	line-break: auto;
	width: 200px;
}

.collab {
	font-size: 10px;
	color: rgb(243, 219, 243);
	justify-content: center;
	text-align: center;
	margin: 0px;
	font-style: italic;
	line-break: auto;
	width: 200px;
}

button {
	text-decoration: none;
	border: 5px solid black;
	font-size: 45px;
}

/* général body */

* {
	font-family: "Arial";
}

#body {
	background-color: rgb(180, 20, 20);
	cursor: url("pointer1.png"), auto;
}

p {
	cursor: url("pointer3.png"), text;
}

::selection {
	background-color: rgb(0 0 0 / 0.1);
	text-decoration: underline;
}

a {
	cursor: url("pointer2.png"), pointer;
}

.liste_lien {
	background-color: rgb(255, 255, 255);
	margin: 10px;
	width: 20vw;
	position: sticky;
	top: 20px;
}
 /*
.liste_lien a::before {
	content: " - ";
	font-weight: 1000;
}
*/
.liste_lien a {
	text-decoration: none;
	color: black;
	font-size: 20px;
}

.liste_lien a:hover {
	text-shadow: black;
	text-decoration: underline;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.9); 
}


.modal-content {
  margin: auto;
  display: block;
  width: 1fr;
  max-width: 1000px;
  max-height: 800px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.viewer img:hover {
	border: 5px solid black;
}

#apercu {
	display: flex;
	flex-direction: row;
}

/* content dessin */

.numerotation {
	text-decoration: none;
	color: rgb(243, 219, 243);
	font-size: 25px;
}

/* table */
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

#petiteimage {
	width: 100px;
}

/* catégorie de lien */

.liste_lien a.jc {
	color: rgb(124, 0, 0);
}

.liste_lien a.ami {
	color: rgb(0, 117, 16);
}

.liste_lien a.ytnzo {
	color: rgb(255, 41, 41);
}

.liste_lien a.courtmetrage {
	color: rgb(122, 24, 183);
}