cr elroseria

CR ELROSERIA_

1) please take note not all positioning is accurate! I only did them on how accurate it is on my end ><
2) you can change the colors to your liking !

_____________________________________________

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

@font-face {
font-family: paradise;
src: url(https://dl.dropbox.com/s/yqj3crakfku6o76/Paradise.otf);
}

@font-face {
font-family:'antre';
src: url(https://dl.dropbox.com/s/xaspbkonff6y9uf/antre.otf);
}

-- WHITE CONTAINER --
height: 20em;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), 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%);

-- NAVIGATION CONTAINER --
width: 40%;
position: absolute;
left: .75em;
top: -19.25em;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), 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%);

-- USERNAME CONTAINER --
width: 50%;
position: absolute;
right: .75em;
top: -19.25em;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), 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%);

-- USERNAME TEXT --
font-family: paradise;
filter: drop-shadow( 0 1px #7e4648) drop-shadow( 1px 0 #7e4648) drop-shadow( 0 -1px #7e4648) drop-shadow( -1px 0 #7e4648) drop-shadow( 0 2.5px white) drop-shadow( 2.5px 0 white) drop-shadow( 0 -2.5px white) drop-shadow( -2.5px 0 white);

-- ABOUT ME CONTAINER --
width: 51%;
height:11.5em;
position: absolute;
left: .75em;
top: -15.5em;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), 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%);

-- ABOUT ME TEXT --
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid #A6A6A6;
height: 10em;
overflow: auto;

-- HIGHLIGHT --
font-family:'antre';
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
border-radius: 3px;
font-size: 1.25em;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
border: 1px solid #8A8A8A;

-- WHITE ICONS CONTAINER --
width: 13%;
position: absolute;
left: 1.5em;
top: -16em;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), 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%);

-- MUSIC PLAYER CONTAINER --
width: 51%;
position: absolute;
left: .75em;
top: -3.6em;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), 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%);

-- IMAGE --
position: absolute;
right: .75em;
top: -15.5em;

crd settings:
height: 14.75
width: 9.375

-- POP UP CONTAINER --
width: 9.375em;
height: 14.75em;
position: absolute;
right: .75em;
top: -15.5em;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), 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%);

-- SCROLLBOX --
background: white;
padding: 5px;
border-radius: 5px;
border: 1px solid #A6A6A6;
height: 13em;
overflow: auto;

-- BUTTON --
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), 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%);
border: 1px solid #2B2929;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;