/* MEDIA PRINT*/


@media print {



.body{
  width: 200vw;
  height: 200vh;
  z-index: 0;
}

.first{
  display: none;
  z-index: 0;
}


.first1{
  display: none;
  z-index: 0;
}

.first2{
  display: none;
  z-index: 0;
}

.first3{
  display: none;
  z-index: 0;
}

.tLoi1, .tLoi2, .tLoi3{
  display: none;
  z-index: 0;
}

.box{
  display: none;
}
  .flex-items:nth-child(1) {
    height: 100vh;
    width: 100vw;
display: none;
  }
  .flex-items:nth-child(2) {
display: none;
  }

  .titre{
 display: inline;
z-index: 10;
  }

  .titre1{
    display: none;
   }

  .titre2{
    display: none;
   }

  .titre3{
    display: none;
   }

  .titre4{
   display: none;
  }


.interdit{
    display: none;
}

.parchemin{
  display: none;
}

.writing{
  display: none;


}

.printer{
 display: none;
}

.signature{
  background-image: radial-gradient(red 2px, transparent 2px);
  background-size: 26px 26px;
  width: 100vw;
  height: 100%;
position: absolute;
font-family: 'Bradford LL';
    src: url('BradfordLL-Regular.woff2') format('woff2'),
        url('BradfordLL-Regular.woff') format('woff'),
        url('BradfordLL-Regular.svg#BradfordLL-Regular') format('svg');
font-size: 17vw;
top: 40px;
left: 0,5%;
user-select: none;
text-align: center;
vertical-align: middle;
color: red;
z-index: 30;

}

  canvas {
    width: 220vw;
    height: 100vh;
    z-index: 40;
top: -100px;
left: -40px;
  }
  
  #trouimprimante{
    top: -300vh;
}
  #papierimprimante{
    top: -300vh;
  }

  #paper-holder{
    top: -300vh;
  }

  .h1{
    top: -300vh;
  }

  .juge{
    top: -300vh;
  }
   .support{
    top: -300vh;
   }

   .explosion .explosion2 .explosion3{
    top: -300vh;
   }
}







/* MEDIA QUERIES ÉCRAN*/





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



/* premiere partie*/




.first{
  height: 100%;
  overflow: hidden;
}


.first1{
  height: 100%;
  overflow: hidden;
}

.first2{
  height: 100%;
  overflow: hidden;
}

.first3{
  height: 100%;
  overflow: hidden;
}


.up{
  font-size: 6vw;
}

.middle{
  font-size: 14vw;
}

.down{
font-size: 6vw;
}

.titre{
  top: 12px;
  font-size: 1em;
  z-index: 30;
    
}


.flex-container {
  display: flex;
  height: 87%;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 39px;
  flex-direction: column;
  overflow: scroll;
  
}

.flex-items:nth-child(1) {
  display: block;
  width: 97vw;
  height: 100%;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  background-image: radial-gradient(red 2px, transparent 2px);
    background-size: 25.5px 25.5px;
    background-color: #ffffff;
    z-index: 0;
    overflow: scroll;
}

.flex-items:nth-child(2) {
  overflow: scroll;
    display: block;
    width: 97vw;
    height: 100%;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    transform: translateY(-1%);
    background-color: red;
    border-radius: 10px;
    z-index: 30;
    overflow: scroll;
}

.signature{
  width: 89vw;
  height: 50vh;
    position: absolute;
    font-family: 'Bradford LL';
      src: url('BradfordLL-Regular.woff2') format('woff2'),
          url('BradfordLL-Regular.woff') format('woff'),
          url('BradfordLL-Regular.svg#BradfordLL-Regular') format('svg');
          font-size: 11vw;
          padding: 5%;
          top: 6%;
    user-select: none;
    text-align: center;
    vertical-align: middle;
    color: red;
    z-index: 30;
  }


  .lois{
    width: 95vw;
    height: fit-content;
    left: 1.2%;
    position: absolute;
    font-family: 'Bradford LL';
        src: url('BradfordLL-Regular.woff2') format('woff2'),
            url('BradfordLL-Regular.woff') format('woff'),
            url('BradfordLL-Regular.svg#BradfordLL-Regular') format('svg');
            font-size: 4vw;
            top: 4%;
            user-select: none;
            text-align: center;
            color: white;
            background-color: red;
            box-shadow: 0px 8px 10px -2px #ff0000;
            z-index: 60;
    }
    
    .lois2{
      width: 94%;
      height: 63%;
      position: absolute;
      font-family: 'Bradford LL';
          src: url('BradfordLL-Regular.woff2') format('woff2'),
              url('BradfordLL-Regular.woff') format('woff'),
              url('BradfordLL-Regular.svg#BradfordLL-Regular') format('svg');
              font-size: 3.8vmin;
              padding: 2%;
              top: 30%;
              left: 1%;
              overflow-y: scroll;
              user-select: none;
              text-align: left;
              color: white;
              z-index: 11;
      }


      li span{
        position: relative;
      left: 0em;
      }
     
      p {
        padding-left: 2.4em;
      
      }

      #paper-holder{
        position:absolute;
        height:70vw;
        overflow: hidden;
        top:5px;
        left:0;
        right:0;
        z-index: 500;
      }


 #papierimprimante{
        position:absolute;
        overflow:hidden;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;  color: rgb(104, 7, 7);
        background-color: white;
        width: 60vw;
        height:30vh;
        top:3px;
        left:5vw;
        right:0;
        z-index: 60;
        animation: animprint 8s linear ;
        animation-iteration-count: 1;
        font-family: 'Bradford LL';
          src: url('BradfordLL-Regular.woff2') format('woff2'),
              url('BradfordLL-Regular.woff') format('woff'),
              url('BradfordLL-Regular.svg#BradfordLL-Regular') format('svg');
        color: black;
        font-size: 7vw;
        text-align: center;
      }

.box b {
        display: block;
        top: -20%;
        left: -20%;
        width: 30%;
        height: min-content;
        border-radius: 1px;
        background-color: red;
        box-shadow: 0px 0px 1px 4px red;
        font-family: 'Bradford LL';
        src: url('BradfordLL-Regular.woff2') format('woff2'),
            url('BradfordLL-Regular.woff') format('woff'),
            url('BradfordLL-Regular.svg#BradfordLL-Regular') format('svg');
      color: red;
      font-size: 3.9vw;
        text-align: center;
        color: rgb(255, 255, 255);
        position: absolute;
        transform: translate(-50%, -50%);  
      }



.canvas2{
  width: 100vw;
  height: 50vh;
  z-index: 20;
}

.explosion{
  top: calc(2.4em - -4vw);
}

.explosion2{
  top: calc(2.4em - -9vw);
}

.explosion3{
  top: calc(2.4em - -17vw);
}

.juge{
  top: calc(2.4em - -21vw);
}

.support{
  top: calc(2.4em - -32.1vw);
}


.interdit{
  width: 32px;
  left: 40px;
  top: 9px;
}

.parchemin{
  width: 30px;
  }

  .writing{
    width: 34px;
    left: 25px;

  }
    
  .printer{
    width: 32px;

    }


    .titre1{
      font-size: 40px;
      left: 9px;
    }
    
    .titre2{
      font-size: 40px;
      right: 45px;
    }
    
    .titre3{
      font-size: 40px;
      left: 12px;

    }
    
    .titre4{
      font-size: 40px;
      right: 53px;

    }




.tLoi4{
  height: 100%;
  overflow: scroll;
}

.html{
  height: 100%;
  overflow: scroll;
}

.body{
  height: 100%;
  overflow: scroll;
}

}



@media screen and (max-height: 667px){


  .flex-container {
    display: flex;
    height: 75.5%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 36px;
    flex-direction: column;
    overflow: scroll;
    
  }
  
  .flex-items:nth-child(1) {
    display: block;
    width: 97vw;
    height: 100%;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    background-image: radial-gradient(red 2px, transparent 2px);
      background-size: 25.5px 25.5px;
      background-color: #ffffff;
      z-index: 0;
      overflow: scroll;
  }
  
  .flex-items:nth-child(2) {
    overflow: scroll;
      display: block;
      width: 97vw;
      height: 100%;
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: auto;
      align-self: auto;
      order: 0;
      transform: translateY(-1%);
      background-color: red;
      border-radius: 10px;
      z-index: 30;
      overflow: scroll;
  }




  .writing{
    width: 29%;
    left: 25px;
    bottom: 13%;
  }
    
  .printer{
    width: 29%;
    bottom: 13%;

    }


    .titre1{
      font-size: 40px;
      left: 9px;
    }
    
    .titre2{
      font-size: 40px;
      right: 45px;
    }
    
    .titre3{
      font-size: 40px;
      left: 12px;
      bottom: 12%;
    }
    
    .titre4{
      font-size: 40px;
      right: 50px;
      bottom: 12%;
    }

}