[comment][font=Karla][font=Rubik]dj, spin it![/font][/font]

[/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: #fff;

/*background color*/
background-color:var(--bg);

/*main bg and texture*/
--bg: #d4d2d5;
--1stbg: #1c1a1d;
--hidden1: rgb(63, 63, 63, 0.4);
--2ndbg: #cdb19b;
--hidden2: rgb(151, 123, 109, 0.4);

/*fonts and colours*/
--font: Karla;
--name: Rubik;


/*the images*/
--image1: URL(https://agilebacon.com/wp-content/themes/fox/images/placeholder.jpg)  center/cover no-repeat;
--image2: URL(https://agilebacon.com/wp-content/themes/fox/images/placeholder.jpg)  center/cover no-repeat;

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


[border=0px; padding:0px; width:300px;height:600px; margin:auto;][border=0px; padding:0px; width:300px; height:30px; background:var(--bg); position:absolute; pointer-events:none; font-size:20px; letter-spacing:0px;white-space:normal; color:var(--whitefont); text-align:center; letter-spacing:15px; margin-right:10px;

/*the icons -- use font awesome icons to change*/
][fa]fal fa-book-dead[/fa] [fa]fal fa-coffin-cross[/fa][/border]

[border=0px; padding:0px; width:150px; margin:auto; margin-top:5px;][tabs]

[comment] --first tab-- [/comment]
[tab=1]
[border=0px; padding:0px; width:300px; height:570px; background:white; position:absolute; margin-top:-20px; margin-left:-95px; overflow:hidden;]
[border=0px; padding:0px; width:100%; height:250px; background: var(--image1);overflow:hidden; /*top image with side slide*/]

[border=0px; padding:0px; height:calc(100% + 90px); width:100%;overflow-x:scroll;overflow-y:hidden; line-height:14px; font-size:10px; letter-spacing:0px;  line-height:14px; font-size:10px; letter-spacing:0px;white-space:normal; font-family: var(--font); ][border=0; padding:0px;height:auto; width:51%; box-sizing:border-box; ][border=0px; padding:0px;width:600px;  height:450px; margin-left:-1px; display:flex; flex-direction:row][border=0px; max-width:250px; width:250px; ][/border][border=0px; padding:0px; width:50px; height:250px; background:var(--hidden1);][border=0px; padding:5px; width:250px; height:50px;   transform: rotate(-90deg);margin-top:100px; margin-left:-100px; box-sizing:border-box; font-size:25px; color:var(--whitefont); white-space:normal; font-family: var(--name);justify-content:center; align-items:center;backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);][border=0px; padding:0px; margin-top:18px; padding-left:5px; text-transform:lowercase;

/*side title here*/
]dead or alive.[/border][/border][/border]
[border=0px; padding:10px;max-width:300px; width:300px; white-space:normal;  height:265px;background:var(--hidden1);backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-sizing:border-box; overflow:hidden; margin-top:-15px; padding-right: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;

/*beginning of text area*/]You can put whatever you want in here -- mood, location, images etc. It's a scroll... WITHIN A SCROLL.

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][/border]
[border=0px; padding:0px; width:100%; height: 320px; background:var(--1stbg); overflow:hidden;]

/*bottom text*/
[border=0px; padding:0px; max-width:320px; width:100%; height:330px; flex-grow: 1;  align-items:stretch; overflow:hidden;display:flex; flex-direction:column; box-sizing:border-box; padding-right:10px; padding-top:10px;]

[border=0px; padding:0px; height:calc(100% - 20px); 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;

/*beginning of 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.

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][/tab]

[comment] --second tab-- [/comment]
[tab=2][border=0px; padding:0px; width:300px; height:570px; background:white; position:absolute; margin-top:-20px; margin-left:-95px; overflow:hidden;]
[border=0px; padding:0px; width:100%; height:250px; background: var(--image2);overflow:hidden]

[border=0px; padding:0px; height:calc(100% + 90px); width:100%;overflow-x:scroll;overflow-y:hidden; line-height:14px; font-size:10px; letter-spacing:0px;  line-height:14px; font-size:10px; letter-spacing:0px;white-space:normal; font-family: var(--font); ][border=0; padding:0px;height:auto; width:51%; box-sizing:border-box; ][border=0px; padding:0px;width:600px;  height:450px; margin-left:-1px; display:flex; flex-direction:row][border=0px; max-width:250px; width:250px; ][/border][border=0px; padding:0px; width:50px; height:250px; background:var(--hidden2);][border=0px; padding:5px; width:250px; height:50px;   transform: rotate(-90deg);margin-top:100px; margin-left:-100px; box-sizing:border-box; font-size:25px; color:var(--whitefont); white-space:normal; font-family: var(--name);justify-content:center; align-items:center;backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);][border=0px; padding:0px; margin-top:18px; padding-left:5px; text-transform:lowercase;

/*side title here*/
]dead or alive.[/border][/border][/border]
[border=0px; padding:10px;max-width:300px; width:300px; white-space:normal;  height:265px;background:var(--hidden2);backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-sizing:border-box; overflow:hidden; margin-top:-15px; padding-right: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;

/*beginning of text area*/]You can put whatever you want in here -- mood, location, images etc. It's a scroll... WITHIN A SCROLL.

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][/border]
[border=0px; padding:0px; width:100%; height: 320px; background:var(--2ndbg); overflow:hidden;]

/*bottom text*/
[border=0px; padding:0px; max-width:320px; width:100%; height:330px; flex-grow: 1;  align-items:stretch; overflow:hidden;display:flex; flex-direction:column; box-sizing:border-box; padding-right:10px; padding-top:10px;]

[border=0px; padding:0px; height:calc(100% - 20px); 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;

/*beginning of 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.

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][/tab][/tab][/tabs][/border][/border]


/*do not remove credit*/
[border=0px; padding:0px; margin:auto;white-space:normal; font-size:6px; line-height:8px;  letter-spacing:2px; text-align:center; margin-top:30px; font-family:var(-name); color:white][url=https://www.youtube.com/watch?v=4HMXPa_hw8s][color=white]dead or alive.[/color][/url]
coded by weldherwings[/border]
[/border]