[comment][font=Karla]dj, spin it![/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:80px;
font-size:0px;
color: black;

/*background color*/
background-color:#f9f9f9;
background-image: url(https://www.transparenttextures.com/patterns/concrete-wall.png);
background-size:30%;

/*main bg and texture*/
--bg: #696a6f;
--border: #a7a3a2;
--boxshadow: 0px 0px 0px 2px rgb(165, 165, 165, 0.3);
--tag:  #9c9c9c;
--textbox: white;
--rightbox: rgb(230, 202, 205);
--accordian: rgb(165, 165, 165);

/*fonts and colours*/
--font: Karla;
--title: white;

/*the images*/
--image: 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; max-width:650px; width:100%; height:fit-content; margin:auto; display:flex; flex-flow: row wrap; justify-content:space-between;box-sizing:border-box; overflow:hidden; ]

/*left side*/
[border=0px; padding:0px; max-width:300px; width:100%; height:fit-content;  display: flex; flex-direction: column; box-sizing:border-box; margin-bottom:20px;]
[border=0px; padding:0px; max-width:300px; width:100%; height:350px; background: var(--image);][/border]

[border=0px; padding:0px; max-width:300px; width:100%; height:30px; background:var(--accordian); margin-top:20px][bg=transparent; width:300px; height:30px;position:relative;transform:rotate(-180deg); cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; margin:auto; margin-top:-10px; margin-left:-10px;][border=0px solid white]
[accordion=100%]{slide=[bg=transparent; background-color:var(--accordian);color:var(--title); overflow:hidden;text-transform:uppercase; font-size:12px; font-family:var(--font); text-align:center;font-variant:normal; letter-spacing:1px;transform:rotate(180deg); font-weight:normal;

/*accordian title*/ ]

its ok to be ok.[/bg]}

[bg=transparent; background-color:rgb(165, 165, 165);overflow: hidden; font-family:var(--font); font-size:12px; font-height:14px; color:var(--title);transform:rotate:(-180deg); border:10px solid rgb(165, 165, 165)][bg=transparent; transform:rotate(180deg);margin-top:10px; white-space:normal; line-height:12px; display:flex;

/*accordian content*/]
[border=0px; padding:5px; background:var(--tag); width:fit-content;]mood[/border] [border=0px; margin-left:5px;] mood here[/border]
[border=0px; padding:5px; background:var(--tag); width:fit-content;]location[/border] [border=0px; margin-left:5px;] location here[/border]
[border=0px; padding:5px; background:var(--tag); width:fit-content;]outfit[/border] [border=0px; margin-left:5px;] outfit here[/border]
[border=0px; padding:5px; background:var(--tag); width:fit-content;]mention[/border] [border=0px; margin-left:5px;] mentions[/border]
[/bg][/bg]{/slide}[/accordion][/border][/bg][/border]

[/border]


/*right side*/
[border=0px; padding:0px; max-width:300px; width:100%; height:fit-content;  display: flex; flex-direction: column; box-sizing:border-box; margin: auto; margin-top:-5px ]
[border=0px; padding:0px; max-width:300px; width:100%; height:40px; background:var(--rightbox); margin-bottom:20px; font-size:14px; font-family:var(--font); text-align:right; letter-spacing:0.5px; color:var(--title); white-space:normal;  display: flex; align-items: center; justify-content: flex-end; ] [border=0px; padding:0px;margin-right:5px;

/*character name*/]character name here[/border][/border]

[border=0px; padding:0px; max-width:300px; width:100%; height:343px; background: var(--textbox); box-shadow: var(--boxshadow); box-sizing:border-box;overflow:hidden;]

[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% - 2px); 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 main text*/]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]

[/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:grey][url=https://www.youtube.com/watch?v=j2aQ_NqeTNw][color=grey]괜찮아도 괜찮아 (That’s Okay)[/color][/url]
coded by weldherwings[/border]

[/border]