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

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

html,
body {
  padding: 0;
  margin: 0;
  background:#d5dbf3;
  overflow-y: hidden;
  width: 20000px;
}

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

u{
  border-bottom: 1px dotted #000;
   text-decoration: none;
}

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

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

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

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{
  font-family: 'Perloff-Regular', sans-serif;
  font-size: 11px;
  color:black;
  font-weight:300;
}

a{
  text-decoration: none;
  color:#cee06b;
}

a:hover{
  color:blue;
}

img{
  display:block;
  margin-left:auto;
  margin-right:auto;
  /* padding-top:20%;
  padding-bottom: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:38px;
  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: 11px;
}

.carte-blanche{
  background:white;
}

.carte-noire{
  background:#3e79da;
  /* border-radius:10px; */
}

.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: 11px;
  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:#e4c9f2;
  width: 600px;
}

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

u{
  border-bottom: 1px dotted #000;
   text-decoration: none;
}

li {
  /* border:black thin solid; */
    display:block;
  margin-right:auto;
    margin-left:auto;
  background: white;
  width: 90%;
  height: 1000px;
 margin-bottom : 50px;
   border-radius:4px;
}

h1{
  font-family: 'Perloff-Regular', sans-serif;
  font-size: 12px;
  color:black;
  padding-top:40px;
}

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

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: 11px;
  color:black;
  font-weight:300;
}

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

a:hover{
  color:blue;
}

img{
  padding-top:30px;
  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: 11px;
}

.carte-blanche{
  background:white;
}

.carte-noire{
  background:#E7FFA8;
}

.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: 11px;
  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);
    }

}