body{ background-image:url("../img/background.svg"); } main{ padding-top: 40px; display: flex; flex-direction: column; } header{ margin-bottom: 0; } #presentation{ position: relative; height: 100vh; } a{ outline: none; } #titre{ margin: 0; position: absolute; top: 75vh; left: 5vw; } #titre p{ color: white; margin: 0; position: absolute; top: 10vh; left: 5vw; } #img-txt div{ display: inline-flex; flex-direction: row; justify-content: space-around; align-items: center; padding-bottom: 20vh; } #img-txt p{ backdrop-filter: blur(10px); border-radius: 30px; padding: 1%; width: 40%; } .img_main{ backdrop-filter: blur(10px); height: 18rem; width: 30rem; border-radius: 15px; transition: transform ease 0.4s; filter: saturate(0.2); } #img-txt div:hover .img_main{ box-shadow: 0 40px 60px rgba(150,0,0,0.4); transform: scale(1.2,1.2); transition: transform ease 0.8s; filter: saturate(1); } #img-txt div:not(:hover) p{ background-color: rgba(150,150,150,0.7); } #fond_2{ z-index: 10; backdrop-filter: blur(10px); text-align: center; display: flex; flex-direction: column; align-items: center; background-color: rgba(0, 0, 0, 0.5); color: white; padding-bottom:20%; } #fond_2 video{ margin: 1%; } @media only screen and (max-width: 800px){ h2{ margin-bottom: 10vh; } #presentation{ height: 50vh; } .img_main{ width: 75vw; margin-bottom: 20vh; } #img-txt p { width: 100vw; margin-bottom: 10vh; } #img-txt div{ flex-direction: column; padding-bottom: 0; } #img_gauche_txt_droite{ flex-direction: column; } #fond_2 video{ width: 95vw; } }