body { background: #000; 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 { 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; } /* 1st frame */ #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%; } /* 2nd frame */ #screen.frameStartMenu ul { width: 7em; }