body{
margin:0;
font-family:"Courier New",monospace;
}

body.typewriter{
background:#f4ecd8 url("https://oldmixtape.com/wp-content/uploads/2023/04/ocback1.gif")
no-repeat center center;
background-size:contain;
}

body.dos{
background:#0000aa;
color:white;
}

#topbar{
position:fixed;
top:0;
width:100%;
background:#222;
color:white;
padding:8px;
text-align:center;
z-index:10;
}

#topbar button{
margin:3px;
padding:6px 10px;
}

#typewriter-ui{
margin-top:60px;
display:flex;
flex-direction:column;
align-items:center;
}

#ribbon{
width:90%;
max-width:1400px;
height:25px;
background:linear-gradient(to right,#900,#222);
border-radius:4px;
}

#roller{
width:90%;
max-width:1400px;
height:40px;
background:radial-gradient(circle,#666,#333);
margin-bottom:10px;
border-radius:10px;
}

#paper-holder{
width:90%;
max-width:1400px;
height:75vh;
overflow:hidden;
border-left:12px solid #2c2c2c;
border-right:12px solid #2c2c2c;
box-shadow:inset 0 0 30px rgba(0,0,0,0.25);
background:#f6f1e4;
}

#paper{
padding:60px;
line-height:1.7;
outline:none;
white-space:pre-wrap;
min-height:200%;
font-size:14pt;
}

.size12 #paper{font-size:12pt;}
.size14 #paper{font-size:14pt;}
.size16 #paper{font-size:16pt;}

#dos-ui{
display:none;
margin-top:60px;
height:80vh;
background:#0000aa;
color:white;
font-family:monospace;
}

#dos-menu{
background:#aaa;
color:black;
padding:6px;
font-size:20px;
}

#dos-editor{
height:calc(100% - 50px);
padding:15px;
outline:none;
white-space:pre-wrap;
overflow:auto;
font-size:20px;
}

#dos-status{
background:#aaa;
color:black;
padding:6px;
}

#controls{
text-align:center;
margin:20px;
}

#controls button{
margin:6px;
padding:10px 14px;
}