@media screen { body main { display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to right, rgba(0,0,250,0.2), rgba(0,0,230,0.2) ), url(../resources/purpleabs2.jpg); background-size: cover; } body main p { width: 75%; padding: 1rem; border: 0.3rem solid #070707; background-image: linear-gradient(to right, rgba(132,49,245,0.1), rgba(132,49,245,0.1) ), url(../resources/purpleabs2.jpg); text-align: left; font-weight: bold; color: #FFFFFF; } } @media screen and (min-width: 300px) and (orientation: portrait) { } @media screen and (min-width: 600px) and (orientation: landscape) { } @media screen and (min-width: 1200px) { body main p { width: 30%; } }