cr superjake45 & angeidiarys

* PLEASE CREDIT SUPERJAKE45 & ANGEIDIARYS WHEN REMAKING *

--- TOP 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">
<div class="title-bar-text"> 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 ---
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;

(mobile)
height: 15.5em;

--- POSITIONING for LEFT CONTAINER ---
position: absolute;
bottom: 0.5em;
left: 6px;

(mobile)
bottom: 0.8em;

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

(mobile)
bottom: 0.8em;

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

--- TEXT BOX ---
border: 3px inset;
background: #FFDEF2;
border-radius: 8px;
padding: 1px;
font-family: Pixelated MS Sans Serif;

--- 'ABOUT ME' TEXTS ---
font-family: Pixelated MS Sans Serif;
background: -webkit-linear-gradient(-90deg, #F38BC8 30%, #F7A9D7 70%, #FFFFFF 95%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.3em;

(mobile)
font-size: 1em;

(Text: Highlight)
font-family: 'icons';
font-size: 0.7em;

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

(mobile)
font-size: 11.4px;

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

--- BOTTOM 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"><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>


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

#blinking {
font-family: Pixelated MS Sans Serif;
font-size: 1.75em;
font-weight: bold;
text-align: center;
animation: rainbow 1s infinite;
}

@keyframes rainbow {
0% {
color: #EB50A9;
}

25% {
color: #EF6EB8;
}

50% {
color: #F38BC8;
}

75% {
color: #F7A9D7;
}

100% {
color: #FBC6E7;
}
}

</style>
<div id="blinking">text</div>

--- ALL FONTS ---
<style>
@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");
}
</style>