minimal

[nobr]
[class=variables]
	cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
	--color: #141414;
[/class]

[class=container]
	width: 350px;
	display: flex;
	margin: auto;
	flex-direction: column;
	justify-content: flex-start;
[/class]

[class=name]
	font-size: 40px;
	font-weight: 900;
	line-height: 0.7;
	color: var(--color);
[/class]

[class=tabsContainer]
	width: 350px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
[/class]

[class=title]
	font-size: 20px;
	border: 1px solid var(--color);
	padding: 3px;
	box-sizing: border-box;
	line-height: 1;
	letter-spacing: 2px;
	transition: 1s;
[/class]

[class name=title state=hover]
	cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
	background-color: var(--color);
	color: white;
[/class]

[class=bigGap]
	flex-grow: 3;
[/class]

[class=gap]
	flex-grow: 2;
[/class]

[class=tab]
	text-shadow: -1px -1px 0 var(--color), 1px -1px 0 var(--color), -1px 1px 0 var(--color), 1px 1px 0 var(--color);
	font-size: 30px;
	color: white;
	transition: 1s;
	flex-basis: auto;
[/class]

[class name=tab state=hover]
	cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
	color: var(--color);
[/class]

[class=contentContainer]
	height: 350px;
	width: 350px;
	position: relative;
[/class]

[class=content]
	height: 350px;
	width: 350px;
	opacity: 0;
	position: absolute;
	transition: 1s;
	padding: 10px;
	box-sizing: border-box;
	font-size: 12px;
	overflow: hidden;
[/class]

[class=scroll]
	overflow-y: scroll;
	padding-right: 40px;
	width: 100%;
	height: 100%;
[/class]

[class=bigImg]
	height: 330px;
	width: 330px;
	background-image: url('https://img.buzzfeed.com/buzzfeed-static/static/2017-01/2/16/asset/buzzfeed-prod-web-11/sub-buzz-13797-1483392917-1.jpg?downsize=1040:*&output-format=auto&output-quality=auto');
	background-size: cover;
[/class]

[class=tag]
	width: auto;
	height: 16px;
	padding: 0px 2px 0px 2px;
	display: inline-block;
	border: 1px solid var(--color);
	font-size: 10px;
	text-transform: uppercase;
[/class]

[class=imgSmallContainer]
	width: 80%;
	height: 70px;
	display: flex;
	justify-content: space-between;
	margin: 10px auto;
[/class]

[class=imgSmall]
	width: 70px;
	height: 70px;
	background-size: cover;
[/class]

[class=show]
	z-index: 1;
	opacity: 1;
[/class]

[class=titleSelected]
	background-color: var(--color);
	color: white;
[/class]

[class=selected]
	color: var(--color);
[/class]

[script class=title on=click]
	addClass show contentHome
	removeClass show content01
	removeClass show content02
	removeClass show content03

	addClass titleSelected title
	removeClass selected tab01
	removeClass selected tab02
	removeClass selected tab03
[/script]

[script class=tab01 on=click]
	addClass show content01
	removeClass show contentHome
	removeClass show content02
	removeClass show content03

	addClass selected tab01
	removeClass titleSelected title
	removeClass selected tab02
	removeClass selected tab03
[/script]

[script class=tab02 on=click]
	addClass show content02
	removeClass show contentHome
	removeClass show content01
	removeClass show content03

	addClass selected tab02
	removeClass titleSelected title
	removeClass selected tab01
	removeClass selected tab03
[/script]

[script class=tab03 on=click]
	addClass show content03
	removeClass show contentHome
	removeClass show content01
	removeClass show content02

	addClass selected tab03
	removeClass titleSelected title
	removeClass selected tab01
	removeClass selected tab02
[/script]


[div class=variables]
	[div class=container]
		[div class=name][font=Playfair Display]name here[/font][/div]
		[div class=tabsContainer]
			[div class="title titleSelected"][font=work sans]ROLE?[/font][/div]
			[div class=bigGap][/div]
			[div class="tab tab01"]01.[/div]
			[div class=gap][/div]
			[div class="tab tab02"]02.[/div]
			[div class=gap][/div]
			[div class="tab tab03"]03.[/div]
		[/div]

		[div class=contentContainer]
			[div class="content contentHome show"]
			[div class=bigImg][/div]
			[/div]

			[div class="content content01"]
			[div class=scroll]
				[div class=imgSmallContainer]
					[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/fddf535c408ac6eeba44dcd97959fa64/tumblr_inline_pdtkc8rBD31uzz54f_1280.gif');"][/div]
					[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/b45b8e6e2e93dc02f32ca9c96503cd3d/tumblr_inline_pdtkcqwvia1uzz54f_1280.gif');"][/div]
					[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/1ee8fc0cbf3b7f25ed687c554d6a3674/tumblr_inline_pdtkct5uyG1uzz54f_1280.gif');"][/div]
				[/div]
[div class=tag]name[/div] name here
[br][/br]
[div class=tag]nickname[/div] etc.
[br][/br]
[div class=tag]age[/div]
[br][/br]
[div class=tag]pob[/div]
[br][/br]
[div class=tag]dob[/div]
[br][/br]
[div class=tag]input[/div] output
[br][/br]
[div class=tag]input[/div] output
			[/div]
			[/div]

			[div class="content content02"]
			[div class=scroll]
				[div class=imgSmallContainer]
					[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/3e555714a27f9e21f7b903f3a2174465/tumblr_inline_pdtjzwRbnu1uzz54f_1280.gif');"][/div]
					[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/a3de78ad594c425c8be85a3ddd3229b4/tumblr_inline_pdtjzf0NYd1uzz54f_1280.gif');"][/div]
					[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/a9c1e1018f92e73cad51e1a1ace298e4/tumblr_inline_pdtk01872k1uzz54f_1280.gif');"][/div]
				[/div]
[div class=tag]vices[/div] (4+)
[br][/br]
[div class=tag]virtues[/div] (4+)
[br][/br]
[div class=tag]surely by now[/div] you get the idea
			[/div]
			[/div]

			[div class="content content03"]
			[div class=scroll]
				[div class=imgSmallContainer]
					[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/e2019bc5f08d13b8da0432ae1deca7c2/tumblr_inline_pcdp1dkhJP1uzz54f_540.gif');"][/div]
					[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/01d012e794a3b6ae7d21406be18a5aec/tumblr_inline_pcdp1eetJb1uzz54f_540.gif');"][/div]
					[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/87989a3cbfcf06fb008336867a7f2be3/tumblr_inline_pcdp1gn1vv1uzz54f_540.gif');"][/div]
				[/div]
[div class=tag]theme song[/div]
[br][/br]
[div class=tag]misc[/div]
			[/div]
			[/div]

		[/div]
	[/div]
[/div]
[div=font-size: 9px; text-align: center; opacity: 0.7;]coded by [user=26242]shady[/user].[/div]
[/nobr]