/* defaults */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
/* background-image:url("../images/sea.jpg"); */
background-color: red;
/* mix-blend-mode:multiply; */
overflow:hidden;
cursor: url("ellipse.png");	
}


@font-face {
  font-family: 'microgamma';
  src: url(../fonts/microgamma.woff2) format('woff2'),
       url(../fonts/microgamma.woff) format('woff');
      
    
        text-transform: uppercase;
      
}

::selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

::-moz-selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

ol, ul {
  list-style: none;
}

#container {
  overflow:hidden;
  display:flex;
}
.glowbackground{
  position: absolute;
  /* content:url("../images/saumon.png"); */
  /* border: 1px solid red; */
  overflow:hidden;
  outline: 10vh  blue;
  outline-offset: -50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 119vw;
  height: 54vw;
  border-radius: 50%;
  background-color: blue;
  /* box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px white,
    0 0 100px 180px rgb(255, 175, 100)
    ;
  */
  z-index:3;
  animation-name: ovalebleu;
  animation-duration: 8s;

  animation-iteration-count: 1;
  
  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  }
  
  @keyframes ovalebleu {
  0% {
  
  height: 54vw;
  
  width: 119vw;
  }
  
  
  
  100% {
  
  height: 0vw;
  width: 0vw;
  }
  }


.ovalebleu{
  position: absolute;
  /* content:url("../images/saumon.png"); */
  /* border: 1px solid red; */
  overflow:hidden;
  outline: 10vh  blue;
  outline-offset: -50px;
  top: 50%;
  left: 27%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 45vw;
  height: 100%;
  border-radius: 70%;
  background-color: blue;
  /* box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px white,
    0 0 100px 180px rgb(255, 175, 100)
    ;
  */
  z-index:0;
}

.ovalebleu2{
  position: absolute;
  /* content:url("../images/saumon.png"); */
  /* border: 1px solid red; */
  overflow:hidden;
  outline: 10vh  blue;
  outline-offset: -50px;
  
  top: 50%;
  left: 73%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 45vw;
  height: 100%;
  border-radius: 70%;
  background-color: blue;
/*   mix-blend-mode: multiply;*/
  z-index:0;
  animation-name: crush ;

  animation-duration: 10s;

  animation-iteration-count: infinite;

  animation-timing-function: alternate;
}



.ovalegris{
  position: absolute;
  /* content:url("../images/saumon.png"); */
  /* border: 1px solid red; */

  outline: 10vh  blue;
  outline-offset: -50px;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 100%;
  height: 100%;

  border-radius: 70%;
  background-color: grey;
  /* stroke: white;
  stroke-width: 300px; */
  /* box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px white,
    0 0 100px 180px rgb(255, 175, 100)
    ;
  */
  z-index:10;


  animation-name: ovalegris ;

        animation-duration: 10s;

        animation-iteration-count: infinite;

        animation-timing-function: alternate;
  cursor: pointer;
  text-decoration:none;
}

@keyframes ovalegris {
  0% {
   
    transform: translateX(-100%);
  }


 50% {
   
    transform: translateX(100%);
  }

  100% {

    transform: translateX(-100%);
  }
}

.ovalegris2{
  position: absolute;
  /* content:url("../images/saumon.png"); */
  /* border: 1px solid red; */
 
  outline: 10vh  blue;
  outline-offset: -50px;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 100%;
  height: 100%;
  border-radius: 70%;
  background-color: grey;
    /* mix-blend-mode:exclusion; */
  /* box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px white,
    0 0 100px 180px rgb(255, 175, 100)
    ;
  */
  z-index:10;

  animation-name: ovalegris2 ;

        animation-duration: 10s;

        animation-iteration-count: infinite;

        animation-timing-function: alternate;
  cursor: pointer;
  text-decoration:none;
}

@keyframes ovalegris2 {
  0% {
   
    transform: translateX(100%);
  }


 50% {
   
    transform: translateX(-100%);
  }

  100% {

    transform: translateX(100%);
  }
}



.ovaleblanc{
  position: absolute;
  /* content:url("../images/saumon.png"); */
  /* border: 1px solid red; */
  stroke: green;
  stroke-width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 100%;
  height: 54vw;
  border-radius: 70%;
  background-color:white;
     transition: all 2s ease;
  z-index:40;
  /* mix-blend-mode:darken; */
  animation-name: crushblanc ;

  animation-duration: 3s;

  animation-iteration-count: 1;

  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

@keyframes crushblanc {
  0% {
  
  height: 54vw;
  }
  
 
  
  100% {
  
  height: 35vw;
  }
  }








.glow{
  position: absolute;
  /* content:url("../images/saumon.png"); */
  /* border: 1px solid red; */
  outline: 10vh  blue;
  outline-offset: -50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  background-color:white;
  /* box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px white,
    0 0 100px 180px rgb(255, 175, 100)
    ;
  */
  z-index:1;
}




.glow2:hover
{
  
    
      transform: scale(1.3);

}

.bluemiddle{

  position: absolute;
  /* content:url("../images/saumon.png"); */
/*     border: 1px solid red; */

  transform: translate(-50%, -50%) rotateZ(0deg);
  top: 50%;
  left: 50%;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color:blue;
  transition: all 2s ease;
 /* mix-blend-mode: hue;*/
  /* box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px white,
    0 0 100px 180px rgb(255, 175, 100)
    ;
  */
  z-index:80;

animation-name: crushboutonmilieu;

animation-duration: 3s;

animation-iteration-count: 1;

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}

@keyframes crushboutonmilieu {
0% {

height: 20vw;

width: 20vw;
}



100% {

height: 15vw;
width: 15vw;
}
}

.wrapper { margin: 0%;
overflow:hidden; 

 }



.textquizz{ position: absolute; width: 83%;  top: 49%;
  left: 14%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  
font-family: 'microgamma'; 
font-size: 5vw; 
font-weight: bold; 
color:blue;
/* stroke:blue ;stroke-width:0.03em ; */
z-index:60;
animation-name: bounce2 ;

        animation-duration: 5s;

        animation-iteration-count: infinite;

        animation-timing-function: alternate;
cursor: pointer;
text-decoration:none;
        
}

.textquizz:hover{
color:yellow;
}

  
.textrecette{ position: absolute; width: 83%;  top: 49%;
  left: 63%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  
font-family: 'microgamma'; 
font-size: 5vw; 
font-weight: bold; 
color:blue;
/* stroke:blue ;stroke-width:0.03em ; */
z-index:60;

animation-name: bounce ;

        animation-duration: 5s;

        animation-iteration-count: infinite;

        animation-timing-function: alternate;
  cursor: pointer;
  text-decoration:none;
        
}

.textrecette:hover{
color:yellow;
}



@media screen and (max-width: 420px) {
 

.textquizz{ position: absolute; width: 83%;  top: 50%;
  left: 14%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  
font-family: 'microgamma'; 
font-size: 5vw; 
font-weight: bold; 
color:blue;
/* stroke:blue ;stroke-width:0.03em ; */
z-index:60;
animation-name: bounce2 ;

        animation-duration: 5s;

        animation-iteration-count: infinite;

        animation-timing-function: alternate;
cursor: pointer;
text-decoration:none;
        
}

.textquizz:hover{
color:yellow;
}

  
.textrecette{ position: absolute; width: 83%;  top: 50%;
  left: 63%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  
font-family: 'microgamma'; 
font-size: 5vw; 
font-weight: bold; 
color:blue;
/* stroke:blue ;stroke-width:0.03em ; */
z-index:60;

animation-name: bounce ;

        animation-duration: 5s;

        animation-iteration-count: infinite;

        animation-timing-function: alternate;
  cursor: pointer;
  text-decoration:none;
        
}

.textrecette:hover{
color:yellow;
}
}

@keyframes bounce {
0% {
 
  transform: translateY(0%);
}

50% {
 
  transform: translateY(-50%);
}

100% {

  transform: translateY(0%);
}
}

@keyframes bounce2 {
  100% {
   
    transform: translateY(-50%);
  }

 50% {
   
    transform: translateY(0%);
  }

 0% {

    transform: translateY(-50%);
  }

}