cr narumitsuluv 2

*CHANGE THE ELEMENT ID IF IT DOESN'T MATCH YOURS*

--- TOP CONTAINER ---

#container01 > .wrapper {
width: 4.5em;
border-radius: 16px 16px 0px 0px;
box-shadow: inset 10px 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%);
right: 15px;
}

@media only screen and (max-width: 600px) {
#container01 > .wrapper {
width: 5em;
}
}

--- POSITIONING for MUSIC PLAYER ---
position:relative;
bottom: 0em;
left: 1em;

--- MAIN CONTAINER ---

#container02 > .wrapper {
height: 16em;
border-radius: 20px 20px 20px 20px;
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%);
}

--- IMAGE ---

#image01 .frame {
-webkit-filter: drop-shadow(0px 0px 5px #fff);
}

--- SCROLLBOX ---

#text02 {
background: white;
border-radius: 0.5em;
height: 108px;
overflow: auto;
padding-left: 4px;
padding-right: 4px;
padding-top: 7px;
border: 1px solid #989b97;
font-family: pixel;
right: 3px;
}

@media only screen and (max-width: 600px) {
#text02 {
height: 80px;
}
}

#text02 mark {
font-size: 1.7em;
background: linear-gradient(90deg, #FFCCCC, #BABABA, #FFCCCC, #BABABA, white, #FFCCCC);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0px black;
padding-left: 2px;
padding-right: 2px;
letter-spacing: 1px;
line-height: 0.5em;
filter: drop-shadow(0px 0px 1px black);
font-family: kiwi;
}

--- 'More' BUTTON ---

#buttons01 li a {
background: radial-gradient(#fff 14%, #D1D1D1 100%);
border: 1px solid #585858;
width: 7em;
border-radius: 20px 20px 20px 20px;
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%);
font-family: pixel;
z-index: 3;
position: relative;
bottom: 7px;
right: 40px;
}

--- CONTAINER with BUTTON ---

#container03 > .wrapper {
box-shadow: inset 7px 0 7px -9px gray, inset -7px 0 7px -9px gray, inset 0 -7px 7px -9px gray;
border-radius: 0.5em 0.5em 0em 0em;
border: 1.5px solid #888889;
width: 227px;
z-index: 10;
position: absolute;
right: -1em;
bottom: 12em;
}

@media only screen and (max-width: 600px) {
#container03 > .wrapper {
width: 170px;
}
}

--- 'view more' TEXT ---

#text03 mark {
font-size: 1.7em;
background: linear-gradient(90deg, #FFCCCC, #BABABA, #FFCCCC, #BABABA, white, #FFCCCC);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0px black;
padding-left: 2px;
padding-right: 2px;
letter-spacing: -3px;
line-height: 0.5em;
filter: drop-shadow(0px 0px 1px black);
font-family: kiwi;
}

--- 'X' BUTTON ---

#buttons02 li a {
text-shadow: 0px 0px 3px black;
-webkit-text-stroke: 0.5px white;
box-shadow: inset 0 7px 7px -9px white, inset 7px 0 7px -9px white, inset -7px 0 7px -9px white, inset 0 -7px 7px -9px white;
border: 1.5px solid #888889;
filter: drop-shadow(0px 1px 1px white);
}

--- CONTAINER with SCROLLBOX ---

#container04 > .wrapper {
box-shadow: inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
border-radius: 0em 0em 0.5em 0.5em;
border-left: 1.5px solid #888889;
border-right: 1.5px solid #888889;
border-bottom: 1.5px solid #888889;
width: 227px;
backdrop-filter: blur(2px);
z-index: 10;
position: absolute;
right: -1em;
top: -12em;
}

@media only screen and (max-width: 600px) {
#container04 > .wrapper {
width: 170px;
}
}

--- SCROLLBOX ---

#text04 {
background: white;
border-radius: 0.5em;
height: 115px;
overflow: auto;
padding-left: 4px;
padding-right: 4px;
padding-top: 7px;
border: 1px solid #989b97;
font-family: pixel;
}

@media only screen and (max-width: 600px) {
#text04 {
height: 90px;
}
}

#text04 mark {
font-size: 1.7em;
background: linear-gradient(90deg, #FFCCCC, #BABABA, #FFCCCC, #BABABA, white, #FFCCCC);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0px black;
padding-left: 2px;
padding-right: 2px;
letter-spacing: 1px;
line-height: .5em;
filter: drop-shadow(0px 0px 1px black);
font-family: kiwi;
}





--- ALL FONTS ---

<style>
@font-face {
font-family: Nintendo-DS-BIOS;
src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
}

@font-face {
font-family: pixel;
src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
}
</style>

--- SCROLLBAR ---

<style>
::-webkit-scrollbar {
width: 8px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(150deg, #FFCCCC 30%, #BABABA 70%);
border-radius: 3px;
border: 1px solid #e8d1e8;
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(150deg, #FFCCCC 30%, #BABABA 70%);
}

::-webkit-scrollbar-track {
background: transparent;
border-radius: 0px;
}
</style>