/* defaults */

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

background-color: red;
overflow:hidden;

/* mix-blend-mode: inherit; */
}

*, body, html {
  color: blue;
  text-transform: uppercase;
  
  }





@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;
}

.rondbleufond{

    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: blue;

  grid-row:1 / 21;
    grid-column: 5 / 17;
    display: grid;
    z-index:11;
   }



.ovalegris{
  position: absolute;
  outline-offset: -50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color:grey;
  z-index:10;
}

 .ovalepreparation{
  position:absolute;
    font-size: 2.5em;
    top:10.8%;
    left:50%;
      width:60vw;
      height: 200px;
      background-color: white;
      display: flex;
      transition: all 2s ease;
      border-radius:50% ;
      transform: translate(-50%, -50%);
      font-family:'microgamma';
      overflow:hidden;
      align-items: center; 
      justify-content: center;
         min-width: 16px;
         text-transform: uppercase;
         z-index:12;
         stroke:red ;

  }

  .ovaleretour{
    
  
      width:100%;
      height: 100%;
      background-color: blue;
      display: grid;
      transition: all .3s ease;
      border-radius:50% ;
      grid-row:19 / 21;
      grid-column: 9 / 13;
      font-family:'microgamma';
      z-index:20;
      align-items: center; 
      justify-content: center;
      display: flex;
  
    }
    .ovaleretour:hover{
      background-color:white;
      color:white;
    }



  .text1{
    align-items: center; 
    justify-content: center;
    text-align: center;
    line-height:1;
    text-transform: none;
    font-size: 2.6vw;
    padding:1em;
    cursor: default;
  }

  @media screen and (max-width: 1000px) {
    .text1{
      align-items: center; 
      justify-content: center;
      text-align: center;
      line-height:1;
      text-transform: none;
      font-size: 2.5vw;
      padding:1em;
    }
  }

  .text4{
    align-items: center; 
    justify-content: center;
    text-align: center;
    line-height:1.1;
    text-transform: none;
    font-size: 2.6vw;
    padding:2em;
    text-transform: uppercase;
    cursor: default;
    pointer-events: none ;

  }

  @media screen and (max-width: 1000px) {
    .text4{
      align-items: center; 
      justify-content: center;
      text-align: center;
      line-height:1.1;
      text-transform: none;
      font-size: 3.5vw;
      padding:2em;
      text-transform: uppercase;
      cursor: default;
    }
  }

  .text3{
    align-items: center; 
    justify-content: center;
    text-align: center;
    line-height:1.1;
    text-transform: uppercase;
    font-size:1.4vw;
    padding:2em;
    text-decoration: none;
    color:white;
  }
 .text3:hover{
    color: blue;
  }

  .text5{
    align-items: center; 
    justify-content: center;
    text-align: center;
    font-size: 3vw;
    text-decoration: none;
    text-transform: uppercase;
  }

   .ovalerecette{

    font-size: 2.5em;
  
      width:100%;
      height: 100%;
      transition: all 2s ease;
      background-color: white;
      display: grid;
      border-radius:50% ;
      grid-row:7 / 14;
      grid-column: 7 / 15;
      font-family:'microgamma';
      text-align: center;
      align-items: center; 
      justify-content: center;
     
         z-index:14;
    }/* .ovalerecette{
    position:absolute;
    font-size: 2.5em;
    top:50%;
    left:50%;
      width:70%;
      height: 20vw;
      transition: all 2s ease;
      background-color: white;
      display: flex;
      border-radius:50% ;
      transform: translate(-50%, -50%);
      font-family:'microgamma';
      
      align-items: center; 
      justify-content: center;
     
         z-index:10;
    } */
    
    .recette_middle  {
      top:50%;
        width: 80vw;
      height: 25vw;
    }
    
    .textrecette{
      align-items: center; 
      justify-content: center;
      text-align: center;
      line-height:1.1;
      text-transform: uppercase;
      font-size:  1.3vw;
      padding:2em;
    }
    @media screen and (max-width: 1000px) {
      .textrecette{
        align-items: center; 
        justify-content: center;
        text-align: center;
        line-height:1.1;
        text-transform: uppercase;
        font-size:  2vw;
        padding:2em;
      }}
    
    .text2{
      align-items: center; 
      justify-content: center;
      text-align: center;
      line-height: 1;
      width:150px;
      /* text-transform: uppercase; */
      font-size: 1.3vw;
    transition: all .3s ease;
    }

    .text2:hover{
      color:white;
    }

    @media screen and (max-width: 1000px) {
      .text3{
        align-items: center; 
        justify-content: center;
        text-align: center;
        line-height: 1;
        width:150px;
        /* text-transform: uppercase; */
        font-size: 2vw;}}

p:hover{
  color:white;
}
    body {
      width:100vw;
    display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 5vh 5vh 5vh 5vh 5vh  5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 
    5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh 5vh ;
  column-gap: 20px;
  row-gap: 0px;
    /* grid-template-areas:
      'header header header header header header header header header header header header'
      'content content content content content content content content content content content content'
      'footer footer footer footer footer footer footer footer footer footer footer footer'; */
  }



  .ovale{
    width:100%;
    height: 100%;
    transition: all .3s ease;
    border-radius:50%;
    background-color: white;
      grid-row:5 / 7;
      grid-column: 4 / 8;
      display: grid;
      
  font-family:'microgamma';
      align-items: center; 
      justify-content: center;
      text-align:center;
         min-width: 16px;
        /* padding:10; */
        font-size: 1.3vw;
         text-transform: uppercase;  
      z-index:30;
  cursor:pointer;
  }  

  .ovale:hover{
background-color:blue;
color:white;
  }

  @media screen and (max-width: 1000px) {
    .ovale{
      font-size: 2vw;}}

  /* GAUCHE */
    #ovale{
      width:100%;
      height: 100%;
      border-radius:50%;
    
        grid-row:5 / 7;
        grid-column: 4 / 8;
        display: grid;
        font-size: 1.5em;
    font-family:'microgamma';
        align-items: center; 
        justify-content: center;
           min-width: 16px;
           text-transform: uppercase;  
        z-index:30;
    cursor:pointer;
    } 
    
    #ovale1{
      width:100%;
      height: 100%;
      border-radius:50%;
    
        grid-row:5 / 7;
        grid-column: 4 / 8;
        display: grid;
    font-family:'microgamma';
        align-items: center; 
        justify-content: center;
           min-width: 16px;
           text-transform: uppercase;  
        z-index:30;
    cursor:pointer;
    } 

    #ovale2
    {
      width:100%;
      height: 100%;
      border-radius:50%;
  
      grid-row:8 / 10;
      grid-column: 3 / 7;
      display: grid;

      font-family:'microgamma';
      align-items: center; 
      justify-content: center;
      min-width: 16px;
      text-transform: uppercase;  
      z-index:30;
 
      cursor:pointer;
    }
    
    #ovale3
    {
      width:100%;
      height: 100%;
      border-radius:50%;
  
      grid-row:11 / 13;
      grid-column: 3 / 7;
      display: grid;

      font-family:'microgamma';
      align-items: center; 
      justify-content: center;
      min-width: 16px;
      text-transform: uppercase;  
      z-index:30;
      cursor:pointer;
    }  
    
    #ovale4
    {
      width:100%;
      height: 100%;
      border-radius:50%;

      grid-row:14 / 16;
      grid-column: 4 / 8;
      display: grid;

      font-family:'microgamma';
      align-items: center; 
      justify-content: center;
      min-width: 16px;
      text-transform: uppercase;  
      z-index:30;
      cursor:pointer;
    }
    
    #ovale5
    {
      width:100%;
      height: 100%;
      border-radius:50%;

      grid-row:17 / 19;
      grid-column: 5 / 9;
      display: grid;
  
      font-family:'microgamma';
      align-items: center; 
      justify-content: center;
      min-width: 16px;
      text-transform: uppercase;  
      z-index:30;
      cursor:pointer;
    }

    /* DROITE */

    #ovale6{
      width:100%;
      height: 100%;
      border-radius:50%;

        grid-row:5 / 7;
        grid-column: 14 / 18;
        display: grid;
    
    font-family:'microgamma';
        align-items: center; 
        justify-content: center;
           min-width: 16px;
           text-transform: uppercase;  
        z-index:30;
        cursor:pointer;
    }   
    
    #ovale7
    {
      width:100%;
      height: 100%;
      border-radius:50%;
      
      grid-row:8 / 10;
      grid-column: 15 / 19;
      display: grid;
 
      font-family:'microgamma';
      align-items: center; 
      justify-content: center;
      min-width: 16px;
      text-transform: uppercase;  
      z-index:30;
      cursor:pointer;
    }
    
    #ovale8
    {
      width:100%;
      height: 100%;
      border-radius:50%;
    
      grid-row:11 / 13;
      grid-column: 15 / 19;
      display: grid;

      font-family:'microgamma';
      align-items: center; 
      justify-content: center;
      min-width: 16px;
      text-transform: uppercase;  
      z-index:30;
      cursor:pointer;
    }  
    
    #ovale9
    {
      width:100%;
      height: 100%;
      border-radius:50%;
   
      grid-row:14 / 16;
      grid-column: 14 / 18;
      display: grid;

      font-family:'microgamma';
      align-items: center; 
      justify-content: center;
      min-width: 16px;
      text-transform: uppercase;  
      z-index:30;
      cursor:pointer;
    }
    
    #ovale10
    {
      width:100%;
      height: 100%;
      border-radius:50%;
   
      grid-row:17 / 19;
      grid-column: 13 / 17;
      display: grid;
    
      font-family:'microgamma';
      align-items: center; 
      justify-content: center;
      min-width: 16px;
      text-transform: uppercase;  
      z-index:30;
      cursor:pointer;
    }
    

    .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:120;
    
    animation-name: crushboutonmilieu;
    
    animation-duration: 1.8s;
    
    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;
    
    opacity:100%;
    }
    90%{
      opacity:100%;
    }
    
    100% {
      pointer-events: none ;
      height: 55vw;
    
      width: 100vw;
      opacity:0%;
    }
    }

    .backgroundYellow {
      background-color: yellow !important ; 
      /* transition: all 2s ease; */
      }