@font-face { 
  font-family: './fonts/SuisseEDUIntl'; 
  src: url('SuisseEDUIntl.eot') format('embedded-truetype'); 
  font-weight: normal; 
  font-style: normal; 
}

html, body {
  height: 100%;
}

html {
  font-size: 40px;
}

body {
  background-image: linear-gradient(180deg, rgb(98, 0, 255),white);
  font-family: "Suisse EDU Int'l";
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  height: 100%;

}


.menu {
  position: sticky;
  top: 0;
}

.buttons {
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10%;
}

.liste {
  display: flex;
  justify-content: space-between;
}

.liste li {
  border: solid 2px black;
}

.contenu {
  width: 60%;
  margin: auto;
}

.titre {
  font-family: 'SuisseEDUIntl';
  /* SuisseEDUIntl.woff
  SuisseEDUIntl.ttf
  SuisseEDUIntl.svg
  SuisseEDUIntl.otf
  SuisseEDUIntl.eot
  SuisseEDU.otf; */
  font-size: 3rem;
  position: sticky;
  top: 1.2rem;
}

.buttons-elements a + a {
  margin-top: 0.6em;


}



.bloc1 {
  text-align: center;
  background-color: white;
    height: 50px;
      border-radius: 130px;
      padding-top: 71px;
      padding-bottom: 66px;
      padding-right: 60px;
      padding-left: 60px;
      color:rgb(98, 0, 255);
      width: 40%;
      transform: translate(-10%, 0);
    display: block;
      margin-left: 05%;
  
  }




  
  
  .bloc1 h1 {
    text-align: center;
 
  }

  .bloc2 {
    text-align: center;
    display: block;
    padding-top: 61px;
    padding-bottom: 86px;
    padding-right: 60px;
    padding-left: 60px;
    background-color: white;
    height: 50px;
    border-radius: 130px;
    width: 40%;
    transform: translate(-10%, 0);
    color:rgb(98, 0, 255);
    margin-left: 52%;
   

  }

    .bloc2 h1 {
      text-align: center;
  
    }

 

    .bloc3 {
      text-align: center;
      display: block;
      background-color: white;
        height: 50px;
        border-radius: 130px;
        color:rgb(98, 0, 255);
        padding-top: 71px;
        padding-bottom: 66px;
        padding-right: 60px;
        padding-left: 60px;
        width: 40%;
        transform: translate(-10%, 0);
        margin-left: 20%;
        margin-bottom: 20%;
      }

      .bloc3 h1 {
        text-align: center;
 
      }

     .titre {
       float: right;
       color: white;
       font-size: 40px;
       margin-right: 40px;
     }


     .retour { 
      float: left;
      color: white;
      font-size: 40px;
      margin-left: 40px;
    }





    .header {
      color: white;
      padding: 1em;
    
      display: flex;
      justify-content: space-between;
    }





    @media all and (max-width: 1100px)
{

  .bloc1 {

    font-size: 35px;
  }


  .bloc2 {

    font-size: 35px;
  }

  .bloc3 {

    font-size: 35px;
  }



}




@media all and (max-width: 898px)
{

  .bloc1 {

    font-size: 35px;
    padding-top: 71px;
    padding-bottom: 66px;
    padding-right: 80px;
    padding-left: 80px;

  }


  .bloc2 {

    font-size: 35px;
    padding-top: 61px;
    padding-left: 80px;
    padding-right: 80px;
    margin-left: 45%;


  }

  .bloc3 {

    font-size: 35px;
    padding-right: 80px;
    padding-left: 80px;
    padding-top: 60px;
    padding-bottom: 100px;

  }



}










@media all and (max-width: 800px)
{

  .bloc1 {

    font-size: 35px;
    padding-top: 71px;
    padding-bottom: 66px;
    padding-right: 80px;
    padding-left: 80px;

  }


  .bloc2 {

    font-size: 35px;
    padding-top: 61px;


  }

  .bloc3 {

    font-size: 35px;
    padding-right: 90px;
    padding-left: 90px;
  }



}





@media all and (max-width: 770px)
{


  .bloc1 {

  font-size: 35px;
    padding-top: 60px;
    padding-bottom: 85px;
    padding-right: 80px;
    padding-left: 80px;

  }

}
















@media all and (max-width: 620px)
{


  .bloc1 {

  font-size: 30px;


  }

  .bloc2 {

    font-size: 30px;
    margin-left: 38%;
  
    }
  

    .bloc3 {

      font-size: 30px;
    
    
      }

}







    @media all and (max-width: 500px)
{

  html {
    font-size: 30px;
  }
  
  body {
    background-image: linear-gradient(180deg, rgb(98, 0, 255),white);;
    font-family: "Suisse EDU Int'l";
    background-repeat: no-repeat ;
   
    }

  
  .menu {
    position: sticky;
    top: 0;
  }
  
  .liste {
    display: flex;
    justify-content: space-between;
  }
  
  .liste li {
    border: solid 2px black;
  }
  
  .contenu {
    width: 60%;
    margin: auto;
  }
  
  .titre {
    font-family: 'SuisseEDUIntl'
    SuisseEDUIntl.woff
    SuisseEDUIntl.ttf
    SuisseEDUIntl.svg
    SuisseEDUIntl.otf
    SuisseEDUIntl.eot
    SuisseEDU.otf;
    font-size: 3rem;
    position: sticky;
    top: 1.2rem;
  }
  
  
  
  .bloc1 {
    background-color: white;
    height: 50px;
    border-radius: 130px;
    color:rgb(98, 0, 255);
    padding-top: 35px;
    padding-bottom: 45px;
    padding-right: 60px;
    padding-left: 60px;
    margin-left: 4%;
    font-size: 30px;
 
  
       
    }
    
    .bloc1 a {
      text-align: center;
   
    }
  
    .bloc2 {
        padding-top: 23px;
        padding-bottom: 57px;
        padding-right: 60px;
        padding-left: 60px;
    background-color: white;
        height: 50px;
        border-radius: 130px;
        color:rgb(98, 0, 255);
      margin-left: 40%;
      font-size: 30px;


    
      }
  
      .bloc2 a {
        text-align: center;
    
      }
  
  
      .bloc3 {
        background-color: white;
          height: 50px;
          border-radius: 130px;
          color:rgb(98, 0, 255);
          padding-top: 35px;
          padding-bottom: 45px;
          padding-right: 71px;
          padding-left: 47px;
          font-size: 30px;
  
          
        }
  
        .bloc3 a {
          text-align: center;
   
        }

  
       .titre {
         float: right;
         color: white;
         font-size: 30px;
         margin-right: 40px;
       }
  
  
       .retour { 
        float: left;
        color: white;
        font-size: 30px;
        margin-left: 40px;
      }
  

      .buttons-elements a + a {
        margin-top: 2em;
      }