cr b8nadryl ipod

CR B8NADRYL

1) please take note not all positioning is accurate! I only did them on how accurate it is on my end ><
2) scrollbar code is in another pastebin made by b8nadryl
3) always adjust if necessary :)) i only made this on how it looks good on my laptop, phone and tablet!
_____________________________________________

-- FONTS --
@font-face {
font-family: myriad;
src: url(https://dl.dropbox.com/s/x0madkbur0lp2uk/MYRIADPRO-REGULAR.OTF);
}

-- IPOD 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 0px 0px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);

-- WHITE CIRCLE --
box-shadow: inset 10px 0px 6px -10px rgb(66 66 66 / 56%), inset -10px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 0px 0px -10px #ffffff, inset 0px -10px 6px -10px rgb(66 66 66 / 38%);
border-radius: 100%;
width: 8.625em;
height: 8.625em;
position: absolute;
right: 1.3em;
bottom: 1em;

-- MENU TEXT ON CIRCLE --
font-family: myriad;
position: relative;
z-index: 999;

-- REWIND ICONS --
left: -.25em;

-- FORWARD ICON --
position: absolute;
left: .25em;
bottom: 1.97em;

mobile:
bottom: 1.74em;

-- PAUSE / PLAY ICON --
position: relative;
bottom: 2.5em;

mobile:
bottom: 1.7em;

-- GRAY CIRCLE ICON --
position: relative;
bottom: -.875em;

-- CONTENT CONTAINER --
box-shadow: inset 8px 0px 6px -10px rgb(66 66 66 / 56%), inset -8px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 0px 0px -10px #ffffff, inset 0px -8px 6px -10px rgb(66 66 66 / 38%);
width: 9.9em;
height: 8.25em;
position: absolute;
left: 1.25em;
bottom: 1.3em;

-- MENU TEXT --
font-family: myriad;
padding-bottom: 4px;
border-bottom: 1px solid black;

-- SCROLLBOX --
font-family: myriad;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
height: 7.75em;
overflow: auto;

-- BUTTON HOVER --
#buttons01 li a:hover, #buttons02 li a:hover, #buttons03 li a:hover {
color: white;
}