cr tatsunroi

* PLEASE CREDIT TATSUNROI WHEN REMAKING *
* ADJUST THE POSITIONING IF IT DOESN'T LOOK GOOD ON YOUR DEVICE *

--- MAIN CONTAINER ---
width: 25.6em;
height: 18em;
border-radius: 10px;
background: linear-gradient(180deg, #fbfefe 2%, #a0badb 10%, #94b2d3 65%, #f7faff 87%, #4f6890 100%);
padding-right: 10px;
padding-left: 10px;
padding-top: 5px;
box-shadow: 0em 0em .9em #0000007A, rgba(18,47,81,0.8) 0px 0px 6px 3px inset;

--- BUTTONS ---
font-family: music;
margin-left: 10px;
height: 44px;
width: 44px;
padding: 4px;
border-radius: 50%;
border: 1px solid #819ab0;
background: linear-gradient(150deg, #dffbff 8%, #7a94bd 50%, #abc6ef 90%);
-webkit-filter: drop-shadow(1px 1px 1px #0000007A);
z-index: 99;

(mobile)
height: 33px;
width: 33px;

--- SOUND EFFECT ---
clicksound.playclip();

--- POSITIONING for BUTTONS ---
position: relative;
bottom: 1.7em;
right: -4.5em;

(mobile)
bottom: 1.6em;
right: -4.3em;

--- BUTTONS ON HOVER ---
#elementID li a:hover {
transition:all .3s ease;
background:#8A9AD1;
color: #ededed;
filter:drop-shadow(-1.5px 0px 0px #9DADE1) drop-shadow(2px 0px 0px #6A7DBD) drop-shadow(0px -2px 0px #9DADE1) drop-shadow(0px 2px 0px #6A7DBD);
}

--- IMAGE ---
border: 1px solid #ffffff99;
border-radius: 3px;
z-index: 999;

--- POSITIONING for IMAGE ---
position: absolute;
top: 2.85em;
right: 4.9em;

(mobile)
top: 3.5em;
right: 1.8em;

--- TOP BANNER TEXTS ---
width: 24.36em;
height: 1.5em;
font-family: windowss;
border: 1px solid #233049;
border-bottom: transparent;
border-radius: 10px 10px 0px 0px;
background: linear-gradient(180deg, #6c7a97 0%, #0b205e 50%, #324d95 100%);
padding: 5px;
box-shadow: 0em 0em .4em #0000007A;

(mobile)
width: 23.7em;
height: 2em;

--- POSITIONING for TOP BANNER TEXTS ---
position: absolute;
bottom: 20.7em;
left: 7.8em;

(mobile)
bottom: 20.2em;
left: 3.8em;

--- INFO CONTAINERS ---
width: 24.4em;
height: 10.99em;
border-radius: 0px 0px 3px 3px;
margin-bottom: 13px;
box-shadow: 0em 0em .4em #0000007A;

(mobile)
width: 23.7em;

--- TRANSPARENT TEXT BOX ---
width: 15.2em;
height: 8.6em;
font-family: windows;
letter-spacing: 0.5px;
background: #ffffff66;
border: 1px solid #ffffffb3;
border-radius: 7px;
padding: 5px;
left: 5px;

--- GIF POSITIONING ---
position: absolute;
bottom: 0.2em;
left: 10px;

--- POSITIONING for INFO CONTAINERS ---
position: absolute;
bottom: 6em;
right: 4.8em;

(mobile)
bottom: 5.2em;
left: 1.8em;

--- TRANSPARENT SCROLLBOX ---
width: 15.2em;
height: 8.2em;
font-family: windows;
letter-spacing: 0.5px;
background: #ffffff4d;
border: 1px solid #ffffffb3;
border-radius: 7px 0px 0px 7px;
padding: 5px;
margin: 5px 0px;
overflow: auto;
-webkit-animation: swing-in-bottom-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
animation: swing-in-bottom-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
left: 5px;

(mobile)
width: 14.4em;
left: 3px;
bottom: 5px;


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

@font-face {
src: url(https://dl.dropbox.com/s/ro0hv45uheptqmm/WINDOWS%20OBJECT.otf);
font-family: windowss;
}

@font-face {
src: url(https://dl.dropbox.com/s/vnoqdy8lne35xoq/AltoneTrial-Regular.ttf);
font-family: altone;
}

@font-face {
src: url(https://dl.dropbox.com/s/wzr6j290rp5bh07/font%20bottons%20music%20pro.ttf?dl=0);
font-family: music;
}
</style>

--- ANIMATION ---
<style>
/* ----------------------------------------------
* Generated by Animista on 2023-2-18 1:46:2
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation swing-in-bottom-fwd
* ----------------------------------------
*/
@-webkit-keyframes swing-in-bottom-fwd {
0% {
-webkit-transform: rotateX(100deg);
transform: rotateX(100deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 1;
}
}
@keyframes swing-in-bottom-fwd {
0% {
-webkit-transform: rotateX(100deg);
transform: rotateX(100deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 1;
}
}
</style>