* {
  margin: 0;
  padding: 0;
}

html,
body {
  max-height: 100%;
  height: 100%;
  /*font-size: 1.25em; /* Base font size */
  font-family: Merriweather;
  text-wrap: balance;
}

body {
  /*
  display: flex;
  justify-content: center;
  align-items: center;
  background: Cornsilk;
 */
	margin: 0% 3%;
  
}

h1,h3{
	/*text-shadow: 1px 1px 5px #f7c500;
	text-justify: center;*/
	margin-top: 5%;
}


h1 {
  font-size: 2.5em; 
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.6em; 
}

p {
  font-size: 1.4em;
  line-height: 1.5em;
  margin-bottom: 2%;
  }


a, a:link, a:visited, a:hover, a:active{
	color: black;

}

ul{
	margin-left: 3%;
	
}

li::marker {
	content: "⦁ ";
	
	color: rgba(250,200,0,0.5);
	font-size: 1.2em;
	
	/*
	text-shadow: 0px 0px 5px rgba(255,90,0);
	*/
}

li{
	margin-bottom: 2%;	
	
	font-size: 1.4em;
}

.bold{
	background-color: rgba(255,90,0,0.5);
	
}
.quote {
	/*
	font-size: 1.2em;
	*/	
	font-family: PT Serif;
	line-height: 1.25em;
  	
	padding: 2% 5%;
  	margin: 5% 0% 5% 0%;
  	text-align: center;
  	border-radius: 25px;
  	box-shadow: 0px 0px 55px #f7c500;
  	background-color: #ffffff20;
  
}

.container {
	/*	
	padding: 25px;
	background: Red;
	*/
	margin: 0 auto;
	
	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-direction: column;
  	gap: 25px;
  
	max-width: 800px; 
   
}


.picround{
	/*
	align-items: center;
	height: 6em;
	*/

	display: flex;
	overflow: hidden;		
	
	min-height: 100px;
	min-width: 100px;
	max-height: 350px; 
	max-width: 350px;
	aspect-ratio: 1 / 1;
	
	border-radius: 100%;
	margin: 5%;
 	
 	box-shadow: 0px 0px 55px #f7c500;
	
}
/*
.picsquare{
	border-radius: 25px;
	aspect-ratio: 1 / 1;	
	max-height: 400px; 
}
*/
.right{
	float: right;
}

.left{
	float: left;
}

.rodape{
	background-color: black;
	color: #f7c500;
	font-size: 0.8em;
	padding: 10px 0px;
	width: 80vw;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	border-radius: 10px 10px 0% 0%;

}

.cloud .word {
  display: inline-block;
  margin: 5px;
  /* La taille dépend du poids (exemple simple) */
  font-size: calc(0.8rem + 0.2rem * attr(data-weight number));
  /* Couleur aléatoire ou fixe 
  color: #333;
  /* Effet de rotation aléatoire (optionnel) */
  transform: rotate(calc(var(--rot) * 1deg));
  /* Transition douce au survol */
  transition: transform 0.3s, color 0.3s;
}

.cloud .word:hover {
  /*
  color: #0066cc;
  transform: scale(1.1) rotate(0deg);
  */
}

#bgVideo {
  position: fixed;
  left: 0;
  top: 0;
  /*min-width: 100%;*/
  min-height: 100vh;
  overflow: hidden;
  z-index: -99;
  animation-name: videoChange;
  animation-duration: 99s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /*
  filter: brightness(380%) saturate(50%) hue-rotate(-180deg);
  */
}

@keyframes videoChange {
	0%		{filter: brightness(600%) saturate(50%) hue-rotate(0deg)}
	25%	{filter: brightness(400%) saturate(90%) hue-rotate(-30deg)}
	50%	{filter: brightness(300%) saturate(60%) hue-rotate(-80deg)}
	75%	{filter: brightness(400%) saturate(20%) hue-rotate(-60deg)}
	100%	{filter: brightness(500%) saturate(50%) hue-rotate(0deg)}
}
/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

/* Menu code starts here */

#menuToggle
{
  display: block;
  /* You can also use relative/absolute here if you want to stay on the top */
  position: fixed;
  top: 20px;
  right: 20px;
  
  z-index: 1;
  
  background-color: rgba(255,255,255,1);
  /*box-shadow: 0px 0px 5px black;*/
  
  padding: 3% 2% 2% 2% ;
  border-radius: 5px;
  
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: orangered;
}


#menuToggle input
{
  display: block;
  width: 55px;
  height: 55px;
  position: absolute;
  top: -2.5%;
  left: -2%;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: rgba(0,0,0,0.7);rgba(255,255,255,1);
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: black;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top right of the screen
 */
#menu
{
  position: absolute;
  top: 3vh;
  width: 100vw;
  height: 120vh;
  margin: -100px 0 0 -50vw;
  padding: 50px;
  padding-top: 125px;
  box-sizing: border-box;
  overflow-y: auto;
  background: rgba(255,255,255,1);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(80vw, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menu li::marker {
	content: "";}
	
#menu li label
{
  cursor: pointer;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}