/* defaults */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;

background-color: red;
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;
}



.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: grey;
    /* 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: grey;
    /* box-shadow:
      0 0 60px 30px #fff,
      0 0 100px 60px white,
      0 0 100px 180px rgb(255, 175, 100)
      ;
    */
    z-index:0;
  }

  .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: 20vw;
    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: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(-400%);
}


50% {

transform: translateX(150%);
}

100% {

transform: translateX(-400%);
}
}

.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: 20vw;
    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: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(-300%);
}


50% {

transform: translateX(150%);
}

100% {

transform: translateX(-300%);
}
}

.ovaleblanc{
    position: absolute;
    /* content:url("../images/saumon.png"); */
    /* border: 1px solid red; */
    outline: 10vh  black;
    outline-offset: -50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateZ(0deg);
    width: 100vw;
    height: 34vw;
    border-radius: 70%;
    background-color:white;
    /* box-shadow:
      0 0 60px 30px #fff,
      0 0 100px 60px white,
      0 0 100px 180px rgb(255, 175, 100)
      ;
    */
    transition: all 2s ease;
    z-index:40;
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: 34vw;
  }
  
 
  
  100% {
  
  height: 20vw;
  }
  }





.glow{
    position: absolute;
    /* content:url("../images/saumon.png"); */
    /* border: 1px solid red; */
 
    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; */
    outline: 10vh  blue;
    transform: translate(-50%, -50%) rotateZ(0deg);
    top: 50%;
    left: 50%;
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    background-color:blue;
    transition: all 2s ease;
    mix-blend-mode: normal;
    /* box-shadow:
      0 0 60px 30px #fff,
      0 0 100px 60px white,
      0 0 100px 180px rgb(255, 175, 100)
      ;
    */
    z-index:80;
  }




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

   }

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


    .texthistoire{ position: absolute; width: 83%;  top: 70%;
      left: 13%;
      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;
            
  }
  
  .texthistoire:hover{
    color:yellow;
  }
  
      
  .textrecette{ position: absolute; width: 83%;  top: 70%;
      left: 67%;
      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;
  }
}

.texthistoire{ position: absolute; width: 83%;  top: 49%;
    left: 13%;
    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;
          
}

.texthistoire:hover{
  color:yellow;
}

    
.textrecette{ position: absolute; width: 83%;  top: 49%;
    left: 67%;
    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%);
  }

}