[Kaito Tanaka]

[nospaces]

[attr="class","flare-d"]
[PTabbedContent]


[PTab=01]

[attr="class","left"]

[attr="class","right"]

[attr="class","plotcoverbox"]

[attr="class","plotcover"]

[attr="class","imgbox"]

[attr="class","infotable"]

01	Kaito Tanaka
	The Thunderer - ThunderCell

[attr="class","plottext"]

Kaito Tanaka

[attr="class","scrollbox"]

Quirk: Voltage | He can generate, conduct, and discharge electrical currents at will.

[attr="class","infotable"]

relations
friends	TBA
foes	TBA
loves	TBA

[attr="class","infotable"]

whereabouts
Main	U.A University
Other	Japan

[attr="class","infotable"]

searching for
Main	Action Adventure
Other	Romantic Interest

[/PTab={--accent: #FFBF00; }]

[PTab=02]

[attr="class","left"]

[attr="class","right"]

[attr="class","plotcoverbox"]

[attr="class","plotcover"]

[attr="class","imgbox"]

[attr="class","infotable"]

02	Akira Yumano
	The Rocket Hero: BoomBurst

[attr="class","plottext"]

Akira Yumano

[attr="class","scrollbox"]

Quirk: Plasmatic Burst | He can can emit plasma energy capable of freezing targets or push them back through sheer force.

[attr="class","infotable"]

relations
friends	TBA
foes	TBA
lovers	Chrysopoeia

[attr="class","infotable"]

whereabouts
Main	Japan
Other	N/A

[attr="class","infotable"]

Goals
Main	Provide for family
Other	Be a great hero

[/PTab={--accent: #2583A9; }]


[/PTabbedContent={width:385px;background-color:transparent;height:480px;padding:0px!important;border:0px!important;margin-left:0px;margin-top: 0px; }]

[attr="class","credit"]made by gimmick

[googlefont=Barlow Condensed:400,600,700]
[googlefont=Barlow:400,500]
[googlefont=Bree Serif:400]

[newclass=".flare-d"]color: rgba(218,218,218,.75); width:385px; margin: 20px 0; --typeface-cond: 'Barlow Condensed', sans-serif; --typeface-serif: 'Bree Serif', serif; --slow: all .75s ease; --fast: all 0.2s ease; font: 400 11px/14px 'Barlow', sans-serif; --bgcolor: #333; background: transparent; position: relative [/newclass]
[newclass=".flare-d table"]width: 100%;[/newclass]
[newclass=".flare-d table td"]padding: 0;[/newclass]

[newclass=".flare-d .PT_Tabs_holder"]margin-top: -10px[/newclass]
[newclass=".flare-d .PT_Tabs_holder td"]font: 400 24px/0px var(--typeface-cond); z-index:20; line-height:10px; padding: 17px 0 0; height: 28px; background: var(--bgcolor); opacity: .75; position:absolute; width: 45px; color: rgba(218,218,218,.5);letter-spacing:1px; margin: 0 0 0 1px[/newclass]
[newclass=".flare-d .PT_table .PT_tabs_selected "]color: rgba(218,218,218,1); font-weight: 500; opacity: 1; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast); box-shadow: -2px 3px 3px rgba(0,0,0,.1); [/newclass]
[newclass=".flare-d .PT_table .PT_tabs_hover "] opacity: .9; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-d .PT_table .PT_tabs_selected_hover"]color: rgba(218,218,218,1); opacity: 1; font-weight: 500; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]

[newclass=".flare-d .PT_Tabs_holder td:nth-child(1)"]margin-top: 0 [/newclass]
[newclass=".flare-d .PT_Tabs_holder td:nth-child(2)"]margin-top: 45px [/newclass]
[newclass=".flare-d .PT_Tabs_holder td:nth-child(3)"]margin-top: 90px [/newclass]


[newclass=".flare-d .left"] [/newclass]
[newclass=".flare-d .right"]margin-left:45px; background: var(--bgcolor); box-shadow: 0px 3px 3px rgba(0,0,0,.1);[/newclass]

[newclass=".flare-d h1"]font: 700 96px/53px var(--typeface-cond); text-align: left; letter-spacing: 3px; color: var(--accent)[/newclass]
[newclass=".flare-d h2"]font: 500 32px/34px var(--typeface-serif); text-transform: uppercase; letter-spacing: 0px; padding-bottom: 8px; color: var(--accent); text-align: center; [/newclass]
[newclass=".flare-d h3"]font: 400 22px/22px var(--typeface-serif); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-align: center; color: var(--accent) [/newclass]
[newclass=".flare-d h4"]font: 500 12px/12px var(--typeface-serif); text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); text-align: center; [/newclass]
[newclass=".flare-d h5"]font: 400 9px/14px var(--typeface-serif); text-transform: uppercase; letter-spacing: .9px; color: var(--accent) [/newclass]
[newclass=".flare-d p"] font: 600 11px/13px 'Barlow', sans-serif; color: var(--accent); letter-spacing: .3px[/newclass]
[newclass=".flare-d a"]font: inherit; color: var(--accent); text-decoration: none; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-d a:hover"]opacity: .75; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-d .credit"] text-align: right; padding-right: 20px; padding-top: 4px; [/newclass]
[newclass=".flare-d .credit a"]font: 500 8px/10px 'Barlow',sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; [/newclass]

[newclass=".flare-d .plotcoverbox"]height: 480px; overflow-y: hidden; position: relative;[/newclass]
[newclass=".flare-d .plotcover .imgbox"]width: 300px; height: 350px; overflow: hidden; position: relative; z-index: 5; [/newclass]
[newclass=".flare-d .plotcover .imgbox img"]width: 300px; [/newclass]
[newclass=".flare-d .plotcover"]height: 448px; width: 300px; padding: 0 20px; position: absolute; top: 20px;-webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]
[newclass=".flare-d .plotcoverbox:hover .plotcover"]padding: 0 20px; position: absolute; top: -480px; opacity: 0; -webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]

[newclass=".flare-d .plottext"]width: 300px; padding: 20px; background: var(--bgcolor); position: absolute; top: 480px; opacity: 0;-webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]
[newclass=".flare-d .plotcoverbox:hover .plottext"]padding: 20px; position: absolute; top: 0; opacity: 1; -webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]

[newclass=".flare-d .infotable"]width: 100%; position: relative; z-index: 10;[/newclass]
[newclass=".flare-d .infotable td"]border-bottom: .25px dotted #e2e2e2; height: 34px; vertical-align: middle; text-align: center; [/newclass]
[newclass=".flare-d .plottext .infotable tr:first-child td"]height: 27px [/newclass]
[newclass=".flare-d .plottext .infotable tr:not(:first-child) td:first-child"]vertical-align: text-top; text-align: right; border-right: .25px dotted #e2e2e2; padding: 10px 10px 0 0[/newclass]
[newclass=".flare-d .plottext .infotable tr:not(:first-child) td"]height: auto; vertical-align: middle; text-align: left; padding: 10px 0px 10px 12px;[/newclass]
[newclass=".flare-d .plottext .infotable tr:not(:first-child) td:not(:first-child)"] [/newclass]
[newclass=".flare-d .plottext .infotable tr:last-child td"]border-bottom: 0; [/newclass]

[newclass=".flare-d .plottext"]height: calc(100% - 40px); display: grid; grid-template-rows: auto 1fr; justify-content: stretch [/newclass]
[newclass=".flare-d .plottext h2"]grid-row: 1; align-self: start; width: 289px; [/newclass]
[newclass=".flare-d .scrollbox"]/* height: 318px; */ padding-right: 10px; overflow: auto; grid-row: 2; align-self: stretch;[/newclass]
[newclass=".flare-d .scrollbox::-webkit-scrollbar"]-webkit-appearance: none; width: 3px !important;[/newclass]
[newclass=".flare-d .scrollbox::-webkit-scrollbar-thumb"]background: var(--accent) !important; border: 0 !important;[/newclass]
[newclass=".flare-d .scrollbox::-webkit-scrollbar-track"]background: var(--bgcolor) !important; border: 1px solid var(--bgcolor) !important;
[/newclass]

[newclass=".flare-d .plotcover td"]color: var(--accent); border-color: var(--accent) !important [/newclass]
[newclass=".flare-d .PT_spots"]background-color:transparent; width:385px; height:480px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; [/newclass]
[newclass=".flare-d .PT_spots .plottext td"]border-color: var(--accent) !important [/newclass]