cr tatsunroi 2

* PLEASE CREDIT TATSUNROI WHEN REMAKING *

--- MAIN CONTAINER ---
width: 18em;
height: 20em;
padding: 25px;
border-radius: 25px;
box-shadow: .35em .35em .5em #0000007A, rgba(65,63,83) 0px -3px 10px 0px inset;

--- NAVIGATION TEXT ---
width: 4.5em;
height: 1.3em;
padding: 5px 12px 2px 11px;
font-family: fotograami-hearts;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 1px 0px white, 0 0;
border: 1px solid white;
border-radius: 20px 2px 2px 20px;
background: linear-gradient(180deg, #6978b2 0%, #FFFFFF 100%);
box-shadow: .35em .35em .5em #0000007A, #413f53 0px 0px 8px 0px inset;
z-index: 9999;
animation: jerk 0.5s infinite;

(mobile)
width: 4.5em;

--- POSITIONING for NAVIGATION TEXT ---
position: absolute;
top: 8em;
left: 17em;

(mobile)
top: 7em;
left: 10.5em;

--- SCROLLBOX ---
width: 18.3em;
height: 27.5em;
padding: 1em;
padding-top: 1.5em;
font-family: neuemetana;
border-radius: 5px 40px;
border: 1px solid white;
background: linear-gradient(180deg, #6978b280 0%, #ffffffa6 100%);
-webkit-animation: scale-up-tl 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
animation: scale-up-tl 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
overflow: auto;

(mobile)
width: 17.5em;
height: 26em;
padding-top: 2em;

(Text: Highlight)
font-family: callicotez;
font-size: 30px;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 1px 0px white, 0 0;

--- POSITIONING for SCROLLBOX ---
position: absolute;
bottom: 7em;
left: 20em;

(mobile)
bottom: 7.8em;
left: 8.8em;

--- ALL FONTS ---
<style>
@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/kaxqli0m8m9zvdc/Windows%20Regular.ttf?dl=0);
}

@font-face {
src: url(https://dl.dropbox.com/s/dumo4446gnwnc6a/Callicotez.ttf);
font-family: callicotez;
}

@font-face {
src: url(https://dl.dropbox.com/s/ab2ghc5njl0wfwt/fotograami-hearts01.ttf);
font-family: fotograami-hearts;
}

@font-face {
src: url(https://dl.dropbox.com/s/nkb8599kf7u1hev/NeueMetana-Regular.otf);
font-family: neuemetana;
}

@font-face {
src: url(https://dl.dropbox.com/s/yznifg6uk7oqhz6/Moonstar.ttf);
font-family: moonstar;
}
</style>

--- ANIMATIONS ---
<style>
@keyframes jerk {
0% {
transform: rotate(2deg);
}

50% {
transform: rotate(2deg);
}

51% {
transform: rotate(-2deg);
}

100% {
transform: rotate(-2deg);
}
}

@keyframes scale-up-tl {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
</style>

--- RADIAL GRADIENT BACKGROUND ---
<style>
body {
background: radial-gradient(circle, #FFFFFF 34%, #bcc3db 100%);
</style>