@charset "UTF-8";
* { color: white; text-align: justify; box-sizing: border-box; overflow: visible; line-height: 1.7; }

body { background-image: url("/assets/images/fonds/fond-etoile.gif"); background-color: black; margin: 0; }

a { color: #8080ff; }

.contenu-normal { padding-left: 16vw; padding-right: 16vw; padding-bottom: 1vh; padding-top: 1vh; margin-top: 10px; margin-bottom: 10px; }

.banniere-principale { overflow: hidden; position: absolute; height: 100%; width: 15vw; padding-top: 10px; }

.gauche { left: 0; }

.droite { right: 0; }

.grid-3w { display: grid; }

.logo * { text-align: center; font-family: monospace; font-size: 0.75em; margin: -10px; }

.flex { display: flex; justify-content: center; align-items: center; }

.flex.space-between { justify-content: space-between; }

.indent { text-indent: 1.5em; }

.marge { margin-top: 3em; }

.absolute { position: absolute; }

.relative { position: absolute; }

.right { right: 0; }

.bottom { bottom: 0; }

.font-huge { font-size: 3em; line-height: 1em; }

/*Contient intégralement son contenu sans plus, et est au-dessus.*/
.container { position: relative; margin: 0; background-color: rgba(0, 0, 0, 0); }

.largest { width: 100%; background-color: black; }

.dummy { width: 100px; height: 100px; background-color: black; }

.citation-enonce { /*Ce qui est dit par la personne citée*/ background-image: url("/assets/images/non-boutons/bouton-multicolore.gif"); background-size: contain; background-blend-mode: multiply; padding: 5px; }

.citation-specifications { /*Auteur, date et cie*/ background-image: url("/assets/images/non-boutons/bouton-marbre-bleu.gif"); background-size: contain; background-blend-mode: multiply; padding: 5px; }

.citation-certificat-fond { /*Catégorie mentionnée au-dessus de chaque citation. Classe à combiner avec fond-*, où '*'=couleur. */ display: flex; justify-content: left; align-items: center; flex-wrap: wrap; background-image: url("/assets/images/non-boutons/certificat-fond.gif"); background-size: cover; min-height: 46px; width: max-content; min-width: 47px; padding-left: 0; padding-right: 25px; padding-top: 5px; padding-bottom: 5px; background-blend-mode: multiply; }

.citation-certificat-cadre-boule { /*Le carré qui entoure le clou jaune.*/ display: inline-block; vertical-align: center; background-image: url("/assets/images/non-boutons/certificat-cadre-boule.gif"); background-blend-mode: multiply; margin-right: 10px; width: 47px; height: 46px; }

.citation-certificat-boule { /*clou jaune.*/ background-image: url("/assets/images/non-boutons/certificat-boule.gif"); width: 47px; height: 46px; }

/*******************************/
/*Navigation*/
/*******************************/
.top-navigation-bar { overflow: visible; position: relative; background-image: url("/assets/images/fonds/fond-obsidienne.gif"); margin: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background-color: #003c3c; z-index: 0; }

.top-navigation-bar .container { margin: 10px; }

.top-navigation-bar .container div { position: relative; background-blend-mode: multiply; max-width: 200px; padding: 5px; margin: 0; background-color: darkblue; text-align: center; z-index: -1; }

@keyframes hover-navigation-animation { 0%, 100% { }
  50% { transform: translateY(-10px);
    filter: invert(100%); } }

.top-navigation-bar .container:hover div { animation-name: hover-navigation-animation; animation-duration: 3s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; }

.top-navigation-bar .container { /*Pour enlever les traitements spéciaux créés par <a>.*/ text-decoration: none; }

.top-navigation-bar .container div *:not(.current-link) { color: white; }

.current-link { color: red; }

footer.bottom-buttons { margin-left: 88px; margin-right: 88px; margin-top: 31px; margin-bottom: 31px; text-align: center; }

footer.bottom-buttons.no-top-margin { margin-top: 0; }

footer.bottom-buttons.no-bottom-margin { margin-bottom: 0; }

/*******************************/
/*Effets généraux*/
/*******************************/
@keyframes flashy { 0%, 100% { filter: brightness(60%); }
  50% { filter: brightness(100%); } }

.flashy { animation-name: flashy; animation-duration: 0.75s; animation-timing-function: ease-out; animation-delay: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; }

/*******************************/
/*Propriétés générales*/
/*******************************/
.white { color: white; }

.black { color: black; }

.red { color: red; }

.blue { color: blue; }

.orange { color: orange; }

.yellow { color: yellow; }

.magenta { color: magenta; }

.purple { color: purple; }

.fond-white { background-color: white; }

.fond-black { background-color: black; }

.fond-red { background-color: red; }

.fond-blue { background-color: blue; }

.fond-orange { background-color: orange; }

.fond-yellow { background-color: yellow; }

.fond-green { background-color: green; }

.fond-pink { background-color: pink; }

.fond-purple { background-color: purple; }

.fond-lime { background-color: lime; }

.fond-lightcoral { background-color: lightcoral; }

.fond-palegoldenrod { background-color: palegoldenrod; }

.fond-gray { background-color: gray; }

.invert { filter: invert(1); }

.center { text-align: center; }

/*Dans ce fichier est mis le css gouvernant le comportement des diverse décorations dans les pages de mon site.*/
/*******************************/
/*Bibittes animées*/
/*******************************/
/*Admet que la création est initialement située à droite*/
@keyframes course-uniforme-droite-gauche { 0% { transform: translateX(-100%); }
  100% { transform: translateX(100vw); } }

@keyframes esquive-sumo { 0% { transform: translate(0, 0) rotate(0); }
  84% { transform: translate(-10vw, 0) rotate(0); }
  92% { transform: translate(-5vw, -20px) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); } }

@keyframes shake-deliberately { 0%, 100% { transform: translate(0, 0) rotate(0); }
  5% { transform: translate(3px, -3px) rotate(-2deg); }
  10% { transform: translate(4px, 3px) rotate(-3deg); }
  15% { transform: translate(2px, 5px) rotate(0deg); }
  20% { transform: translate(-3px, -3px) rotate(2deg); }
  25% { transform: translate(5px, 3px) rotate(-1deg); }
  30% { transform: translate(0px, -4px) rotate(-1deg); }
  35% { transform: translate(-5px, -3px) rotate(2deg); }
  40% { transform: translate(-3px, -4px) rotate(-1deg); }
  45% { transform: translate(4px, -5px) rotate(1deg); }
  50% { transform: translate(0px, -5px) rotate(-1deg); }
  55% { transform: translate(-2px, -5px) rotate(-2deg); }
  60% { transform: translate(5px, 5px) rotate(-1deg); }
  65% { transform: translate(-2px, 5px) rotate(1deg); }
  70% { transform: translate(-5px, -2px) rotate(-3deg); }
  75% { transform: translate(-5px, 5px) rotate(-1deg); }
  80% { transform: translate(-5px, 5px) rotate(1deg); }
  85% { transform: translate(3px, -2px) rotate(1deg); }
  90% { transform: translate(3px, 2px) rotate(0deg); }
  95% { transform: translate(-1px, 3px) rotate(2deg); } }

.course-uniforme-droite-gauche { animation-name: course-uniforme-droite-gauche; animation-duration: 5s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; }

.esquive-sumo { animation-name: esquive-sumo; animation-duration: 5s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; }

.shake-deliberately { animation-name: shake-deliberately; animation-duration: 2s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; }

.image-wtf-force { float: left; height: 84.4px; position: absolute; z-index: 3; }

.image-wtf-angry-sumo { right: 0; height: 84.4px; position: absolute; z-index: 3; }

.image-wtf-non-bob-attac { width: 73.3944954128px; height: 100px; }

/*******************************/
/*Tiroir archives*/
/*******************************/
@keyframes ouverture-tiroir-archives { 0% { content: url("/assets/images/boutons/tiroir-archives-animation-ouverture.gif"); }
  100% { content: url("/assets/images/boutons/tiroir-archives-ouvert.png"); } }

@keyframes fermeture-tiroir-archives { 0% { content: url("/assets/images/boutons/tiroir-archives-animation-fermeture.gif"); }
  100% { content: url("/assets/images/boutons/tiroir-archives-ferme.png"); } }

.tiroir-archives { content: url("/assets/images/boutons/tiroir-archives-ferme.png"); width: 90px; height: 66px; }

.tiroir-archives:hover { animation-name: ouverture-tiroir-archives; animation-duration: 480ms; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; }

.tiroir-archives:not(hover) { animation-name: fermeture-tiroir-archives; animation-duration: 480ms; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; }

/*******************************/
/*Panneaux gauche et droite*/
/*******************************/
@keyframes sautiller-en-se-retournant { 0% { transform: translate(0, 0) rotateY(0); }
  25% { transform: translate(0, -20px) rotateY(0); }
  49% { transform: translate(0, 0) rotateY(0); }
  50% { transform: translate(0, 0) rotateY(180deg); }
  75% { transform: translate(0, -20px) rotateY(180deg); }
  100% { transform: translate(0, 0) rotateY(180deg); } }

.sautiller-en-se-retournant { animation-name: sautiller-en-se-retournant; animation-duration: 1.25s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; }

.image-angry-gargamel { content: url("/assets/images/gargamel/angry-gargamel.gif"); }

@keyframes marche-va-vient { 0% { transform: translate(0, 0) rotateY(180deg); }
  49% { transform: translate(45px, 0) rotateY(180deg); }
  51% { transform: translate(45px, 0) rotateY(0); }
  100% { transform: translate(0, 0) rotateY(0); } }

.marche-va-vient { animation-name: marche-va-vient; animation-duration: 1.75s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; }

.image-goomba-realiste { width: 100px; height: 135px; }

.image-malicious-walking-gargamel { width: 100px; height: 146px; }

/*# sourceMappingURL=styles.css.map */