[comment][font=Karla][font=Open Sans][font=Poppins]dj, spin it![/font][/font][/font]
to change the colours + images, change them below in the variables

[/comment][border=0px;
padding:0px;
display:block;
font-smoothing:antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
position:relative;
text-align:justify;
white-space:nowrap;
box-sizing:border-box;
width:100%;
height:auto;
overflow:hidden;
line-height:0px;
padding-top:60px;
padding-bottom:60px;
font-size:0px;
color: #4e5051;
background-color:#f0f0f0;

--bg: #f8f8f8;
--name: Poppins;
--font: Karla;
--border: 1px solid #aaafab;
--boxshadow: 0px 0px 0px 1px #cecece;
--boxborder: 5px solid #f8f8f8;
--textbox: #f5f6f6;
--white: white;

/*FOR GRADIENT! The first colour - #f5f6f6 - is the bottom white colour. #c3d1d8 is your blue top color*/
--gradient:  radial-gradient(circle at 40% 110%, #f5f6f6 0%, #f5f6f6 78%, #c3d1d8 78%, #c3d1d8 100%);

/*IMAGE*/
--image: url(https://agilebacon.com/wp-content/themes/fox/images/placeholder.jpg)  center/cover no-repeat;

cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;]

[border=0px; box-sizing:border-box;padding:0px; max-width:580px; width:100%; height:fit-content; margin:auto; display:flex; flex-flow: row wrap; justify-content:space-evenly ]
[border=0px; padding:0px; max-width:200px; width:200px; height:400px; position:relative; z-index:2;  flex-grow: 1;  align-items:stretch; margin-left:20px;]
[border=var(--boxborder); padding:5px; box-sizing:border-box; width:100%; height:20px; background:var(--bg); border-radius:10px; margin-top:80px; box-shadow: var(--boxshadow); display:flex;  justify-content:center; align-items:center;][border=0px;white-space:normal; font-size:8px;font-family: var(--name); text-transform:uppercase; font-weight:bold;line-height:8px; letter-spacing:1px;width:90%;

/*CHARACTER NAME HERE*/] CHARACTER NAME [/border]
[border=0px; padding:0px;width:10%; font-size:8px; margin-top:-2px;][fa]fas fa-search[/fa][/border][/border]

[border=var(--boxborder); padding:5px; box-sizing:border-box; max-width:400px;width:100%; height:250px; background:var(--textbox); border-radius:10px; margin-top:20px; box-shadow: var(--boxshadow); overflow:hidden;]
[border=0px; padding:0px; width:150px; height:40px;margin:auto; overflow:hidden;][tabs]

[tab=1][border=0px; padding:0px; width:190px; height:240px; background:var(--image); position:absolute;  margin-top:-58px; margin-left:-40px; border-radius:10px; z-index:3; pointer-events:none;]
[border=0px; padding:0px; width:190px; height:30px;display:flex;  justify-content:center;align-items: center; white-space:normal; font-size:5px; margin-top:-5px;][border=0px;padding:0px; margin-right:40px;][fa]fas fa-circle[/fa][/border]
[border=0px; padding:0px;][fa]far fa-circle[/fa][/border][/border]
he[/border][/tab]
[tab=2][border=0px; padding:0px; width:190px; height:240px; background:var(--bg); position:absolute;  margin-top:-58px; margin-left:-40px; border-radius:10px; z-index:3; pointer-events:none;]
[border=0px; padding:0px; width:190px; height:30px;display:flex;  justify-content:center;align-items: center; white-space:normal; font-size:5px; margin-top:-5px;][border=0px;padding:0px; margin-right:40px;][fa]far fa-circle[/fa][/border]
[border=0px; padding:0px;][fa]fas fa-circle[/fa][/border][/border]


/*left side (scroll)*/
[border=0px;padding:0px; max-width:180px; width:100%; height:200px; margin:auto; flex-grow: 1;  overflow:hidden; align-items:stretch;display:flex; flex-direction:column; box-sizing:border-box; padding-right:10px; padding-top:10px; pointer-events:auto]

[border=0px; padding:0px; height:calc(100% - 10px); width:200%; overflow-y:scroll;overflow-x:hidden; line-height:14px; font-size:10px; letter-spacing:0px;white-space:normal; font-family: var(--font);][border=0; height:auto; width:51%; box-sizing:border-box; margin-left:5px;

/*TAB TEXT AREA*/]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sem enim, pellentesque nec nibh vitae, pretium aliquam arcu. Cras facilisis nibh purus, nec pretium purus sollicitudin porttitor. Duis ut tellus scelerisque, mattis diam id, condimentum velit. Vestibulum consequat, metus eu commodo facilisis, tellus nunc laoreet arcu, at ullamcorper felis turpis nec elit. Vivamus dapibus vel metus ac ultrices. Praesent faucibus sapien quis magna venenatis dapibus. Sed rhoncus tortor ut dolor semper, vitae posuere urna rutrum. Nunc eu nulla congue, suscipit diam vitae, hendrerit mi. Nullam volutpat augue eget ligula hendrerit, sit amet pretium augue consectetur. In vitae tempor nunc. Fusce et nisi tellus. Quisque mollis ornare ex, ac aliquam mauris tempus nec. Aenean a orci viverra, rhoncus mi ac, finibus nisi. Morbi ullamcorper velit sed lectus aliquet venenatis sit amet sit amet sapien. Suspendisse sit amet mauris sodales, eleifend ligula et, feugiat lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sem enim, pellentesque nec nibh vitae, pretium aliquam arcu. Cras facilisis nibh purus, nec pretium purus sollicitudin porttitor. Duis ut tellus scelerisque, mattis diam id, condimentum velit. Vestibulum consequat, metus eu commodo facilisis, tellus nunc laoreet arcu, at ullamcorper felis turpis nec elit. Vivamus dapibus vel metus ac ultrices. Praesent faucibus sapien quis magna venenatis dapibus. Sed rhoncus tortor ut dolor semper, vitae posuere urna rutrum. Nunc eu nulla congue, suscipit diam vitae, hendrerit mi. Nullam volutpat augue eget ligula hendrerit, sit amet pretium augue consectetur. In vitae tempor nunc. Fusce et nisi tellus. Quisque mollis ornare ex, ac aliquam mauris tempus nec. Aenean a orci viverra, rhoncus mi ac, finibus nisi. Morbi ullamcorper velit sed lectus aliquet venenatis sit amet sit amet sapien. Suspendisse sit amet mauris sodales, eleifend ligula et, feugiat lorem.[/border][/border][/border][/border][/tab]
[/tabs][/border][/border]

[/border]

[border=var(--boxborder); padding:0px; max-width:400px; width:100%; height:400px; border-radius:10px;
background:var(--gradient); margin-left:-50px; flex-grow: 1;  align-items:stretch;] /*right side (scroll)*/
[border=0px;padding:0px; max-width:320px; width:100%; height:400px; flex-grow: 1;  align-items:stretch;overflow:hidden;display:flex; margin-left:12%;flex-direction:column; box-sizing:border-box; padding-right:10px; padding-top:10px;]

[border=0px; padding:0px; height:calc(100% - 10px); width:200%; overflow-y:scroll;overflow-x:hidden; line-height:14px; font-size:10px; letter-spacing:0px;white-space:normal; font-family: var(--font);  ][border=0; height:auto; width:51%; box-sizing:border-box; margin-left:5px;][border=0px; padding:10px; box-sizing:border-box; background:var(--white); border-radius:5px;

/*TEXT GOES HERE*/]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sem enim, pellentesque nec nibh vitae, pretium aliquam arcu. Cras facilisis nibh purus, nec pretium purus sollicitudin porttitor. Duis ut tellus scelerisque, mattis diam id, condimentum velit. Vestibulum consequat, metus eu commodo facilisis, tellus nunc laoreet arcu, at ullamcorper felis turpis nec elit. Vivamus dapibus vel metus ac ultrices. Praesent faucibus sapien quis magna venenatis dapibus. Sed rhoncus tortor ut dolor semper, vitae posuere urna rutrum. Nunc eu nulla congue, suscipit diam vitae, hendrerit mi. Nullam volutpat augue eget ligula hendrerit, sit amet pretium augue consectetur. In vitae tempor nunc. Fusce et nisi tellus. Quisque mollis ornare ex, ac aliquam mauris tempus nec. Aenean a orci viverra, rhoncus mi ac, finibus nisi. Morbi ullamcorper velit sed lectus aliquet venenatis sit amet sit amet sapien. Suspendisse sit amet mauris sodales, eleifend ligula et, feugiat lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sem enim, pellentesque nec nibh vitae, pretium aliquam arcu. Cras facilisis nibh purus, nec pretium purus sollicitudin porttitor. Duis ut tellus scelerisque, mattis diam id, condimentum velit. Vestibulum consequat, metus eu commodo facilisis, tellus nunc laoreet arcu, at ullamcorper felis turpis nec elit. Vivamus dapibus vel metus ac ultrices. Praesent faucibus sapien quis magna venenatis dapibus. Sed rhoncus tortor ut dolor semper, vitae posuere urna rutrum. Nunc eu nulla congue, suscipit diam vitae, hendrerit mi. Nullam volutpat augue eget ligula hendrerit, sit amet pretium augue consectetur. In vitae tempor nunc. Fusce et nisi tellus. Quisque mollis ornare ex, ac aliquam mauris tempus nec. Aenean a orci viverra, rhoncus mi ac, finibus nisi. Morbi ullamcorper velit sed lectus aliquet venenatis sit amet sit amet sapien. Suspendisse sit amet mauris sodales, eleifend ligula et, feugiat lorem.[/border][/border][/border][/border]
[/border][/border]

[comment]
 
‧͙⁺˚*･༓☾　credit - please do not remove　☽༓･*˚⁺‧͙
[/comment][border=0px; font-size:6px; filter: grayscale(100%); letter-spacing:1px; text-align:center;font-family:Karla; margin-top:20px;color:black; line-height:9px;][URL='https://jinsooulsthemes.tumblr.com/roald']original theme: roald theme[/URL]
coded by weldherwings.[/border]

[/border]