body{
     padding: 0px;
     margin: 0px;
	   /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

.code{
     font-size:inherit;
     display: inline;
     background: rgba(225,225,225,.3);
	 width:20%;
}
textearea{
	width:20%;
	}
 #texte1{
     display:block;
     text-align:center;
     margin-left: auto;
     margin-right: auto;
     width: 65%;
     min-width: 4.5em;
     font-size: 25px;
     background: rgba(230,230,230,.5);
}
 .input{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.12);
    border-radius:6px;
    background:#FFFFFF;
    font-size:20px;
    padding:6px 6px;
    text-align:center;
     width:10%;
     display: inline;
     margin-left: auto;
     margin-right: auto;
     opacity: 0.8;

}
 p {
    padding:12px;
	text-align:center;
}

 * {
     box-sizing: border-box;
}

 h1 {

     top:0;
     text-align: center;
     font-size:45px;
     padding: 16px;
}


/*bouttons*/
 .button{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.12);
    border-radius:6px;
    background:#F5E68C;
    font-size:20px;
    padding:10px 10px;
    text-align:center;
    position:-webkit-sticky;
     position:sticky;
     top:0;
     width:auto;
     text-align:center;
     display: inline;
     margin-left: auto;
     margin-right: auto;
     opacity: 0.8;
    position:sticky;
}
 .button:hover{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
    color:#060606;
    opacity: 1;
}
 .button{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}

/*pourles titres*/
 .jaune{
    color:#000000;
    background-color:lightblue;
	padding:120px;
}

 .vert{
    color:#FFFFFF;
    background-color:#4CAF50;
}

 .fond-noir{
    color:white;
	text-align:center;
    background-color:black;
}
/*ombres*/
 .card{
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}



@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}