html { font-family: "Sriracha", cursive; font-weight: 400; font-style: normal; } body { margin: 0; } .banner { display: flex; } .banner h1 { font-size: 7.3em; margin: auto; text-align: center; } .banner img { width: 100%; height: auto; align-content:center; position: inherit; } .b1 { background: green; height: 30vh; color: white; z-index: -1; } .section { display: flex; } .b2 { display: flex; height: 50vh; overflow: hidden; } .b2 div { margin: auto; } .b2L { background: mediumpurple; flex: 2; color: white; background-image: url("files/bunch_of_hoofy_nails.png"); background-position: center; background-position-x: center; background-position-y: -2rem; background-size: 80% auto; background-repeat: no-repeat; z-index: -1; position: relative; text-align: center; } .b2L h1 { font-size: 4em; } .b2R { flex: 1; overflow: visible; } .b2R h2 { text-align: center; } .sell-button { background: green; color: white; display: flex; margin: 0.5em; padding: 0.4em; text-decoration: none; font-size: 23px; } .sell-button:hover { background: darkgreen; } .sell-button > * { margin: auto; } .overlay { position: absolute; left: -160px; top: 0; z-index: -1; overflow: hidden; height: inherit; } .overlay img { height: 600px; overflow: hidden; } .overlay2 { position: absolute; left: 68.75%; top: 0; z-index: -1; overflow: hidden; height: inherit; width: 400px; } .overlay2 img { height: 600px; overflow: hidden; } @media only screen and (max-width: 1800px) { .banner h1 { font-size: 4em; margin: auto; text-align: center; } } @media only screen and (max-width: 600px) { .banner h1 { font-size: 2em; margin: auto; text-align: center; } }