body { background: #000; } body, input { font-family: mono; line-height: 1.5em; } #screen { position: absolute; width: 400px; height: 300px; border: 1px solid #000; top: 50%; left: 50%; margin: -150px 0 0 -200px; background: #fff; } #screen .framed { background: #fff; border: 3px double #000; border-radius: 0.5em; margin: 0.2em; } #screen .text { position: absolute; bottom: 0; left: 0; right: 0; height: 4.2em; } #screen .text.read:after { content: "\2bc6"; position: absolute; bottom: 0.1em; right: 0.5em; } #screen .text p { margin: 0; padding: 0.5em; } ul.menu { list-style: none; padding: 0 0 0 1em; margin: 0; } ul.menu .selected:before { content: "\2bc8"; width: 0; margin-left: -0.8em; float: left; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } div.framed, input.framed { padding: 0.2em; } input.framed { font-size: 1em; } #screen.frameIntro * { position: absolute; } #screen.frameIntro p { width: 100%; text-align: center; margin: 0; transform: translateY(-50%); } #screen.frameIntro .title { font-size: 2em; top: 50%; } #screen.frameIntro .subtitle { top: 75%; } ul#startMenu { width: 7em; } ul#nameMenu { width: 6em; }