#{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: century;
}


body {
  padding: 0;
  background-color: gray;
  font: .8em Verdana, Arial, Helvetica, sans-relief;
}

body, h1, h2, p{
margin: 0;
}

#conteneur {
  width: 1040px;
  margin:20px auto 0 auto;
  padding: 10px;
background-color: rgb(147, 173, 243);

}

/*L'en-tête */

#haut {
  margin: 0 0  10px 0;
  padding: 5px;
  background-color: rgb(227, 17, 17);
}

#haut h1, #haut h2 {
color: rgb(248, 108, 143);
}

/* Barre de navigation */



ul{
   list-style: none;
   float: center;
   display: flex;
   margin-top: 10px;
   background-color: #2468f0;
   padding: 30px;
}

ul li a{
    text-decoration: none;
    color: #120303 ;
    padding: 10px 20px ;
    text-transform: uppercase;
    border: 1px solid transparent;
    margin: 10px ;
    font-weight: 500;
    transition: 0.6s ease;
    border-radius: 50%;
}

 ul li a:hover{
    background: #fff;    
    color: #000;
}

p {
  width: 990px;
  padding: 20px;
  border: 5px solid #000;
  background-image: url(image.jpg);

}


article {
margin: 0 0 200px 0;
border-top: 1px dotted #333;
}

/* La colonne latérale */
#sidebar {
float: left;
width: 190px;
margin: 0 0 0 10px
padding: 5px;
background-color: #E8E8E8;
}

#sidebar p.centre {
text-align: center;
}

/* le pied de page */
#pied-de-page {
padding: 25px;
background-color: #e50994; clear: both;
text-align: center;
}

#pied-de-page p {
font-size: .75em;
}


@media screen and(max-width: 768px) {
bodyground-color: #eeee;

div#conteneur {
width: 100%;
margin: 5px
}

header#haut {
background-color: #000; color: #eeee;
}
asidebar#sidebar {
float: none;
width: auto;
margin: 0 0 10px 0;
}

asidebar#sidebar  img {
display: none;
}

article h1 {
  font-size: 1.5em;
}

article {
 width: 600px;
padding: 20px;
boder: 5px solid #000;
}

}