[comment]code by sox

[font=Nunito Sans]font1[/font]

[/comment][div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;

/*accent colors*/
--accent01: #000;   /*black - keep dark!*/
--accent02: #fff;   /*white - keep light!*/
--accent1: #929292;   /*subtitles - gray*/
--accent2: #1F1F1F;   /*search bar - dark gray*/
--accent3: #1ED760;   /*icons/buttons - spotify green*/
--accent4: #353535;   /*lyrics bkgd*/


/*values*/
--bkgd: var(--accent01);   /*background color*/
--text: var(--accent02);   /*default text color - applies to text NOT SET in the values below*/
--lyricsbkgd: var(--accent4);   /*gray*/

--followborder: 0.5px solid var(--accent3);   /*unfollow button border style*/
--picshadow: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));   /*main pic gradient overlay - black to transparent*/

--namecolor: var(--accent02);   /*character name color*/
--fccolor: var(--accent1);   /*face claim name color*/
--songcolor: var(--accent02);   /*song name color*/
--artistcolor: var(--accent1);   /*song artist name color*/
--lyricscolor: var(--accent02);   /*lyrics text color*/
--aboutcolor: var(--accent02);   /*about role text color*/
--followcolor: var(--accent3);   /*unfollow button text color*/


/*manual bold settings -- preserves font style on mobile*/
--namebold: 0.6px var(--namecolor);
--songbold: 0.2px var(--songcolor);
--lyricsbold: 0.6px var(--lyricscolor);
--followbold: 0.3px var(--followcolor);
--fcbold: 0.3px var(--fccolor);
--aboutbold: 0.6px var(--aboutcolor);


/*pics*/
--mainpic: url('https://i.imgur.com/QlMEsOl.jpeg');   /*character picture*/
--mainpicsize: cover;   /*picture size*/
--mainpicposition: 50% 50%;   /*picture positioning*/

--songpic: url('https://i.pinimg.com/736x/ad/96/a5/ad96a57598c624eb56895423efebc74c.jpg');   /*song picture*/
--songpicsize: cover;   /*picture size*/
--songpicposition: 50% 50%;   /*picture positioning*/


/*fonts*/
--font1: 'Nunito Sans', sans-serif;


][div=margin:auto; position:relative; width:fit-content; height:fit-content; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; margin-top:10px; margin-bottom:10px; box-sizing:border-box; overflow:hidden; cursor: url(https://imgur.com/5ex8RXq.png), auto; font-family:var(--font1); color:var(--text);][nobr]

[comment]---- LEFT START ----[/comment]
[/nobr][div=position:relative; margin:5px; width:250px; height:275px; overflow:hidden; background:var(--bkgd); border-radius:8px;][nobr]

[comment]---- SEARCH BAR START ----[/comment]
[comment]-- home --[/comment][div=position:absolute; width:20px; height:20px; left:10px; top:10px; background:var(--accent2); border-radius:20px; font-size:10px; line-height:21px; color:var(--accent1); text-align:center;][fa]far fa-home[/fa][/div]
[comment]-- search --[/comment][div=position:absolute; width:195px; height:20px; left:35px; top:10px; background:var(--accent2); border-radius:20px; font-size:8px; line-height:21px; color:var(--accent1); padding-left:7px;][div=display:inline; margin-right:5px; font-size:10px;][fa]far fa-search[/fa][/div] What do you want to play?
[comment]-- spotify icon --[/comment][div=display:inline; position:absolute; height:10px; top:5px; right:5px; text-align:right; color:var(--accent3); font-size:10px; line-height:10px; border-left:0.5px solid var(--accent1); padding-left:5px;][fa]fab fa-spotify[/fa][/div]
[/div][comment]---- SEARCH END----[/comment]

[comment]---- LYRICS START ----[/comment]
[/nobr][div=position:absolute; width:100%; height:185px; top:40px; background:var(--lyricsbkgd); font-size:13px; line-height:16px;][div=position:absolute; top:20px; left:15px; width:220px; height:145px; overflow-y:scroll; overflow-x:hidden; scrollbar-width:none; color:var(--lyricscolor); -webkit-text-stroke:var(--lyricsbold); letter-spacing:0.6px;][comment]

---- LYRICS START HERE ----
[/comment]Lorem ipsum dolor
Sit amet consectetur 
Adipiscing elit sed do eiusmod tempor
Incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam
Quis nostrud exercitation
Ullamco laboris nisi ut aliquip
Ex ea commodo consequat
Duis aute irure dolor in reprehenderit in voluptate
Velit esse cillum dolore eu fugiat nulla pariatur
Excepteur sint occaecat
Cupidatat non proident
Sunt in culpa qui officia deserunt
Mollit anim id est laborum
[/div][/div][nobr][comment]---- LYRICS END----[/comment]


[comment]---- SONG START ----[/comment]
[comment]-- song pic --[/comment][div=position:absolute; left:10px; bottom:10px; width:30px; height:30px; background:var(--songpic); background-size:var(--songpicsize); background-position:var(--songpicposition); border-radius:3px;][/div]
[comment]-- song name --[/comment][div=position:absolute; width:190px; height:10px; left:50px; bottom:23px; overflow:hidden; font-size:10px; line-height:10px;][div=display:inline; color:var(--songcolor); -webkit-text-stroke:var(--songbold); letter-spacing:0.2px;][comment]

---- SONG NAME HERE ----
[/comment]Title of a Song[/div]

[comment]-- circle icon --[/comment][div=display:inline; margin-left:5px; font-size:8px; color:var(--accent3);][fa]fas fa-circle-check[/fa][/div][/div]
[comment]-- artist name --[/comment][div=position:absolute; width:190px; height:10px; left:50px; bottom:11px; font-size:8px; line-height:8px; color:var(--artistcolor);][comment]

---- ARTIST NAME HERE ----
[/comment]Artist Name

[/div][comment]---- SONG END ----[/comment]
[/nobr][/div][nobr][comment]---- LEFT END ----[/comment]



[comment]---- RIGHT START ----[/comment]
[div=position:relative; margin:5px; width:250px; height:275px; overflow:hidden; background:var(--bkgd); border-radius:8px;]

[comment]---- CHARACTER PIC SECTION START ----[/comment]
[comment]-- pic --[/comment][div=position:absolute; top:0px; width:100%; height:200px; background:var(--mainpic); background-size:var(--mainpicsize); background-position:var(--mainpicposition);][/div]
[comment]-- gradient overlay --[/comment][div=position:absolute; top:0px; width:100%; height:80px; background:var(--picshadow); background-size:var(--mainpicsize); background-position:var(--mainpicposition);][/div]

[comment]-- role name --[/comment][div=position:absolute; top:15px; left:15px; width:230px; height:30px; overflow:hidden; font-size:13px; line-height:14px; color:var(--aboutcolor); -webkit-text-stroke:var(--aboutbold); letter-spacing:0.7px;][comment]

---- ROLE NAME HERE: About the [role] ----
[/comment]About the RoleName
[/div][comment]---- CHAR PIC SECTION END ----[/comment]


[comment]---- CHARACTER INFO SECTION START ----[/comment]
[comment]-- character name --[/comment][div=position:absolute; width:230px; height:16px; left:15px; bottom:45px; overflow:hidden; font-size:15px; line-height:15px;][div=display:inline; color:var(--namecolor); -webkit-text-stroke:var(--namebold); letter-spacing:0.7px;][comment]

---- CHARACTER NAME HERE ----
[/comment]Character Name[/div][/div]

[comment]-- monthly listeners --[/comment][div=position:absolute; width:190px; height:11px; left:15px; bottom:32px; overflow:hidden; font-size:11px; line-height:11px; color:var(--artistcolor);][comment]

---- MONTHLY LISTENERS HERE ----
[/comment]5,302,133 monthly listeners[/div]


[comment]-- follow button --[/comment][div=position:absolute; width:auto; height:auto; right:15px; bottom:32px; border:var(--followborder); border-radius:30px; padding:3px 8px 3px 8px; text-align:center; font-size:9px; line-height:9px; color:var(--followcolor); -webkit-text-stroke:var(--followbold); letter-spacing:0.3px;]Unfollow[/div]

[comment]-- faceclaim name --[/comment][div=position:absolute; width:190px; height:10px; left:15px; bottom:11px; overflow:hidden; font-size:8px; line-height:8px; color:var(--fccolor);][div=display:inline;-webkit-text-stroke:var(--fcbold); letter-spacing:0.3px;]Faceclaim:[/div] [comment]

---- FACECLAIM NAME HERE ----
[/comment]Firstname Lastname

[/div][comment]---- CHARACTER INFO SECTION END----[/comment]
[/div][comment]---- RIGHT END----[/comment]

[/nobr][/div][/div]