@font-face {
    font-family: 'Perloff-Regular';
    src:  url('./Perloff-Regular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Perloff-Medium';
    src: url('./Perloff-Medium.woff2') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
  font-family: 'Ionic';
  src: url('./Ionic-MT-Std-Regular.otf') format('otf');
  font-weight: 600;
  font-style: normal;
}

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

html,
body {
  padding: 0;
  margin: 0;
  background:#caa3f7;
  overflow-y: hidden;
  width: 15000px;
  max-height:80%;
}

iframe{
  width:100%;
  height:auto;
}


ul {
  display:flex;
  padding:0;
  list-style: none;
  width: 100%;
  padding-top:38px;
  margin-left:100px;
}

li {
  /* border:black thin solid; */
  display: inline-block;
  float:left;
  margin-right:40px;
  /* background: white; */
  width: 85vh;
  height: auto;
  border-radius: 20px;
}

h1{
  font-family:'Perloff-Regular', sans-serif;
  font-size: 25px;
  font-weight: 200;
  color:black;
  padding-left:30px;
  position:fixed;
}

h2{
  font-family:'Perloff-Regular', sans-serif;
  font-size: 25px;
  font-weight: 200;
  color:black;
  padding-left:30px;
  padding-top:100px;
  position:fixed;
  width:70%;
}

h6{
  opacity:1;
  font-family:'Perloff-Regular', sans-serif;
  font-weight:500;
  font-size:18px;
  z-index:1000;
  color : white;
  text-shadow:-1px 0 rgba(255,255,255,0.5), 0 1px rgba(255,255,255,0.5), 1px 0 rgba(255,255,255,0.5), 0 -1px rgba(255,255,255,0.5);
}

p{
  color:black;
  padding-left:30px;
  text-align:left;
  line-height:140%;
  font-weight:400;
  font-size: 22px;
  font-family: "Caladea", serif;
  font-style: normal;
  letter-spacing: 1px;
}

a{
  text-decoration: none;
  color:black;
}

a:hover{
  color:#caf7b6;
}

img{
  display:block;
  margin-left:auto;
  margin-right:auto;
  padding-top:20%;

}


.body{
  position:fixed;
  margin-left:10px;
  margin-top:-35px;
}

.body-2{
  position:fixed;
  margin-left:10px;
  margin-top:-80px;
}

.ul{
  margin-left:35px;
  margin-bottom:-80px;
}

.ul-2{
  margin-left:35px;
  margin-top:-35px;
}

.page {/*
  display:block;
  margin-left:auto;
  margin-right:auto;*/
  display:flex;
  padding:0;
  list-style: none;
  width: 100%;
  padding-top:20px;
  padding-bottom:100px;
  margin-left:100px;
}

.couverture{
  background:black;
}

.couverture img{
  margin: 0;
  margin-top:-50px;
}

.couverture h1{
  color:white;
  margin-top:20px;
  padding-left:30px;
  text-align:left;
  font-weight:400;
}

.couverture p{
  color:white;
  padding-left:30px;
  padding-right:30px;
  margin-top:-20px;
  text-align:left;
  line-height:150%;
}

.carte-verte h1{
  color:black;
  font-weight:400;
  text-align: left;
  padding-left:30px;
  //padding-top:10px;
}

.carte-verte p{
  color:black;
  padding-top:20px;
  padding-left:30px;
  padding-right:30px;
  text-align:left;
  line-height:140%;
  font-weight:400;
  font-size: 22px;
  font-family: "Caladea", serif;
  font-style: normal;
  letter-spacing: 1px;

}

.carte-blanche{
  background:lightgrey;
}

.carte-blanche p{
  color:white;
  padding-top:20px;
  padding-left:30px;
  padding-right:30px;
  text-align:left;
  line-height:140%;
  font-weight:400;
  font-size: 22px;
}

.carte-blanche h1{
  color:white;
  font-weight:400;
  text-align: left;
  padding-left:30px;

}

.carte-noire{
  background:#d2cdfa;
}

.carte-noire h1{
  color:white;
  font-weight:400;
  text-align: left;
  padding-left:30px;
  //padding-top:20px;
}

.carte-noire p{
  font-family: 'Perloff-Regular', sans-serif;
  font-size: 10px;
  color:black;
  font-weight:300;
  text-align:center;
}


      .fonttext{
        opacity:1;
        font-family:'Perloff-Regular', sans-serif;
        font-weight:500;
        font-size:18px;
        z-index:1000;
        color : white;
        text-shadow:-1px 0 rgba(255,255,255,0.5), 0 1px rgba(255,255,255,0.5), 1px 0 rgba(255,255,255,0.5), 0 -1px rgba(255,255,255,0.5);
    }

}

 /* Pour la partie sur téléphone mobile */

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

html,
body {
  padding: 0;
  margin: 0;
  background:#caa3f7;
  width: 600px;
  cursor: url(pointer.svg), auto;
}

ul {
  padding:0;
  list-style: none;
  width: 100%;
  padding-top:38px;
  margin-left:100px;
}

li {
  /* border:black thin solid; */
    display:block;
  margin-right:auto;
    margin-left:auto;
  width: 90%;

 margin-bottom : 50px;
 border-radius:20px;
}

h1{
  font-family: 'Perloff-Regular', sans-serif;
  font-size: 20px;
  text-align: center;
  color:black;
  padding-top:40px;
  padding-left:10px;
  padding-right:10px;
}

h2{
  font-family: 'Perloff-Regular', sans-serif;
  font-size: 15px;
  color:black;
  font-weight:300;
  width:80%;
  padding-left:50px;
}

h6{
  opacity:1;
  font-family:'Perloff-Regular', sans-serif;
  font-weight:500;
  font-size:22px;
  z-index:1000;
  color : white;
  text-shadow:-1px 0 rgba(255,255,255,0.5), 0 1px rgba(255,255,255,0.5), 1px 0 rgba(255,255,255,0.5), 0 -1px rgba(255,255,255,0.5);
}

p{
  font-family: 'Perloff-Regular', sans-serif;
  font-size: 12px;
  color:black;
  font-weight:300;
}

a{
  text-decoration: none;
  color:#786eff;
  cursor: url(pointer.svg), auto;
}

a:hover{
  color:#caf7b6;
}

img{
  display:block;
  margin-left:auto;
  margin-right:auto;
  padding-top:20%;
}


.body{
display:none;
}

.body-2{
display:none;
}

.ul{

display:none;
}

.ul-2{
display:none;
}

.page {

}

.couverture{
  background:black;
}

.couverture h1{
  color:white;
  margin-top:40px;
  padding-left:30px;
  text-align:left;
  font-weight:400;
}

.couverture p{
  color:white;
  padding-left:30px;
  padding-right:30px;
  margin-top:-20px;
  text-align:left;
  line-height:150%;
}

.carte-verte h1{
  color:black;
  font-weight:400;
  text-align: left;
  padding-left:30px;
  padding-top:20px;
}

.carte-verte p{
  color:black;
  padding-top:20px;
  padding-left:30px;
  padding-right:30px;
    padding-bottom:20px;
  text-align:left;
  line-height:140%;
  font-weight:400;
  font-size: 12px;
}

.carte-blanche{
  background:lightgrey;
}

.carte-blanche p{
  color:white;
  padding-top:20px;
  padding-left:30px;
  padding-right:30px;
  text-align:left;
  line-height:140%;
  font-weight:400;
  font-size: 12px;
}

.carte-blanche h1{
  color:white;
  font-weight:400;
  text-align: left;
  padding-left:30px;

}

.carte-noire{
  background:#d2cdfa;
}

.carte-noire h1{
  color:white;
  font-weight:400;
  text-align: left;
  padding-left:30px;
  padding-top:20px;
}

.carte-noire p{
  font-family: 'Perloff-Regular', sans-serif;
  font-size: 10px;
  color:black;
  font-weight:300;
  text-align:center;
}

.fonttext{
        opacity:1;
        font-family:'Perloff-Regular', sans-serif;
        font-weight:500;
        font-size:22px;
        z-index:1000;
        color : white;
        text-shadow:-1px 0 rgba(255,255,255,0.5), 0 1px rgba(255,255,255,0.5), 1px 0 rgba(255,255,255,0.5), 0 -1px rgba(255,255,255,0.5);
    }

}
