h1{ text-align: center; font-size: 3rem; } #intropage{ text-align: center; font-size: 1rem; padding-right: 10rem; padding-left: 10rem; } .imgbouton{ width: 350px; height: auto; border-radius: 5px; } #makeachoicehf{ display: flex; flex-direction: row; justify-content: center; margin: auto; width: auto; padding-top: 2rem; padding-bottom: 2rem ; gap: 1rem; } .tuile { border-radius: 10px; margin: 7px; height: auto; width: 350px; border: solid black 4px; background: rgb(189, 189, 189); transition : 0.3s ease-in-out; display:flex; flex-direction: column; justify-content:center; text-decoration: none; text-align: center; align-items: center; } .tuile:hover{ background-color: rgb(255, 255, 255); box-shadow: black ; transform:scale(1.05); } p{ color: black; } #comments_head{ text-align: center; } #whydmmtitle{ padding-right: 2rem; padding-left: 2rem; } #whydmm{ display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 1rem; margin-right: 1rem; margin-left: 1rem; margin-bottom: 1rem; background-color: rgba(255, 255, 255, 0.733); border-radius: 1rem; border: 2px solid black; } #textpresentation{ margin-right: 1rem; margin-left: 1rem; text-align: justify; } #comments{ display: flex; align-items: flex-start; justify-content: space-between; background-color: rgb(255, 197, 231); border-radius: 1rem; margin-right: 2rem; margin-left: 2rem; margin-bottom: 2rem; } img.avis{ width: 7rem; height: auto; border-radius: 1rem; } figure{ background-color: rgb(255, 162, 243); border-radius: 1rem; padding: 1rem; display: flex; flex-direction: column; align-items: center; } .caption{ font-size: .8rem; text-align: justify; } @media screen and (max-width:1000px){ #comments{ flex-direction: column; } figure{ flex-direction: row; } .caption{ padding: 1rem; font-size: .9rem; } }