my-header{position:relative;display:block;width:100%;height:300px;background-image:url(../../images/hero.jpg);background-size:cover;background-position:center}my-header h1{font-size:4em;text-align:center;color:#fff;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);text-shadow:1px 1px 1px black,1px -1px 1px black}my-header img{width:100%;height:300px;object-fit:cover}@media screen and (max-width: 470px){my-header h1{font-size:3em}}my-footer{display:block;width:100%}my-footer footer{width:100%;border:1px solid blue;display:flex;justify-content:center;background-color:#0a0a90a0}my-footer footer nav{width:100%}my-footer footer nav ol{width:100%;justify-items:center;list-style-type:none;justify-content:space-around;padding-left:0}my-footer footer nav ol li{text-align:center;margin:10px}my-footer footer nav ol a{color:#fff;font-style:italic;font-weight:700;text-shadow:1px 1px 1px black}html{height:100%}body{height:100vh;position:relative;color:#f5f5f5;background-color:#383636}main{padding:2%;display:flex;min-height:40vh;flex-direction:row;text-align:center;justify-content:space-around}main section{width:10%}main article{width:70%}#search-bar button{display:block;margin:1% auto}#mail{color:maroon;font-weight:bolder;padding:2%}button{margin:1%;color:#1508a8;width:50%;border:1px solid rgb(21,8,168);font-weight:bolder}button:active{color:#fff;background-color:#000;border:1px solid white}button:hover{cursor:pointer}select{font-weight:bolder;color:maroon}#list-ad{color:maroon;text-align:center}#advertise{color:maroon;border:2px solid maroon;padding:1%;margin:1%}.article{display:flex;flex-direction:row}.article .texte{display:flex;flex-direction:column;justify-content:center;width:50%}.article figure{display:flex;align-items:center;width:50%}.article figure img{width:100%}@media screen and (max-width: 855px){main article{width:90%}section.pub{display:none}}@media screen and (max-width: 750px){main{flex-direction:column}button{font-size:1.1em}}@media screen and (max-width: 600px){main{align-items:center}main .article{flex-direction:column;align-items:center}main .article .texte{align-items:center;width:90%}main .article figure{width:80%}main .article figure img{width:100%}}