body{ background-image:url("../img/background.svg"); } main{ display: flex; flex-direction: column; } header{ margin-bottom: 0; } #presentation{ position: relative; height: 100vh; } #img_gauche_txt_droite{ display: flex; flex-direction: row-reverse; justify-content: space-around; align-items: center; padding-bottom: 20vh; } #img_gauche_txt_droite p{ background-color: rgba(250,250,250,0.2); backdrop-filter: blur(10px); border-radius: 30px; width: 40%; padding: 1%; } #img_droite_txt_gauche{ display: inline-flex; flex-direction: row; justify-content: space-around; align-items: center; padding-bottom: 20vh; } #img_droite_txt_gauche p{ background-color: rgba(250,250,250,0.2); backdrop-filter: blur(10px); border-radius: 30px; padding: 1%; width: 40%; } .img_main{ backdrop-filter: blur(10px); height: 20rem; width: 25rem; border-radius: 15px; transition: transform ease 0.4s; filter: saturate(0.2); } .img_txt:hover .img_main{ box-shadow: 0 40px 60px rgba(150,0,0,0.7); transform: scale(1.2,1.2); transition: transform ease 0.8s; filter: saturate(1); } #img_gauche_txt_droite:not(:hover) p{ background-color: rgba(150,150,150,0.4); } #img_droite_txt_gauche:not(:hover) p{ background-color: rgba(150,150,150,0.4); } #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){ body{ width: 100vw; } #img_droite_txt_gauche{ width: 100vw; } #menu-ordi{ display: none; } #menu-mobile{ position: fixed; display: block; } }