/* defaults */

        html {
            margin: 0;
            height: 100%;
            font-size: 4vw;
            overflow: hidden;

            transition: background-color 2s ease-in-out; 
          }

        body{
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            overflow: hidden;
            color: #00096a;
          }


        @font-face {
            font-family: "herbus";
            src: url("../fonts/HerbusTRIAL-Regular.otf") format("opentype");
          }
          

        .counter, .percentageCartesien {  
                font-family: "herbus";
                
                text-align: center;
                position: absolute;
                top: .5rem;
                left: 50%;
                transform: translate(-50%, -0%);
                width: 80%;
                
                font-size: .5rem;
                z-index: 1;
                
              }

              
        /* HOMEPAGE */

        #home{
          text-align: center;
          color: #00096a;
          background: none;
          font-size: 1rem;
          font-family: "herbus";
          width: 100%;
          position: absolute;
          top: 50%;
          right: 50%;
          transform: translate(50%,-50%);

          text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffffff, 0 0 40px #ffffff, 0 0 50px #ffffff, 0 0 60px #ffffff, 0 0 70px white;
          
        }

        button{
          text-align: center;
          color: #00096a;
          background: none;
          border: none;
          text-decoration: underline;
          font-size: 1rem;
          font-family: "herbus";
          text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffffff, 0 0 40px #ffffff, 0 0 50px #ffffff, 0 0 60px #ffffff, 0 0 70px white;
          cursor: help;
          
        }


        /* QUESTIONS */

        #question{
                display: flex;
                align-items: center;
                justify-content: center;
            
                font-family: "herbus";

                text-align: center;
                height: 44%;
                position: absolute;
                top: 2%;
                left: 50%;
                transform: translate(-50%, -0%);
                width: 80%;
            
                font-size: 1rem;
                line-break: auto;
                line-height: 1.2rem;
                text-transform: uppercase;
                flex: auto;

                z-index: 20;
            }
          

            
            .answer{
                padding-left: 10%;
                padding-right: 10%;
                font-family: "herbus";
                text-align: center;
                font-size: 0.7rem;
                line-height: 1rem;
                background: none;
                border: none;
                cursor: pointer; 
                text-transform: uppercase;
                position: relative;
                z-index: 20;

                display: flex;
                align-items: center;
                justify-content: center;
              }
              
              .contain-a{
                height: 28%;
                bottom: 28%;
                position: absolute;
                width: 100%;

                transition: background-color 2s ease-in-out; 
              }

            #answer-a, #answer-b{
              position: relative;
              top: 50%;
              transform: translate(0%, -50%);
              }
              
              .contain-b{
                height: 28%;
                position: absolute;
                bottom: 0%;
                width: 100%;

                transition: background-color 2s ease-in-out; 
              }


        .entry-question{
          text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffffff, 0 0 40px #ffffff, 0 0 50px #ffffff, 0 0 60px #ffffff, 0 0 70px white;


          height: 100%;
          opacity: 1; 

          transition: background-color 2s ease-in-out; 
        }

        .entry-question.hidden {
          opacity: 0;
        }


        .invisible{
            display: none;
        }


        .img{
          z-index: 10;
          top: 0px;
          pointer-events: none;
          mix-blend-mode: difference;
          transform: translate(-25%, 0%);

          transition: left 2s ease-in-out;
          /* transition-delay: 1s; */
        }

        .illu{
          fill: white;
          /* height: 2em; */
          overflow: visible;
          mix-blend-mode: difference;

          transition: left 2s ease-in-out;
          /* transition-delay: 1s; */
        }


        .img-1-A{
            position: absolute;
            height: 56%;
            top: 44%;
          }

        .img-1-B{
            position: absolute;
            right: 1.5em;
            height: 28%;
            top: 44%;
            left: 10%;
        }

        .img-2-A{
          position: absolute;
          /* height: 28%;
          top: 44%; */
          
          height: 72%;
          top: 0%;
        }

        .img-2-B{
            position: absolute;
            height: 72%;
            top: 0%;
        }

        .img-3-A{
          position: absolute;
          height: 56%;
          top: 44%;
        }

        .img-3-B{
            position: absolute;
            height: 10%;
            top: 0%;
          }
          
          
          .img-4-A{
            position: absolute;
            top: 44%;
            height: 28%;
          }
          
          .img-4-B{
            position: absolute;
            top: 44%;
            height: 28%;
          }
          
          .img-5-A{
            position: absolute;
            top: 0%;
            height: 72%;
          }
          
          .img-5-B{
            position: absolute;
            top: 0%;
            height: 72%;
          }
          
          .img-6-A{
              position: absolute;
              top: 0%;
              height: 100%;
            }
          
          .img-6-B{
              position: absolute;
              bottom: 0%;
              height: 56%;
            }
            
            .img-7-A{
              position: absolute;
              height: 100%;
              top: 0%;
              }
              
            .img-7-B{
              position: absolute;
              height: 100%;
              top: 0%;
            }
              
            .img-8-A{
              position: absolute;
              height: 100%;
              top: 0%;
              }
                
            .img-8-B{
              position: absolute;
              top: 0%;
              width: 100%;
              }
                


            .img-9-A{
              position: absolute;
              top: 72%;
              height: 28%;
              }
            

        .img-9-B{
          position: absolute;
          top: 0%;
          height: 44%;
        }

        .img-10-A{
          position: absolute;
          top: 0%;
          height: 100%;
        }
        
        .img-10-B{
          position: absolute;
          top: 0%;
          height: 100%;
        }

        .img-11-A{
          position: absolute;
          top: 50%;
          left: 50%;
        }

      

        .percentageCartesien{
          font-size: 1.5rem;
          z-index: +100;
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #00096a;


          text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffffff, 0 0 40px #ffffff, 0 0 50px #ffffff, 0 0 60px #ffffff, 0 0 70px white;
          opacity: 1;
        }


        button-print{
          position: absolute;
          left: 50%;
          bottom: 10%;
          transform: translate(-50%, -50%);


          z-index: 10;

          text-align: center;
          color: #00096a;
          background: none;
          border: none;
          cursor: pointer;
          text-decoration: underline;
          font-size: 1rem;
          font-family: "herbus";
          text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffffff, 0 0 40px #ffffff, 0 0 50px #ffffff, 0 0 60px #ffffff, 0 0 70px white;
        }



@media screen and (max-width: 500px) {
    html{
        font-size: 7vw;
    }
  }


@media screen and (min-width: 500px) and (max-width: 1000px) {
    html{
        font-size: 6vw;
    }
  }

@media print {
  .percentageCartesien{
    margin: 0% !important;    
    font-size: 4.5em !important;
    text-align: center !important;
    line-height: 1em !important;
  }


  button.print{
    display: none !important;
    opacity: 0 !important;
  }

}
  /*  */