p {
    font-family:Arial, sans-serif;
    font-size: 2em;
    text-align: center;
    margin: 50px;
    background-color: #f7dbeb;
    padding: 50px;
}

h1 {
        font-family: 'Lobster' , sans-serif;
        font-size: 5em;
        text-align: center;
        color: white;
        text-shadow: 6px 6px 0px #d1448a;
        padding: 150px;
        background-image: url("images/mode.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
          
}
  
h2 {
    font-family : "Yeseva One", serif ;
    font-size: 2.5em;
    padding: 40px;
}

h3 {
    font-family : "Yeseva One", serif ;
    font-size: 2.5em;
    padding: 40px;
}

h4 {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.5em;
  color: #fc0384;
}

h5 {
  font-family : "Yeseva One", serif ;
  font-size: 2.5em;
  padding: 40px;
}

div {
  padding: 40px;
}

.introduction {
    text-decoration: underline;
}

img:hover {
opacity: 0.5;
}

img {
  width : 450px;
  height : 450px;
  }

.box {
    background-color: #f7dbeb;
    border-radius: 10px;
    border: 3px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .conteneur {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px 100px 100px;
    grid-gap: 10px;
  }
  
  .une {
      grid-column: 1 / 4;
      grid-row: 1 / 2;
  }
  
  .deux {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }
  
  .cinq {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
  }
  
  .six {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }
  
  .huit {
    grid-column: 1 / 4;
  }

  @media screen and (max-width: 1200px) {
    p {
        color: rgb(119, 0, 40);
    }
    }

    @media screen and (max-width: 960px) {
        .conteneur {
            flex-direction: column;
        }

        img {
            display: none;
        }

        p{
            overflow: scroll;
        }
        }

body {
    background-color: rgb(248, 111, 77);
}