@font-face {
    font-family: police1;
    src: url("fonts/Anthony.otf");
}

@font-face {
    font-family: police2;
    src: url("fonts/Avara-BoldItalic.otf");
}

@font-face {
    font-family: police3;
    src: url("fonts/blocuswebfont.ttf");
}

@font-face {
    font-family: police4;
    src: url("fonts/Coconat-BoldExt.otf");
}

@font-face {
    font-family: police5;
    src: url("fonts/Compagnon-Bold.otf");
}

@font-face {
    font-family: police6;
    src: url("fonts/MAZIUSREVIEW20.09-Extraitalic.otf");
}

@font-face {
    font-family: police7;
    src: url("fonts/Messapia-Regular.otf");
}

@font-face {
    font-family: police8;
    src: url("fonts/NectoMono-Regular.otf");
}

@font-face {
    font-family: police9;
    src: url("fonts/Sinistre-S†Caroline.otf");
}

@font-face {
    font-family: police10;
    src: url("fonts/Trickster-Reg.otf");
}

body {
    width: 100%;
    height: 100%;
   /* margin: auto; */
    margin : 0;
    padding : 0;
    /*border: 30px solid black;*/
}




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


  button a {

    margin:0px;
  }


body {
    cursor: text;
  /*  margin-left: 10px;
    margin-right: 10px;*/
}


.arch {
    font-family: 'Helvetica';
    font-size: 2vw;
    cursor: pointer;
}

#boutons2 {
    display: inline-block;
    border-radius: 10px;
    border-color: black;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    font-size: 30px;
    font-family: 'Helvetica';
    padding: 10px;
    margin-left: 2%;
    margin-right: 200px;
    justify-content: center;
  
}


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

textarea {
    box-decoration-break: none; 
}

#label_before, #textareaBefore {
    display: none;
}

#label_after {
    display: none;
}

#label_differences {
    display: none;
}

#textareaDifferences{
    font-size: 100px;
    font-family: 'Helvetica';
    margin-left: 10px;
    margin-right: 10px;
}

#textareaAfter {
    font-size: 6vw;
    padding-left: 1%;
    padding-right: 1%;
    font-family: 'Helvetica';

}

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: fixed;
  }
  
  .marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 30s linear infinite;
  }
  
  .marquee2 span {
    animation-delay: 15s;
  }
  
  @keyframes marquee {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-100%, 0);
    }
  }


  .Fmarquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: fixed;
 
  }
  
  .Fmarquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 30s linear infinite reverse;

  }
  
  .Fmarquee2 span {
    animation-delay: 15s;
  
  }
  
  @keyframes Fmarquee {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-100%, 0);
    }
  }


h1{
    font-family: 'Helvetica';
    font-weight: normal;
    font-size: 224px;
    line-height: 180px;
   
   /* text-shadow: 2px 0 0 rgb(163, 163, 163), -2px 0 0 rgb(163, 163, 163), 0 2px 0 rgb(163, 163, 163), 0 -2px rgb(163, 163, 163), 1px 1px rgb(163, 163, 163), -1px -1px 0 rgb(163, 163, 163), 1px -1px 0 rgb(163, 163, 163), -1px 1px 0 rgb(163, 163, 163);
*/
}

h2{
    font-family: 'Helvetica';
    font-size: 50px ;
}

h3{
    font-family: 'Helvetica';
    font-size: 30px ;
}

p{
    font-family: 'Helvetica';
    font-size: 20px;
    line-height: 20px;
    padding-left: 5px;
}

 .boutons {
     display: inline-block;
     border-radius: 10px;
     border-color: black;
     color: rgb(0, 0, 0);
     background-color: rgb(255, 255, 255);
     font-size: 5vw;
     font-family: 'Helvetica';
     padding: 10px;
   
     justify-content: center;
     

 }

 .boutons :hover {
    color:rgb(4, 78, 60);
}

#boutons2 {
    display: inline-block;
    border-radius: 10px;
    border-color: black;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    font-size: 30px;
    font-family: 'Helvetica';
    padding: 10px;
    margin-left: 50px;
    margin-right: 200px;
    justify-content: center;

}



 footer {
	
  	position: fixed;
    bottom: 0;
	width: 100%;
  	background-color: rgb(24, 232, 132);
  	font-family: Helvetica, sans-serif;
	font-size: 20px;
	height: 30px;
 	align-items: center;
	display: flex;
	padding-left: 10px;
}
 
 header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgb(255, 255, 156);
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    height: 30px;
    align-items: center;
    display: flex;
    padding-left: 10px;
 }

#style1{
    color: blue;
    line-height: 1.1;
}

#style2{
    font-family: 'Helvetica';
    color: rgb(187, 187, 187);
    background-color: none;
}


.jour1 {
    font-family: 'police1';
}

.jour2 {
    font-family: 'police2';
}

.jour3 {
    font-family: 'police3';
}

.jour4 {
    font-family: 'police4';
}

.jour5 {
    font-family: 'police5';
}

.jour6 {
    font-family: 'police6';
}

.jour7 {
    font-family: 'police7';
}

.jour8 {
    font-family: 'police8';
}

.jour9 {
    font-family: 'police9';
}

.jour10 {
    font-family: 'police10';
}

.jour11 {
    font-family: 'police1';
}

.jour12 {
    font-family: 'police2';
}

.jour13 {
    font-family: 'police3';
}

.jour14 {
    font-family: 'police4';
}

.jour15 {
    font-family: 'police5';
}

.jour16 {
    font-family: 'police6';
}

.jour17 {
    font-family: 'police7';
}

.jour18 {
    font-family: 'police8';
}

.jour19 {
    font-family: 'police9';
}

.jour20 {
    font-family: 'police10';
}

.jour21 {
    font-family: 'police1';
}

.jour22 {
    font-family: 'police2';
}

.jour23 {
    font-family: 'police3';
}

.jour24 {
    font-family: 'police4';
}

.jour25 {
    font-family: 'police5';
}

.jour26 {
    font-family: 'police6';
}

.jour27 {
    font-family: 'police7';
}

.jour28 {
    font-family: 'police8';
}

.jour29 {
    font-family: 'police9';
}

.jour30 {
    font-family: 'police10';
}

.jour31 {
    font-family: 'police1';
}

#avant {
    display:none;
}

#diff {
    display: none;
    padding-left: 5px;
}

p {
    font-family: 'Helvetica';
    padding-left: 5px;
}

.arch {
    padding-left: 1%;
}