body { font-family: 'Courier New', Courier, monospace; background-color: #181a1b; } #header { border-radius: 10px; text-align: center; background-color: dimgray; color: #eee; width: 100%; padding-top: 25px; padding-bottom: 25px; } #content { min-width: 400px; max-width: 900px; width: 50%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ab { float:none; background-color: lightslategrey; border-radius: 10px; margin-top: 10px; justify-content: center; align-items: center; display: flex; padding: 5px; } .a { float:left; width: 45%; box-sizing: border-box; background-color:gold; padding: 25px; border-radius: 10px; } .b { float:left; width: 45%; box-sizing: border-box; background-color: black; color: white; padding: 25px; border-radius: 10px; } .separator { float:left; width: 10%; box-sizing: border-box; writing-mode: vertical-lr; transform:rotate(210deg); font-size: xx-small; display: flex; justify-content: center; align-items: center; } @media only screen and (max-width:480px) { #content { min-width: 95%; transform: none; position: absolute; top: 5px; left: 50%; transform: translate(-50%); } .a { font-size: small; } .b { font-size: small; } }