@import url('https://fonts.googleapis.com/css?family=Cousine');

@keyframes deroule {
    from {line-height: 1%}
    to {line-height: 140%;}
}

* {
font-family: 'Cousine', monospace;
margin:0;
padding:0;
color:#272727;
}

html {

}

body{
background: repeating-linear-gradient(
  -55deg,
  #D0A9F5,
  #D0A9F5 0.005%,
  #64FE2E 0.005%,
  #fff 0.01%
);
width:100%;
text-align: justify;
text-justify: inter-word;
font-size: 120%;
}

.flex-container {
background: repeating-linear-gradient(
  -55deg,
  #ece6f9,
  #ece6f9 0.05%,
  #f5fff5 0.05%,
  #fff 0.1%
);	
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: top;
    -ms-flex-pack: top;
    justify-content: top;
    -webkit-align-content: top;
    -ms-flex-line-pack: top;
    align-content: top;
    -webkit-align-items: top;
    -ms-flex-align: top;
    align-items: top;
    margin:2% 5% 2% 5%;
padding:1% 2% 1% 2%;
box-shadow: 0px 0px 95px 10px rgba(255,255,255,.4);
    }
    
    .flex-titre {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: top;
    -ms-flex-pack: top;
    justify-content: top;
    -webkit-align-content: top;
    -ms-flex-line-pack: top;
    align-content: top;
    -webkit-align-items: top;
    -ms-flex-align: top;
    align-items: top;
    margin:2% 5% 2% 5%;
padding:1% 2% 1% 2%;
background: repeating-linear-gradient(
  -55deg,
  #D0A9F5,
   #64FE2E 0.005%,
#D0A9F5 0.005%,
  #fff 0.01%
);
    }
    
    
.img_titre {
max-height: 31em;
min-height: 31em;
margin-left: 30em;
    }
    

.col {
	   -webkit-flex: 2 0 0;
   flex: 2 0 0;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    padding: 1% 2% 1% 2%;
    line-height: 175%;
    }
    
.col_petit {
	   -webkit-flex: 1 0 0;
   flex: 1 0 0;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    padding: 1% 2% 1% 2%;
    font-size: 1em;
    text-align: left;
    }
    
.legende {
font-weight:300;    
    }
    
   


h1 { 
font-size: 5vw; 
text-transform: uppercase;
font-weight: bold; 
letter-spacing: -2px; 
line-height: 1; 
text-align: right;
font-family: 'Cousine', monospace;
font-weight: 400;
text-shadow: 0 0 1em #ece6f9, 0 0 1em #f5fff5;
}

h2 {
	width: 120%;
font-size: 175%; 
text-transform: uppercase;
font-weight: bold; 
line-height: 1; 
text-align: right;
font-family: 'Cousine', monospace;
font-weight: 300;
  mix-blend-mode: exclusion;
    cursor: default;
    padding-bottom: 2%;
}

h2:hover {
  mix-blend-mode: multiply;
  cursor: default;
}

h3 {
background: repeating-linear-gradient(-55deg, #D0A9F4, #64FE2E 42.015%, #D0A9F5 28.015%, #fff -0.985% );
font-weight: normal;
-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h6 {
font-family: 'Cousine', monospace;
font-size: 1vw;
font-weight: 300;
text-align: left;
text-shadow: 0 0 5em #ece6f9, 0 0 1em #f5fff5;
mix-blend-mode: exclusion;
cursor: default;
line-height: 140%;
animation-name: deroule;
animation-duration: 2s;
animation-iteration-count: 1;
}

h6:hover {
font-family: 'Cousine', monospace;
font-weight: 300;
text-align: left;
text-shadow: 0 0 1em #ece6f9, 0 0 1em #f5fff5;
    mix-blend-mode: normal;
      cursor: default;
}

blockquote {
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 5%;
  padding-left: 2%;
  border-left: 0.1vw solid #ccc;
} 

.blockquotecolonne {
  margin-top: 1%;
  margin-bottom: 1%;
  margin-right: 5%;
  padding-right: 2%;
  border-right: 0.1vw solid #ccc;
  text-align: right;
} 

.footnotes {
    font-size: 0.8em;
}

.italic {
  font-style: italic;
}

#doItalics,#doItalics2,#doItalics3,#doItalics4,#doItalics5,#doItalics6 {
 background: repeating-linear-gradient(
  -55deg,
  #ece6f9,
  #ece6f9 0.05%,
  #f5fff5 0.05%,
  #fff 0.1%
);	

  font-family: 'Cousine', monospace;
  padding: 0.8em;
  border: solid #f5fff5 0px;
  text-decoration:none;
  font-weight: 400;
  min-height: 3em;
  max-height: 3em;  
  cursor: pointer;
  font-size: 1em;    

  text-align:center;  
  color:#272727;  
  border:0.1em;
  border-style: solid;
  border-color: #D0A9F5;
}

#doItalics:hover,#doItalics2:hover,#doItalics3:hover,#doItalics4:hover,#doItalics5:hover,#doItalics6:hover {
background: repeating-linear-gradient(
  -55deg,
  #D0A9F5,
   #64FE2E 0.005%,
#D0A9F5 0.005%,
  #fff 0.01%
);
  font-size: 1em;
color:white;
  font-style:italic;
}

.bouton {
 margin-left:-10%;
 margin-top:-1%;
 position:absolute;  
   
}




@media (min-width: 55em)
{
	.header { padding: 1.5em 3em; }
	.flex-container { padding: 2em 3em; }

	.col
	{
		float: left;
		width: 65%;
		margin-right: 5%;
		margin-bottom: 1em;
	}

	.col_petit
	{
		float: left;
		width: 25%;
		margin-bottom: 1em;
	}
	
}