cr lobilles

* PLEASE CREDIT LOBILLES WHEN REMAKING *

--- TITLE ---
<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">
<div class="title-bar-text" style="font-size: 1.2em;">
text
</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 ---
#elementID > .wrapper {
box-shadow: inset -1px 0px #0A0A0A, inset 1px 0px #FFFFFF, inset -2px 0px grey, inset 2px 0px #DFDFDF;
height: 15em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
height: 13.5em;
}
}

--- MAIN SCROLLBOX ---
#elementID {
height: 11.1em;
background: white;
overflow: auto;
font-family: "Pixelated MS Sans Serif";
border: 4px inset;
border-radius: 0px 10px 10px 10px;
padding: 8px;
padding-top: 5px;
}

@media only screen and (max-width: 600px) {
#elementID {
height: 10em;
}
}

#elementID mark {
padding-left: 3px;
padding-right: 3px;
border: 1px solid black;
border-radius: 15px;
font-size: 1.5em;
font-family: 'VT323';
-webkit-text-stroke: 1px #373FB1;
}

--- CONTAINER with LINKS ---
#elementID > .wrapper {
width: 185px;
height: 165px;
border: 4px inset;
border-radius: 10px 0px 10px 10px;
position: absolute;
bottom: 0.8em;
right: 1em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
width: 170px;
height: 148px;
right: 0.7em;
}
}

--- BOTTOM CONTAINER ---
#elementID > .wrapper {
box-shadow: inset -1px 0px #0A0A0A, inset 1px 0px #FFFFFF, inset -2px 0px grey, inset 2px 0px #DFDFDF;
padding-bottom: 0.2em;
}

--- BUTTONS ---
#buttons01 li a {
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 0px #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 -1px #0A0A0A, inset 1px 0px #FFFFFF, inset -2px -2px grey, inset 2px 0px #DFDFDF;"><div class="title-bar"><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>

--- INFO CONTAINER ---
#elementID > .wrapper {
box-shadow: inset -1px 0px #0A0A0A, inset 1px 0px #FFFFFF, inset -2px 0px grey, inset 2px 0px #DFDFDF;
padding-bottom: 0.5em;
}

--- INFO SCROLLBOXES ---
#elementID, #elementID {
border: 4px inset;
border-radius: 10px;
background: white;
padding: 8px;
padding-top: 5px;
overflow: auto;
height: 5.5em;
font-family: "Pixelated MS Sans Serif";
}

#elementID mark, #elementID mark {
padding-left: 3px;
padding-right: 3px;
border: 1px solid black;
border-radius: 15px;
font-size: 1.5em;
font-family: 'VT323';
-webkit-text-stroke: 1px #373FB1;
}


--- ALL FONTS ---
<link href='https://fonts.googleapis.com/css?family=VT323' rel='stylesheet'>
<style>
@font-face {
font-family: "Pixelated MS Sans Serif";
src: url(https://unpkg.com/[email protected]/dist/ms_sans_serif.woff) format("woff");
src: url(https://unpkg.com/[email protected]/dist/ms_sans_serif.woff2) format("woff2");
}
</style>