body { font-family: 'Courier New', Courier, monospace; background-color: rgb(19, 21, 22); } html, body { border-color: #736b5e; color: #e8e6e3; } #header { border-radius: 10px; text-align: center; width: 100%; padding-top: 25px; padding-bottom: 25px; background-color: rgb(79, 86, 89); color: #eeeeee; font-weight: bold; } #content { min-width: 400px; max-width: 900px; width: 50%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ab { float:none; border-radius: 10px; margin-top: 10px; justify-content: center; align-items: center; display: flex; padding: 5px; background-color: rgb(83, 97, 111); } .a { float:left; width: 45%; box-sizing: border-box; padding: 25px; border-radius: 10px; border: 1px solid transparent; background-color: gold; color: black; font-weight: bold; text-align:left; font-family: 'Courier New', Courier, monospace; cursor: pointer; } .b { float:left; width: 45%; box-sizing: border-box; padding: 25px; border-radius: 10px; border: 1px solid transparent; background-color: black; color: gold; font-weight: bold; text-align:left; font-family: 'Courier New', Courier, monospace; cursor: pointer; } input[type="radio"] { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; cursor: pointer; } .ab input:checked + label { background-color: cornsilk; border: 1px solid #000000; color: #333333; } .separator { float:left; width: 10%; box-sizing: border-box; writing-mode: vertical-lr; transform:rotate(210deg); font-size: x-small; display: flex; justify-content: center; align-items: center; } #footer { margin-top: 10px; } #questions { font-size: small; text-align: center; width: 45%; float: left; border-radius: 10px; padding-top: 25px; padding-bottom: 25px; color: #eeeeee; font-weight: bold; } #next { text-align: center; width: 45%; float: left; border: 0px; border-radius: 10px; padding-top: 25px; padding-bottom: 25px; background-color: rgb(79, 86, 89); color: #eeeeee; font-weight: bold; font-family: 'Courier New', Courier, monospace; display: block; cursor: pointer; } @media only screen and (max-width:480px) { #content { min-width: 95%; transform: none; position: absolute; top: 5px; left: 50%; transform: translate(-50%); } #next { min-width: 100%; } #questions { min-width: 100%; padding-top: 0px; padding-bottom: 5px; } .a { font-size: small; } .b { font-size: small; } }