/* CSS Document */

/* ordinateur et tablettes couchées*/
@media only screen and (min-width: 768px) {
h1 {
  font-family:Copperplate; 
  font-size:50pt;
  color: #801818;
}

h2 {
  font-family:Copperplate; 
  font-size:23pt;
  color: #801818;
}

h3 { 
  font-style: italic;
  font-size: 14pt; 
  color:linen; 
  text-shadow: 1px 2px 2px black;
}

a { 
  font-size: 15pt; 
  color:linen;
}

#up {
 position: absolute; 
 width: 100%;
 top:0px;
 height: 400px;
 text-align: center;
}

#down {
 position: absolute; 
 top:400px;
 width: 100%;
 min-width: 400px;
 min-height: 250px;
}

  button{
    position: absolute;
  bottom : 10px;
    background-color: #801818;
    border-radius: 35px;
  }

  button:hover{
    bottom: 15px;
  }

  img {
    width:200px; 
    height: 230px;
    border-radius: 25px;
    margin: 5px;
    margin-bottom: 15px;
  }

  .container {
      display: flex;
      flex-direction: row;
      justify-content: center;
     
    }
  .box {
    height: 90%;
    min-width: 220px;
    margin: 10px;
  }
}

/* tablettes et grands télephones */
@media only screen and (min-width: 600px) and (max-width: 780px) {
h1 {
  font-family:Copperplate; 
  font-size:50pt;
  color: #801818;
}

h2 {
  font-family:Copperplate; 
  font-size:23pt;
  color: #801818;
}

h3 { 
  font-style: italic;
  font-size: 14pt; 
  color:linen; 
  text-shadow: 1px 2px 2px black;
}

a { 
  font-size: 15pt; 
  color:linen;
}

#up {
 position: absolute; 
 width: 100%;
 top:0px;
 height: 400px;
 text-align: center;
}

#down {
 position: absolute; 
 top:400px;
 width: 100%;
 min-width: 400px;
 min-height: 250px;
}

  button{
    position: absolute;
  bottom : 10px;
    background-color: #801818;
    border-radius: 35px;
  }

  button:hover{
    bottom: 15px;
  }

  img {
    width:200px; 
    height: 230px;
    border-radius: 25px;
    margin: 5px;
    margin-bottom: 15px;
  }

  .container {
      display: flex;
      flex-direction: row;
      justify-content: center;
     
    }
  .box {
    height: 90%;
    min-width: 220px;
    margin: 10px;
  }
}

/* petits télephones */
@media only screen and (max-width: 600px) {
h1 {
  font-family:Copperplate; 
  font-size:27pt;
  color: #801818;
}

h2 {
  font-family:Copperplate; 
  font-size:18pt;
  color: #801818;
}

h3 { 
  font-style: italic;
  font-size: 15pt; 
  color:linen; 
  text-shadow: 1px 2px 2px black;
}

a { 
  font-size: 10pt; 
  color:linen;
}

#up {
 position: absolute; 
 width: 100%;
 top:0px;
 height: 200px;
 text-align: center;
}

#down {
 position: absolute;
 top:230px;
 width: 100%;
 min-width: 400px;
 min-height: 300px;
}

  button{
    position: absolute;
    bottom : 10px;
    background-color: #801818;
    border-radius: 35px;
  }

  button:hover{
    bottom: 15px;
  }

  img {
    width:120px; 
    height: 140px;
    border-radius: 25px;
    margin: 5px;
    margin-bottom: 15px;
  }

  .container {
      display: flex;
      flex-direction: row;
      justify-content: center;
     
    }
  .box {
    height: 100%;
    width: 49%;
    min-width: 130px;
    margin: 10px;
  }
}