cr autismswag69

*ELEMENT STYLING*

--- MAIN CONTAINER ---
box-shadow: inset -1px -1px #0a0a0a, inset 1px 0px #fff, inset -2px -2px grey, inset 2px 0px #dfdfdf;
box-shadow-top: none;

--- MAIN INFO CONTAINER ---
width: 19em;
height: 19em;

(mobile)
width: 12.7em;
height: 12.7em;

--- POSITIONING FOR MAIN INFO CONTAINER ---
position: absolute;
bottom: 0.6em;
left: 0.7em;

(mobile)
bottom: 0.4em;
left: 0.5em;

--- NAME TEXT ---
(add this in Text: Highlight)

color: white;
font-size: 3em;
background: -webkit-linear-gradient(red, black);
-webkit-background-clip: text;
-webkit-text-stroke: 2px transparent;
animation: blinkingText 1.7s infinite;
letter-spacing: 0.05em;

(mobile)
font-size: 2.5em;

--- OTHER INFO CONTAINER ---
box-shadow: inset -1px -1px #0a0a0a, inset 1px 0px #fff, inset -2px -2px grey, inset 2px 0px #dfdfdf;
width: 75%;
height: 170px;
z-index: 50;

(mobile)
height: 120px;
width: 85%;

--- POSITIONING FOR OTHER INFO CONTAINER ---
position: absolute;
bottom: 2.7em;
right: 4.2em;

(mobile)
right: 1.8em;
bottom: 1.5em;

--- SCROLLBOX TEXT ---
padding: 15px;
border: 1px solid black;
background: white;
margin-left: 13px;
width: 92%;
height: 10em;
overflow: auto;

(mobile)
margin-left: 8px;
width: 92%;

--- GIF ---
z-index: 60;
position: absolute;
bottom: -2em;
right: -3em;

(mobile)
right: -2em;


*MISCELLANEOUS*

--- TITLE 1 ---
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/98.css">
<div class="window" style="box-shadow:inset -1px -0px #0a0a0a,inset 1px 1px #fff,inset -2px -0px grey,inset 2px 2px #dfdfdf; margin: auto;" >
<div class="title-bar" style="background:linear-gradient(90deg, #fff 0%, #000 100%);">
<div class="title-bar-text">text text text text 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>

--- TITLE 2 ---
<style>
.window2 {
background: #C0C0C0;
box-shadow: inset -1px -0px #0a0a0a,inset 1px 1px #fff,inset -2px -0px grey,inset 2px 2px #dfdfdf;
padding:3px;
margin-top: -225px;
margin-left: 70px;
position: absolute;
z-index: 50;
width: 75%;
}

@media only screen and (max-width: 600px) {
.window2 {
margin-top: -160px;
margin-left: 26px;
width: 85%;
}
}

</style>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/98.css">
<div class="window2">
<div class="title-bar" style="background:linear-gradient(90deg, #fff 0%, #000 100%);">
<div class="title-bar-text">text text text text text</div>
<div class="title-bar-controls"><button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<a href="#">
<button aria-label="Close"></button></a></div></div></div>

--- ALL FONTS ---
<style>
@font-face {
font-family: doll;
src: url(https://dl.dropbox.com/s/qrpc4vyc15nw5wu/brutal-tooth.ttf);
}

@font-face {
font-family: dot;
src: url(https://dl.dropbox.com/s/yc748m5thfiveuh/DotGothic16-Regular.ttf);
}
</style>

--- BLINKING TEXT ---
<style>
@keyframes blinkingText {

0%{
color: black;
}

30%{
color: red;
}

50%{
color: black;
}

80%{
color: red;
}

100%{
color: black;
}
}
@media only screen and (max-width: 600px)
{
</style>

--- BUTTON ---

<button><a href="linkurl">Text</a></button>

--- LINK ---

<style>
body {
}
a {
color: #000;
text-decoration: none;
}
</style>