boiled jeans

[comment]©mountainpost with thanks to everyone in the discord, as always[/comment]

[comment]--- OUTSIDE BOX ---[/comment]
[border=0;
border-radius: 30px;
position: relative;
max-width: 350px;
height: 400px;
margin: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-grow: 1;
line-height: 0px;
background-color: #9a8c98;
overflow: hidden;
pointer-events: none;
z-index: 1;

/*theme resources*/
--polaroid: url('https://i.postimg.cc/CMNmFNdK/polaroid-frame-PNG-for-photoshop.png');

/*character images*/
--char: url('https://i.postimg.cc/tJFTCCGx/kazz.png');

/*theme colors*/
--c1: #22223b;
--c2: #4a4e69;
--c3: #c9ada7;
--c4: #f2e9e4;
--c5: #22223b;
]

[comment]--- CHARACTER NAME ---[/comment]
[border=0;
width: 330px;
height: 30px;
margin-top: 5px;
margin-left: 5px;
padding: 2px;
line-height: 25px;
font-size: 25px;
text-align: center;
color: var(--c1);
border-bottom: 3px solid #22223b;
z-index: 4;
][font=Bebas Neue]Character Name[/font]
[/border]

[comment]--- PHOTO BORDER ---[/comment]
[border=0;
width: 90px;
height: 110px;

margin-top: 15px;
margin-left: 25px;
background-image: var(--polaroid);
background-size: 225px 150px;
background-position: center;
z-index: 3;
overflow: hidden;
]

[comment]--- CHARACTER ROLE ---[/comment]
[border=0;
position: relative;
width: 82px;
height: 5px;
left: -7px;
top: 90px;
line-height: 4px;
font-size: 15px;
color: var(--c1);
text-align: center;
z-index: 4;
][font=Smooch]char. role[/font]
[/border]

[comment]--- CHARACTER IMAGE ---[/comment]
[border=0;
position: relative;
width: 80px;
height: 80px;
z-index: 4;
top: -31px;
left: -6px;
background: var(--char) no-repeat;
background-position: center;
background-size: 120%;
]
[/border]
[/border]

[comment]--- CIRCULAR LINKS ---[/comment]
[border=0;
position: relative;
max-width: 170px;
max-height: 45px;
right: -145px;
top: -130px;
pointer-events: none;
]
[comment]--- CIRCLE 1 ---[/comment]
[border=0;
position: relative;
width: 30px;
height: 30px;
border-radius: 300px;
top: -5px;
background-color: var(--c5);
overflow: hidden;
pointer-events: none;
z-index: 2;
][border=0; position: relative; height: auto; width: auto; top: -3px; z-index: 3; left: 0px; pointer-events: none; color: #ffffff;][fa]far fa-play[/fa][/border]
[/border]
[comment]--- CIRCLE 2 ---[/comment]
[border=0;
position: relative;
width: 30px;
height: 30px;
border-radius: 300px;
top: -57px;
right: -55px;
background-color: var(--c2);
z-index: 2;
pointer-events: auto;
][border=0; position: relative; height: auto; z-index: 3; width: auto; top: -3px; left: -2px;]
[comment]--- CHARACTER FORM LINK GOES HERE ---[/comment]
[URL='https://docs.google.com/document/d/1ipwFAdz0PUUt82VoQbj7vtYA7L0JdlAzMTOFPdBN7cU/edit?usp=sharing'][COLOR=rgb(255, 255, 255)][fa]far fa-user[/fa][/COLOR][/URL][/border]
[/border]
[comment]--- CIRCLE 3 ---[/comment]
[border=0;
position: relative;
width: 30px;
height: 30px;
border-radius: 300px;
top: -109px;
right: -110px;
background-color: var(--c3);
pointer-events: auto;
][border=0; position: relative; height: auto; width: auto; top: 0px; left: -2px; color: #ffffff;]
[comment]--- MOODBOARD LINK GOES HERE ---[/comment]
[URL='https://i.pinimg.com/564x/ac/04/bd/ac04bdd2d38c0d361ceb0759ba46f8ae.jpg'][COLOR=rgb(255, 255, 255)][fa]far fa-flower-tulip[/fa][/COLOR][/URL][/border]
[/border]

[comment]--- SOUNDCLOUD ---[/comment]
[border=0;
position: relative;
left: -5px;
top: -175px;
max-height: 100px;
max-width: 100px;
pointer-events: auto;
z-index: 0;
overflow: hidden;
][MEDIA=soundcloud]aghatakristi/gvilmcrboji1#track_id=330689402[/MEDIA]
[/border]
[border=0; position: absolute; width: 100px; height: 100px; top: -20px; left: 0px; pointer-events: none; background-color: #9a8c98;][/border]

[comment]--- QUOTE GOES HERE ---[/comment]
[border=0;
position: absolute;
top: 65px;
width: 140px;
height: 45px;
background-color: var(--c1);
line-height: 15px;
font-size: 15px;
pointer-events: auto;
text-align: justify;
color: #ffffff;
][font=Bebas Neue]"Today may be worse than yesterday. But it is still better than tomorrow."[/font]
[/border]

[comment]--- TEXT BOX BEGINS ---[/comment]
[border=0;
width: 270px;
height: 140px;
position: absolute;
bottom: -260px;
left: -120px;
background-color: var(--c3);
pointer-events: auto;
]
[border=0;
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
pointer-events: auto;
position: relative;
top: -5px;
]
[border=0;
height: 100%;
width: 200%;
overflow-y: scroll;
pointer-events: auto;
]
[border=0;
height: auto;
width: 50%;
box-sizing: border-box;
font-size: 10px;
color: #ffffff;
text-align: justify;
line-height: 10px;][font=Roboto]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel leo quis tellus semper vulputate. Proin blandit condimentum dolor, consequat sollicitudin lectus. Aenean aliquet felis at metus hendrerit, quis laoreet quam laoreet. Mauris id massa ac magna tristique venenatis id a dui. Duis nec blandit ex. Maecenas laoreet, enim nec tincidunt sagittis, ipsum eros aliquam dolor, id porta lectus elit quis erat. Sed condimentum augue id elit finibus, id varius lorem sollicitudin. In cursus nisi et lectus aliquam lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque pretium pharetra erat tristique volutpat. Donec a sagittis massa, a efficitur tortor. Duis placerat iaculis auctor. Quisque fermentum orci at dui interdum, non dictum risus tempus.

Sed malesuada, nulla eu posuere mattis, quam dui venenatis ex, vel ullamcorper massa turpis sit amet purus. Curabitur ac nisi a nisl eleifend mattis. Ut consectetur non eros at pulvinar. Suspendisse convallis dui mi, eu interdum enim laoreet sit amet. Duis vitae nisi feugiat, malesuada purus ac, pulvinar est. Etiam eget tincidunt dolor. Curabitur vel lorem hendrerit, tincidunt arcu sed, eleifend urna. Proin ut ipsum quis mi congue commodo. Nunc vulputate ligula sit amet sodales efficitur. Quisque lobortis efficitur lectus, commodo feugiat arcu scelerisque at. Morbi ornare elementum turpis, quis semper velit pharetra eget. In et lectus nec ante porta mattis vitae ac turpis. Quisque tempus, mauris et fermentum elementum, nulla justo tincidunt ligula, eget aliquet justo ligula eget enim. Vestibulum venenatis sit amet eros ac consequat. Cras iaculis, purus id dapibus interdum, lorem enim pulvinar lectus, eu pharetra quam lacus a tortor.

Morbi auctor ex urna, at feugiat metus rutrum sed. Sed sodales condimentum ante, molestie blandit ipsum suscipit non. Nulla finibus eu lacus id volutpat. Cras sed mi sit amet sem congue pharetra. Aliquam quis nibh quis dolor pulvinar tristique. Phasellus eu mattis ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec id orci eu tellus convallis iaculis nec quis nisl. Aliquam egestas mattis nibh scelerisque auctor. Etiam venenatis vitae purus non volutpat. Praesent porta accumsan ligula sed aliquam.

Nulla facilisi. Sed vestibulum fermentum enim. Aenean fermentum rutrum semper. Ut in magna quis diam euismod ullamcorper non sit amet turpis. Sed ac aliquet lacus, vel lobortis turpis. Praesent egestas fringilla tellus a interdum. Maecenas et vulputate ante. Nulla viverra cursus eros ut efficitur. Ut dictum in lorem vitae vulputate. Curabitur posuere odio in ligula auctor, in porttitor libero suscipit. Donec enim leo, dapibus in ligula ut, venenatis pretium dolor. Vivamus pharetra, lorem eu faucibus ultrices, enim ex vestibulum odio, sed convallis ante mauris in velit. Mauris tincidunt lorem sed risus volutpat, ac sagittis arcu rutrum. Aliquam maximus tellus eget dui efficitur, ut tempor arcu mollis. Aenean egestas felis elit, gravida malesuada metus egestas sed.[/font]
[/border]
[/border]
[/border]
[/border]
[comment]--- TEXT BOX ENDS ---[/comment]
[/border][/border][comment]--- SIGNATURE PLS DON'T REMOVE ---[/comment][border=0;
max-width: 300px;
max-height: 30px;
margin: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-grow: 1;
line-height: 10px;
font-size: 10px;
text-align: center;
]coded by mountainpost
[/border]