@font-face {
    font-family: 'bluu';
    src: url('cyberwitches-manifesto/bluunext-bolditalic-webfont.woff2') format('woff2'),
         url('cyberwitches-manifesto/bluunext-bolditalic-webfont.woff') format('woff'),
         url('cyberwitches-manifesto/bluunext-bolditalic.ttf') format('truetype'),
         url('cyberwitches-manifesto/bluunext-bolditalic-webfont.svg#bluu_nextbold_italic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'bluu';
    src: url('cyberwitches-manifesto/bluunext-bold-webfont.woff2') format('woff2'),
         url('cyberwitches-manifesto/bluunext-bold-webfont.woff') format('woff'),
         url('cyberwitches-manifesto/bluunext-bold.ttf') format('truetype'),
         url('cyberwitches-manifesto/bluunext-bold-webfont.svg#bluu_nextbold') format('svg');
    font-weight: normal;
    font-style: normal;
}


.style1 {font-family: 'Baskervville', cursive; color:#FFF ; margin-top: 0.5em;}
.style2 {font-family: 'Baskervville', cursive; color:#FFF ; } 
.style3 {font-family: 'Baskervville', cursive; color:#CCC ; }
.style4 {font-family: 'Baskervville', cursive; color:#FFF ; }
.style5 {font-family: 'bluu', cursive; color:#FFF ; }
.style6 {font-family: 'bluu', cursive; color:#FFF ; margin-bottom: 0.5em;} 
 

.bigpic{width:100%;}
.smallpic{width:49%;}
.droite{float: right;}

details { 
    font-family: 'bluu', cursive; 
    color:#FFF ; 
    font-size:20px; 
}

button {
  background-color: transparent;
  color: white;
  border: 0px solid ;
  font-family: 'bluu';
  font-size: small;
  padding: 0px;
  padding-right: 2px;
  margin-left: 0px;
  margin-top: 0px;
}




@media screen and (min-width: 800px) and (orientation: landscape) {
.contenantdutableau{ 
    width: 80%;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;   
}
.petitscredits{width:70%;}
.style1 {font-size:30px; }
.style2 {font-size:24px; } 
.style3 {}
.style4 {font-size:14px; }
.style5 {font-size:14px; }
.style6 {font-size:60px; }
.mobileonly{display: none;}
.notonmobile{display: ;}
}
}

@media screen and (min-width: 500px) and (max-width: 800px) and (orientation: landscape) {
.contenantdutableau{width: 100%;}
.style1 {font-size:30px; }
.style2 {font-size:24px; margin-right: 5%; margin-left: 5%;} 
.style3 {}
.style4 {font-size:14px; }
.style5 {font-size:14px; }
.style6 {font-size:60px; }
.petitscredits{width:70%;}
.mobileonly{display: none;}
.notonmobile{display: ;}
}

@media screen and (min-width: 100px) and (max-width: 500px) and (orientation: landscape) {
.contenantdutableau{width: 100%;}
.style1 {font-size:35px; }
.style2 {font-size:30px; margin-right: 5%; margin-left: 5%;} 
.style3 {font-size:18px; }
.style4 {font-size:18px; }
.style5 {font-size:18px; }
.style6 {font-size:60px; }
.petitscredits{width:70%;}
.mobileonly{display: ;}
.notonmobile{display: none;}
}

@media screen and (min-width: 100px) and (max-width: 550px) and (orientation: portrait) {
.contenantdutableau{
    width: 98%;     
    margin-left: auto;    
    margin-right: auto;  
}
.style1 {font-size:30px; }
.style2 {font-size:25px; } 
.style3 {font-size:16px; }
.style4 {font-size:16px; }
.style5 {font-size:16px; }
.style6 {font-size:50px; }
.petitscredits{width:100%;}
.mobileonly{display: ;}
.notonmobile{display: none;}
.style60 {font-size:12vw;  
          line-height: 12vw;
          margin-top: 20vw;
        }
}
@media screen and (min-width: 550px) and (orientation: portrait) {
.contenantdutableau{
    width: 96%;     
    margin-left: auto;    
    margin-right: auto;  
}
.style1 {font-size:33px; }
.style2 {font-size:28px; margin-right: 5%; margin-left: 5%;} 
.style3 {font-size:18px; }
.style4 {font-size:18px; }
.style5 {font-size:18px; }
.style6 {font-size:50px; }
.petitscredits{width:70%;}
.mobileonly{display: ;}
.notonmobile{display: none;}
}