cr lasita on codepen

-- NAVIGATION CONTAINER --
border-radius: 0em .5em 2em 2em;
width: 20%;
position: absolute;
right: 0em;
z-index: 5;

-- NAVIGATION BUTTON --
They are a text element in order to use the blur effect on hover

background: #a0c3c3;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 100%;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: kinkie;

-- MAIN CONTAINER --
border-radius: .5em 0em .5em .5em;
width: 75%;
height: 19em;

-- IMAGE --
width: 15
height: 12

code:
border-radius: .5em 0em .5em 0em;

-- SMALLER IMAGE --
width: 13.125
height: 3.625

code:
width: 35%;
position: relative;
z-index: 10;

-- ONLINE TEXT --
background: #A0C3C3;
padding-left: 25px;
padding-right: 5px;
position: absolute;
right: .875em;
bottom: 4em;
z-index: 2;
border-radius: 20px;

-- NOW PLAYING TEXT --
position: absolute;
right: .875em;
bottom: 2.5em;

-- SCROLLBOX CONTAINER --
border-radius: .5em 0em .5em 0em;
width: 67%;
height: 12em;
position: absolute;
bottom: 6.25em;
left: .875em;

-- SCROLLBOX TEXT --
height: 12.5em;
overflow: auto;