cr ivorbnd

--- MAIN CONTAINER ---
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
height: 22em;

--- CONTAINER with IMAGE & TEXT ---
width: 13.5em;
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
border-radius: 1em 0 0 1em;
position: absolute;
right: -1em;
bottom: 6em;

--- MAIN IMAGE ---
border-radius: 0.7em 0 0.7em 0;

--- NAVIGATION CONTAINER ---
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
width: 13.5em;
border-radius: 1em 0 0 1em;
position: absolute;
right: -1em;
bottom: 2.5em;

--- LINKS ON HOVER ---
#elementID a:hover {
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}

--- CREDITS TEXT ---
position: absolute;
right: 1.5em;
bottom: 1em;

(mobile)
left: 17.5em;

(Text: Highlight)
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
background: #fff;
border-radius: 0.3em;
padding-left: 0.2em;
padding-right: 0.2em;
padding-bottom: 0.1em;
font-family: hearts;

--- CONTAINER with GALLERY ---
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
width: 13.5em;
border-radius: 0 1em 1em 0;
animation-name: floating;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
z-index: 10;
position: absolute;
left: -1.5em;
bottom: 0.2em;

--- FLOAT ---
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}

--- SCROLLABLE CONTAINER ---
width: 11.7em;
height: 300px;
overflow: auto;
border-radius: 0em 1em 1em 0em;
z-index: 4;
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);

(mobile)
height: 235px;

--- POSITION for SCROLLABLE CONTAINER ---
position: absolute;
left: -1.5em;
bottom: 5.2em;

--- INFO TEXTS ---
font-family: hearts;
padding-left: 0.2em;
padding-top: 0.5em;

(Text: Highlight)
font-family:'Magic';
font-size: 2em;

--- ALL FONTS ---
<style>
@font-face {
font-family:'Magic';
src: url(https://dl.dropbox.com/s/fez9i3nk7qelaae/Magic%20Funk.ttf);
}

@font-face {
src: url(https://dl.dropbox.com/s/ktlx5w7t8gk42nb/SakeMoru-Regular.ttf);
font-family: moru;
}

@font-face {
src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf);
font-family: hearts;
}
</style>

--- ANIMATION ---
<style>
.scale-up-hor-left {
-webkit-animation: scale-up-hor-left 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-hor-left 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
* Generated by Animista on 2022-12-22 21:49:35
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation scale-up-hor-left
* ----------------------------------------
*/
@-webkit-keyframes scale-up-hor-left {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
@keyframes scale-up-hor-left {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
</style>