body {
  font-family: Arial, Helvetica, sans-serif;  
  font-size: 12pt;  
  background-color: white;  
  color: black;  
  margin: 0px;
  padding: 0px;  
}
#intro {
  display: inline-block;
  position: relative;
  top: 2px;
  right: 20px;
  width: calc(100% - 400px);
  float: right;
  padding: 1em;
}
#intro h1 {
  font-size: 24pt;
  text-align: center;
}
 #intro ul {
  list-style-type: square;
  font-size: 14pt;  
 }
 #intro li {
  margin-top: 10px;
  text-align: justify;
}
#intro h2 {
  margin-top: 50px;
  margin-bottom: 0px;
  font-size: 16pt;
 }
#intro p {
  margin-top: 10px;
  margin-left: 20px;
  text-align: justify;
  font-size: 12pt;
 }
#intro p.fort {
  font-size: 14pt;
}

#livres {
  display: inline-block;
  position: relative;
  top: 2px;
  left: 2px;
  width: 362px;
  height: 500px;
}

#ours {
  position: absolute;
  top: 512px;
  left: 3px;
  width: 350px;
  padding: 5px;
  border: 1px solid black;
  border-radius: 8px;
  box-shadow: 5px 5px 5px #000000;
}
#ours h2 {
  font-size: 12pt;
  margin-bottom: 0px;
}
#ours p {
  margin-top: 4px;
  margin-left: 4px;
}

@media screen and (max-width: 700px) {
  #intro {
    float: none;
    width: 100%;
  }
  #livres {
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  #ours {
    position: relative;
    top: 1em;
    width: 100%;
  }
}