cr superjake45 & angeidiarys

-- TITLE BANNER --
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="window" style="box-shadow:inset -1px -0px #0a0a0a,inset 1px 1px #fff,inset -2px -0px #E8E8E8,inset 2px 2px #E8E8E8;">
<div class="title-bar" style="background:linear-gradient(90deg, #a9c2d4 0%, #577481 100%);">
<div class="title-bar-text" style="color: #000000;">
username
</div>
<div class="title-bar-controls">
<button aria-label="Minimize">
</button><button aria-label="Maximize">
</button><button aria-label="Close">
</button></div></div></div>

-- MAIN CONTAINER --
height: 18em;
box-shadow: inset -1px -0px #0a0a0a, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;

mobile:
height: 17em;

-- LEFT CONTAINER --
border-radius: 10px;
border: 3px inset;
width: 47%;
height: 17em;
position: absolute;
bottom: 0.5em;
left: 6px;

mobile:
height: 15.5em;
bottom: 0.8em;

-- RIGHT CONTAINER--
overflow: auto;
position: absolute;
bottom: 0.5em;
right: 9px;

-- IMAGE --
border: 3px inset;
border-radius: 8px;

-- CLICK FOR MORE INFO --
border: 3px inset;
background: #b4cdd6;
border-radius: 8px;
padding: 1px;
font-family: Pixelated MS Sans Serif;

-- TITLE TEXT --
font-family: Pixelated MS Sans Serif;
background: -webkit-linear-gradient(-90deg, #a9c2d4 30%, #b4cdd6 70%, #FFFFFF 95%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.3em;

mobile:
font-size: 1em;

-- TITLE TEXT ICON --
font-family: 'icons';
font-size: 0.7em;
background: none;
background: -webkit-linear-gradient(-90deg, #a9c2d4 30%, #b4cdd6 70%, #FFFFFF 95%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

-- INFO --
font-family: Pixelated MS Sans Serif;
font-size: 11.4px;

mobile:
font-size: 11.4px;

-- FOR LINKS --
text-decoration-style: dotted;
color: blue;

-- BUTTONS / MP3 CONTAINER --
box-shadow: inset -1px -0px #0a0a0a, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;

-- BUTTONS --
box-shadow: inset -1px -0px #0a0a0a, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
font-family: Pixelated MS Sans Serif;

-- BOTTOM BANNER --
<link
rel="stylesheet"
href="https://unpkg.com/98.css">
<div class="window" style="box-shadow: inset -1px -0px #0a0a0a,inset 1px 1px #fff,inset -2px -0px grey,inset 2px 2px #dfdfdf;"><div class="title-bar" style="background:linear-gradient(90deg, #a9c2d4 0%, #577481 100%);"><div class="title-bar-text"></div></div><div class="status-bar"><p class="status-bar-field">Press F1 for help</p><p class="status-bar-field">Slide 1</p><p class="status-bar-field">CPU Usage: 14%</p></div></div></div>

-- FONTS --

@font-face {
font-family: emoji font;
src: url(https://dl.dropbox.com/s/cvba4kh6qm23mru/EmojiFont.ttf);
}

@font-face {
font-family: 'icons';
src: url(https://dl.dropbox.com/s/2tohzt1ogc3bueo/IconBitTwo.ttf);
}

@font-face {
font-family: Pixelated MS Sans Serif;
src:url(ms_sans_serif.woff) format("woff");
src:url(ms_sans_serif.woff2) format("woff2");
}