@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");

*{
box-sizing: border-box;
font-family: "Roboto";
font-weight: 300;
}

:root {
--couleur_texte: #414755;
}

fieldset{
max-width: 100%;
}

html{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.page{
border: none;
margin: 0;
padding: 20px;
width: 100%;
color: var(--couleur_texte);
background: #000;
text-align: center;
margin-left: auto;
margin-right: auto;
}

.page h1{
margin-bottom: 5%;
color: #DADADA;
}

.page h2{
margin-bottom: 5%;
color: #DADADA;
}

.conteneur{
border: none;
margin: 0;
padding: 100px;
height: 100%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 50px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

.conteneur h1{
text-align: center;
animation: pulse 1.5s;
}

.conteneur h2{
text-align: center;
font-size: 40px;
animation: pulse 1.5s;
}

.description{
border: none;
border-radius: 20px;
margin: 0;
padding: 20px;
font-size: 25px;
color: #DADADA;
background-color: rgba(92, 3, 128, 0.1);
width: 80%;
margin-top: 5%;
margin-right: auto;
margin-left: auto;
}

.conteneur_1{
border: none;
margin: 0;
padding: 0;
color: #DADADA;
background: url("img/texture_2.avif") no-repeat;
background-size: 100%, 30%, 25%;
-webkit-box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -1px 21px 18px #000000; 
box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -1px 21px 18px #000000;
filter: brightness(1.9);
margin-top: 5%;
cursor: pointer;
}

.conteneur_1 .texte{
margin: 0;
padding: 100px;
width: 45%;
font-size: 30px;
float: left;
animation: bounceIn 2s;
filter: brightness(0.4);
}

.conteneur_1 .img{
margin: 0;
padding: 0;
width: 45%;
float: left;
filter: brightness(0.4);
}

.conteneur_1 .img img{
border-radius: 10px;
width: 60%;/*
-webkit-box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -1px 21px 18px #000000; 
box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -1px 21px 18px #000000;*/
}

.page .conteneur_bouton {
border: none;
margin: 0;
padding: 10px;
width: 300px;
margin-right: auto;
margin-left: auto;
}

.page .conteneur_bouton a{
border: none;
border-radius: 10px;
margin: 0;
padding: 20px;
display: block;
color: #E6D0EE;
background-color: #4C0569;
font-size: 25px;
text-decoration: none;
margin-right: auto;
margin-left: auto;
}

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

.conteneur{
border: none;
margin: 0;
padding: 100px;
height: 90%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 50px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

}

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

.conteneur{
border: none;
margin: 0;
padding: 100px;
height: 80%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 50px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

}

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

.conteneur{
border: none;
margin: 0;
padding: 100px;
height: 70%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 50px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

}

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

.conteneur{
border: none;
margin: 0;
padding: 100px;
height: 60%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 50px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

}


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

.conteneur{
border: hidden;
margin: 0;
padding: 55px;
height: 55%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 50px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

}

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

.conteneur{
border: hidden;
margin: 0;
padding: 55px;
height: 50%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 50px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

.conteneur h1{
text-align: center;
animation: pulse 1.5s;
font-size: 60px;
}

.conteneur h2{
text-align: center;
animation: pulse 1.5s;
font-size: 30px;
}

}

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

.conteneur{
border: hidden;
margin: 0;
padding: 55px;
height: 45%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 50px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

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

.conteneur{
border: hidden;
margin: 0;
padding: 55px;
height: 40%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 50px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

.conteneur h1{
text-align: center;
animation: pulse 1.5s;
font-size: 60px;
}

.conteneur h2{
text-align: center;
animation: pulse 1.5s;
font-size: 30px;
}

.conteneur_1 .texte{
border: none;
margin: 0;
padding: 40px;
width: 45%;
font-size: 30px;
float: left;
animation: bounceIn 2s;
}

.conteneur_1 .img{
border: none;
margin: 0;
padding: 0;
width: 55%;
float: left;
-webkit-box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -1px 21px 18px #000000; 
box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -1px 21px 18px #000000;
}

}

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

.conteneur{
border: hidden;
margin: 0;
padding: 30px;
height: 35%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 50px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

.conteneur h1{
text-align: center;
animation: pulse 1.5s;
font-size: 60px;
}

.conteneur h2{
text-align: center;
animation: pulse 1.5s;
font-size: 40px;
}

.conteneur_1 .texte{
border: none;
margin: 0;
padding: 40px;
width: 35%;
font-size: 20px;
float: left;
animation: bounceIn 2s;
}

.conteneur_1 .img{
border: none;
margin: 0;
padding: 0;
width: 55%;
float: left;
-webkit-box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -1px 21px 18px #000000; 
box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -1px 21px 18px #000000;
}

}

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

.conteneur{
border: none;
margin: 0;
padding: 30px;
height: 30%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 30px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

}

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

.conteneur{
border: none;
margin: 0;
padding: 10px;
padding-top: none;
height: 25%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 20px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

.conteneur h1{
text-align: center;
animation: pulse 1.5s;
font-size: 40px;
}

.conteneur h2{
text-align: center;
animation: pulse 1.5s;
font-size: 20px;
}

}

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

.conteneur{
border: none;
margin: 0;
padding: 20px;
padding-top: none;
height: 25%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 20px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

.conteneur_1 .texte{
border: none;
margin: 0;
padding: 0;
width: 40%;
font-size: 18px;
float: left;
animation: bounceIn 2s;
}

.conteneur_1 .img{
border: none;
margin: 0;
padding: 10px;
width: 60%;
-webkit-box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -1px 21px 18px #000000; 
box-shadow: inset 4px 4px 15px 0px #000000, inset -2px -1px 21px 18px #000000;
margin-top: 30px;
}

}

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

.conteneur{
border: none;
margin: 0;
padding: 30px;
padding-top: none;
height: 20%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 16px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

.conteneur h1{
text-align: center;
animation: pulse 1.5s;
font-size: 40px;
}

.conteneur h2{
text-align: center;
font-size: 20px;
animation: pulse 1.5s;
}

}

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

.conteneur{
border: none;
margin: 0;
padding: 20px;
padding-top: none;
height: 15%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 16px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

.conteneur h1{
text-align: center;
animation: pulse 1.5s;
font-size: 30px;
}

.conteneur h2{
text-align: center;
font-size: 20px;
animation: pulse 1.5s;
}

}

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

.conteneur{
border: none;
margin: 0;
padding: 30px;
padding-top: none;
height: 15%;
width: 100%;
color: #FFF7E9;
background: url("img/la_magie_noire.jpg") no-repeat;
background-size: 100%, 30%, 25%;
font-size: 16px;
-webkit-box-shadow: inset -2px 7px 50px 50px #000000; 
box-shadow: inset -2px 7px 50px 50px #000000;
cursor: pointer;
}

.conteneur h1{
text-align: center;
animation: pulse 1.5s;
font-size: 20px;
}

.conteneur h2{
text-align: center;
font-size: 20px;
animation: pulse 1.5s;
}

}