/* écran d'ordinateurs*/

  
      @media screen and (min-width:1280px){
@font-face {
   font-family: 'Permanent Marker';
    src: url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
   font-family: 'Inconsolata'; 
   src: url('https : //fonts.googleapis.com/css2?family= Inconsolata');
 } 
 body
{ 
 letter-spacing: 1px;
 font-family: 'Special Elite', cursive;
margin: 0;
padding: 0;
 width: auto; height: auto;
 background:ANTIQUEWHITE;
 }
 
 figcaption{
  color: antiquewhite;
  font-family: 'Inconsolata', espace fixe ;
  font-size:medium;
 }
 
h1{
 font-family:'Permanent Marker', cursive ;
  text-align: center;
  color:#210202;
  margin: auto;
  width: auto;height: auto;
  padding: 40px 100px 0px 200px ;
  font-size:50px;
}
#logo{
 background: ANTIQUEWHITE;
 display:flex;
 flex-direction:row;
 justify-content:space-between;
}

#element2 a img{
 width: auto;
 height: 150px;
 padding: 15px 25px 0px 5px;
 }


#conteneur1{
 background-color:#210202;
 height:auto;
 width: auto;
 text-align: center;
 margin: auto;
 display: flex;
 justify-content:center;
 flex-wrap: wrap;
 padding: 10px;
}
.zoom img{
width:auto;
height:300px;
margin: 10px;
 }
.zoom:hover img{
 width:auto;
 height:450px;
 }
 
pre{
 background-color: #210202;
 color: ANTIQUEWHITE;
  font-family: 'Inconsolata', espace fixe ;
 font-size: x-large;
}
pre a{
 cursor: pointer;
 text-decoration: none;
 color: ANTIQUEWHITE;
}
pre a:hover{
 cursor: pointer;
 text-decoration: none;
 color: #e94b02;
}

.logomissachtar img{
 width: auto;
 height:110px;
 padding: 15px ;
}
 .logomissachtar{
 background-color:ANTIQUEWHITE;;
 display:flex;
 justify-content: center;
 }

#footer
{
  width: auto;
  height: auto;
  margin: auto;
  font-size: larger;
  background-color:antiquewhite;
  color: orange;
  text-align: center;

}
i{
 color:#e64105;
 margin: 10px;
 }
 
 i:hover{
  color:#4B0082;
 }
 
#new{
  color: #210202;
  background:#fcf2e6;
  font-size: 30px;
  width: auto;
  height: auto;
  padding: 50px;
  text-align: center;
}

}


/* .........................................................................................................................*/
 /* écran de tablettes */
 

@media screen and (min-width:580px) and (max-width: 1279px)
{ @font-face {
   font-family: 'Permanent Marker';
    src: url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
   font-family: 'Inconsolata'; 
   src: url('https : //fonts.googleapis.com/css2?family= Inconsolata');
 } 
 body
{ 
 letter-spacing: 1px;
 font-family: 'Special Elite', cursive;
margin: 0;
padding: 0;
 width: auto; height: auto;
 background:ANTIQUEWHITE;
 }
 
  figcaption{
  color: antiquewhite;
  font-family: 'Inconsolata', espace fixe ;
  font-size:medium;
 }
h1{
  font-family:'Permanent Marker', cursive ;
  text-align: center;
  color:#210202;
  text-align: center;
  margin: auto;
  width: auto;height: auto;
  padding: 10px 25px 2.5px 50px ;
  font-size:30px;
}
#logo{
 background: antiquewhite;
 display:flex;
 flex-direction:row;
 justify-content:space-between;
}

#element2 a img{
 width: auto;
 height: 80px;
 padding: 5px 5px 2.5px 5px;
 }

#conteneur1{
 background-color:#210202;
 height:auto;
 width: auto;
 text-align: center;
 margin: auto;
 display: flex;
 justify-content:center;
 flex-wrap: wrap;
 padding: 10px;
}
.zoom img{
width:auto;
height:150px;
margin: 2.5px;
 }
.zoom:hover img{
 width:auto;
 height:250px;
 }
 
pre{
  background-color: #210202;
 color: ANTIQUEWHITE;
  font-family: 'Inconsolata', espace fixe ;
 font-size: medium;
}
pre a{
 cursor: pointer;
 text-decoration: none;
 color: ANTIQUEWHITE;
}
pre a:hover{
 cursor: pointer;
 text-decoration: none;

}

.logomissachtar img{
 width: auto;
 height:80px;
 padding: 15px ;
}
 .logomissachtar{
 background-color:ANTIQUEWHITE;;
 display:flex;
 justify-content: center;
 }

#footer
{
  width: auto;
  height: auto;
  margin: auto;
  font-size: medium;
  background-color:antiquewhite;
  text-align: center;

}
i{
 color:#e64105;
 margin: 10px;
 }
 
 i:hover{
  color:#4B0082;
 }
#new{
  color: #210202;
  background:#fcf2e6;
  font-size: 20px;
  width: auto;
  height: auto;
  padding: 25px;
  text-align: center;
}
 }
 /* .........................................................................................................................*/

 /* écran de portables */
 
 
@media screen and (min-width:320px) and (max-width: 579px)

{ @font-face {
   font-family: 'Permanent Marker';
    src: url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
   font-family: 'Inconsolata'; 
   src: url('https : //fonts.googleapis.com/css2?family= Inconsolata');
 }
 body
{ 
 letter-spacing: 1px;
 font-family: 'Special Elite', cursive;
margin: 0;
padding: 0;
 width: auto; height: auto;
 background:ANTIQUEWHITE;
 }
 
  figcaption{
  color: antiquewhite;
  font-family: 'Inconsolata', espace fixe ;
  font-size:small;
 }
h1{
  font-family:'Permanent Marker', cursive ;
  text-align: center;
  color:#210202;
  text-align: center;
  margin: auto;
  width: auto;height: auto;
  padding: 10px 25px 2.5px 50px ;
  font-size:30px;
}
#logo{
 background: antiquewhite;
 display:flex;
 flex-direction:row;
 justify-content:space-between;
}

#element2 a img{
 width: auto;
 height: 65px;
 padding: 5px 5px 2.5px 5px;
 }

#conteneur1{
 background-color:#210202;
 height:auto;
 width: auto;
 text-align: center;
 margin: auto;
 display: flex;
 justify-content:center;
 flex-wrap: wrap;
 padding: 5px;
}
.zoom img{
width:auto;
height:150px;
margin: 2.5px;
 }
.zoom:hover img{
 width:auto;
 height:250px;
 }
 
pre{
  background-color: #210202;
  color: ANTIQUEWHITE;
 font-family: fantasy;
 font-size: 15px;
}
pre a{
 cursor: pointer;
 text-decoration: none;
  color: ANTIQUEWHITE;
}
pre a:hover{
 cursor: pointer;
 text-decoration: none;
 color: #e94b02;
}

.logomissachtar img{
 width: auto;
 height:50px;
 padding: 5px ;
}
 .logomissachtar{
 background-color:ANTIQUEWHITE;
 display:flex;
 justify-content: center;
 }

#footer
{
  width: auto;
  height: auto;
  margin: auto;
  font-size: small;
  background-color:antiquewhite;
  text-align: center;

}
i{
 color:#e64105;
 margin: 5px;
 }
 
 i:hover{
  color:#4B0082;
 }
#new{
  color: #210202;
  background:#fcf2e6;
  font-size: 15px;
  width: auto;
  height: auto;
  padding: 15px;
  text-align: center;
}
  }