cr anastasia 2

* ADJUST THE POSITIONING IF IT DOESN'T LOOK GOOD ON YOUR DEVICE *
* MAKE SURE TO CREDIT ANASTASIA WHEN REMAKING *


--- CIRCLE IMAGE ---

z-index: 50;
position: absolute;
top: -3.5em;
left: 1.5em;

--- TOP CONTAINER ---

box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);
border-radius: 30px 0px;
width: 13em;
height: 2em;
position: relative;
left: 4em;

--- CREDITS TEXT ---

font-family: handy;

--- ALL FONTS ---

@font-face {
font-family: handy;
src: url(https://dl.dropbox.com/s/kqvt2miu9r4y9ye/handy00.ttf);
}

@font-face {
src: url(https://dl.dropbox.com/s/8p8mi5uzbekohv7/Starborn.ttf);
font-family: starborn;
}

@font-face {
font-family:'fenotype';
src: url(https://dl.dropbox.com/s/klo6yfrf62916qp/02.10FEN.TTF);
}

@font-face {
font-family:'kosmos';
src: url(https://dl.dropbox.com/s/olyigvm99jgmn8h/PLANK___.TTF);
}

--- MAIN CONTAINER ---

box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);
border-radius: 30px 0px;
width: 13em;
height: 8em;

--- SCROLLBOXES ---

font-family: handy;
overflow: auto;
padding: 10px;
background: #FFFFFFAD;
border-radius: 10px;
height: 5em;

(Text: Highlight)

font-family: starborn;
border-radius: 17px;
padding: 0px 10px 0px 10px;

--- SCROLLBAR ---

::-webkit-scrollbar {
width: 14px;
} /* Track */

::-webkit-scrollbar-track {
border-radius: 8px;
background: white;
opacity:0.5;
} /* Handle */

::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #FFFFFF 0%, #000000 100%);
border-radius: 8px;
border: 1px solid #67916b;
opacity: 1.0;
}

--- DOLL GIF ---

animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
position: absolute;
bottom: 0em;
right: -0.5em;

--- FLOATING ANIMATION ---

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

--- NAME TEXT ---

text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000, 0 0;
font-family:'fenotype';
left: 2em;

--- LEFT CONTAINERS ---

-webkit-filter: drop-shadow(0px 0px 3px #424242);
border-radius: 15px;
border: 0.5px solid #77F4F7;
width: 7.5em;
height: 4em;
z-index: 50;
overflow: auto;

--- MENU & LINKS TEXTS ---

font-family: kosmos;

--- BUTTONS ---

font-family: handy;
box-shadow: inset 7px 0 7px -7px white, inset -7px 0 7px -7px white, inset 0 -7px 7px -7px white;
border: 0.5px solid #5BBFC2;

--- POSITIONING for MENU CONTAINER ---

position: absolute;
left: -2.8em;
bottom: 8em;

--- POSITIONING for LINKS CONTAINER ---

position: absolute;
left: -2.8em;
bottom: 2em;

--- OTHER CONTAINERS ---

box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);
border-radius: 30px 0px;
width: 13em;
height: 8em;
z-index: 50;
overflow: auto;

--- POSITIONING for RIGHT CONTAINER ---

position: absolute;
right: -3em;
bottom: 4em;

--- POSITIONING for LEFT CONTAINER ---

position: absolute;
left: -4em;
bottom: 6em;

(mobile)
left: -3.5em;