flame

<style>
/*

AUTHOR: Elle
FOR: Flame [RPC Profile]
LANGUAGE: CSS/HTML/JS


######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
########------------------########-----------------########------------------########
########------------------########-----------------########------------------########
######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
######################----########-----------------########------------------######################
########------------------########-----------------########------------------########
########------------------########-----------------########------------------########
######################----#####################----######################----######################
######################----#####################----######################----######################
######################----#####################----######################----######################


=======================================================================================================
****** TROUBLESHOOTING: IF YOU NEED ANY HELP, MESSAGE ME ON DISCORD: Lil Monster#3557 ****
=======================================================================================================
*/



::-webkit-scrollbar{ display: none }
* {
 user-select: none;
 -webkit-user-drag: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
}

html,
body {
 height: 100%;
}

body {
 margin: 0;
 overflow: hidden;
 background: #441101;
 font-family: 'Walter Turncoat', cursive;
 font-size: 1.2vw;
 color: white;
}

#stars {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: url(http://www.da-files.com/artnetwork/realm-of-fantasy/bg-stars.gif) top left/40%;
 opacity: 0.7;
 -webkit-mask-image: linear-gradient(black 50%, transparent);
}

#fire {
 position: absolute;
 top: -3vw;
 left: -3vw;
 height: 46vw;
 width: 50vw;
}

#boi {
 position: absolute;
 bottom: 11.5vw;
 left: 7vw;
 border-radius: 50%;
 background: url(https://i.imgur.com/Ya1oyK2.png) center/85% no-repeat, radial-gradient(ellipse at center, #fff67b, transparent 80%);
 height: 30vw;
 width: 30vw;
 filter: drop-shadow(0 0 .5vw #fff67b) drop-shadow(0 0 1vw #fff67b) drop-shadow(0 0 2vw #fff67b);
 cursor: pointer;
 overflow: hidden;
}

#boi::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: url(https://i.imgur.com/fMBVfZo.png) center/85% no-repeat;
 transition: all .5s ease-in-out;
 opacity: 0;
}

#boi:hover::before,
#boi:hover::after {
 opacity: 1;
}

#boi::after {
 content: 'Toggle Information';
 position: absolute;
 bottom: 5vw;
 left: 50%;
 transform: translateX(-50%);
 width: 50%;
 padding: 1vw;
 border: .1vh solid #f8b55e;
 background: black;
 text-align: center;
 transition: all .5s ease-in-out;
 opacity: 0;
}

#flame {
 position: absolute;
 top: 2vw;
 right: 7vw;
 font-family: "Greed", cursive;
 font-size: 10vw;
 color: transparent;
 background: url(http://bestanimations.com/Nature/Fire/lava-fire-animated-gif.gif) center/cover no-repeat;
 background-clip: text;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 filter: drop-shadow(0 0 .2vh #f8b55e) drop-shadow(0 0 .3vh #fff67b);
}

.info {
 position: absolute;
 top: 13vw;
 right: 5vw;
 height: 68vh;
 width: 50vw;
 box-sizing: border-box;
 overflow: auto;
 display: none;
 transition: all 1s ease-in-out;
}

.double{
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 display: flex;
 flex-flow: row wrap;
}

.friends {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 align-items: center;
 align-content: center;
}

.friend {
 margin: .5vw;
 height: 5vw;
 width: 5vw;
 border: .2vw solid;
 border-image: url(https://i.gyazo.com/d1fe468bd0eb4d19544c43a83d3266b5.gif);
 border-image-slice: 1;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

.section {
 height: fit-content;
 width: 50%;
 box-sizing: border-box;
 padding: 2vw;
}

.section:first-child{
 border-right: .1vw solid #ff8800;
}

#flash {
 position: absolute;
 top: 13vw;
 right: 5vw;
 height: 68vh;
 width: 50vw;
 transition: all 1.5s ease-in-out;
 background: linear-gradient(transparent 33%, #ffbb00 50%, transparent 67%) top/auto 600% no-repeat;
 pointer-events: none;
}

#ooc {
 display: block;
 padding: 2vw;
}

#flash.effect {
 background-position: bottom;
}

h1 {
 font-family: "Tropical Asian", cursive;
 font-size: 5vw;
 color: #ff8800;
 margin: 0;
 margin-bottom: 1vw;
 transition: all 1s ease-in-out;
}

table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 1vw 1vw;
 transition: all 1s ease-in-out;
}

td {
 text-align: left;
 padding: 0 1vw;
 width: 75%;
}

td:nth-of-type(odd) {
 color: #990e0e;
 text-align: right;
 font-family: "Tropical Asian", cursive;
 font-size: 3vw;
 transition: all 1s ease-in-out;
 width: 25%;
}

hr {
 border-color: #ff8800;
 opacity: .5;
 transition: all 1s ease-in-out;
}

div.tooltipMessage {
 z-index: 9001;
 position: absolute;
 max-width: 25%;
 border: .1vh solid #f8b55e;
 background: black;
 text-align: center;
 padding: 1vw;
}

div.tooltipMessage > span {
 display: inline-block;
}

div.tooltipMessage.left > span {float: right;}

ol {
 list-style: none;
}

ol li {
 counter-increment: item
}

ol li::before {
 content: '0'counter(item) '. ';
 color: #990e0e;;
}

ol li:nth-of-type(n+10)::before {
 content: counter(item) '. '
}

b {
 color: #990e0e;
}

i {
 color: #f8b55e;
}

a {
 color: #ff8800;
 text-decoration: none;
 transition: all .2s ease-in-out;
}

a:hover {
 color: #fff67b;
}
</style>
<!-- no touch these two -->
<link href="https://ellexidecodes.github.io/Profile-Codes/free/all-google-fonts.css" rel="stylesheet">
<link href="https://ellexidecodes.github.io/Profile-Codes/free/fancy-fonts.css" rel="stylesheet">


<!-- edit here -->
 <div id="stars"></div>
 <canvas id="fire"></canvas>
 <canvas id="pixie"></canvas>

 <div id="boi"></div>

 <div class="info" id="ooc">
 <h1>Out of Character</h1>
 <ol>
 <li>I didn't say anything for a long time because I still needed to figure out how I would make your profile. - Ellexide</li>
 <li>OOc button here</li>
 <li>OOc button here</li>
 <li>OOc button here</li>
 <li>OOc button here</li>
 <li>OOc button here</li>
 </ol>
 Normal Text | <b>Bold</b> | <i>Italics</i> | <s>Strikethrough</s> | <u>Underline</u> | <a href="#">Link</a>
 </div>

 <div class="info" id="dossier">
 <div class="double">
 <div class="section">
 <h1>Dossier</h1>
 <table>
 <tbody>
 <tr>
 <td>Age</td>
 <td>Twenty-Five</td>
 </tr>
 <tr>
 <td>Height</td>
 <td>6'3</td>
 </tr>
 <tr>
 <td>Weight</td>
 <td>168lbs</td>
 </tr>
 <tr>
 <td>Affinity</td>
 <td>Fire, Light</td>
 </tr>
 <tr>
 <td>Occupation</td>
 <td>Magus</td>
 </tr>
 <tr>
 <td>Orientation</td>
 <td>Pansexual</td>
 </tr>
 <tr>
 <td>Status</td>
 <td>Styla.</td>
 </tr>
 <tr>
 <td>Quality</td>
 <td>Warm</td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="section">
 <h1>Friends</h1>
 <div class="friends">
 <a target="_blank" href="https://roleplay.chat/profile.php?user=Vier" target="_blank" class="friend tooltip" img="https://i.imgur.com/XZg8Pbw.jpg" title="Vier"></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=Wife" target="_blank" class="friend tooltip" img="http://i.picpar.com/vGVc.jpg" title="Wife"></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=Vivien" target="_blank" class="friend tooltip" img="https://i.imgur.com/eICqD5Q.jpg" title="Vivien Everstone"></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=sharkboy" target="_blank" class="friend tooltip" img="https://i.imgur.com/O1Lp8ns.png" title="Shark"></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=Kazami" target="_blank" class="friend tooltip" img="https://i.pinimg.com/564x/54/0d/ca/540dcabe5f6d2bb94b5a4052ceae0df8.jpg" title="Kazami"></a>
 <a target="_blank" href="https://roleplay.chat/profile.php?user=Hallow" target="_blank" class="friend tooltip" img="https://i.imgur.com/5NUmDCk.jpg" title="Hallow"></a>
 <a href="#" target="_blank" class="friend tooltip" img="" title="Friend Name"></a>
 </div>
 </div>
 </div>
 </div>

 <div class="info" id="magic">
<h1>Magic</h1>
Seriously? What do you even need to know? His name's Flame, you really need someone to hold your hand for you? Alright, fine, but don't whine to me when It's not as amazing as you thought. Fire's not really all that strong, y'know.

<br><br><b>Pyromancy:</b>It's a given, isn't it? He can control fire, he's got a natural affinity for it, and he's had years toain with it. In his mind, there's nobody better, and that's for a reason. A master in this element, He's able to manipulate flames to little limit. Any and all fire are under his domain, including those cast by other magi, rendering any magic of that kind useless against him. With a bit of effort, he can even over-take a spell, depending on how well the other has a grip on their magic.
<br><br><b>Fire Classes:</b>As traditional, he's learned more than just your simple oxygen, fuel, spark type of fire. Well-versed in nearly all forms, he's able to pick up ones he isn't well at in minutes, and mastery in weeks. It's his natural talent, a talent he's proud of to no end. Among the classes that he's mastered, there are Purifying fire (Often classed as holy or cleansing), Hellfire (Corruption, demonic), Dark fire (Corruption), And more once I get to google. Types he is unfamiliar with are free from the threat of his meddling, but hitting him with a type may give him the edge he needs.
<br><br><b>The Shield:</b> What everyone hates, what I love. This handy-dandy spell was set on him by his father in his dying moments, a powerful casting that allows Flame to withstand physical and magical attacks. This shield has been signifigantly weakened with his rebirth, and as a result, he is unable to nullify damage as well as he used to be able to. This spell has two sub-cast classes, allowing the properties to change. He can either cast it so it reflects physical damage, deflecting things like sword-hits or punches, or a cast so it reflects Magical damage. This includes most instant-cast spells, and a myriad of verse-oreinted spells. Internal damage such as mind and soul corruption are nerfed, not nullified, making attacks like those much weaker.
<br><br><b>Astromancy:</b>This magic is signifigantly weaker than all his other types, limited to only the use in specific situations. He can control stars, but only stars classed as suns, tars that provide warmth and light to planets within their orbits. In these situations, he may draw power from these stars, much like a plant would. The control portion is very minor, and takes a hefty amount of his mana, and a hefty amount of concentration. The largest feat he's done with this ability is forcing a star to collapse in on itself, and this was only achieveable while he was standing on said star. lol, he got fucked up after, because who can tank a star-explosion?
<br><br><b>Light Magic:</b> A new affinity, one he finds he has more and more connection to than he'd ever imagined.
<br><br><b>Magical Nullification:</b> Another rage-enducing ability. Through convoluted plot, Flame has developed an anti-magic line of powers, powers that manifest themselves in the forms of whatever he can think of. Hands, spears, spikes, this magic is a ghost-like cast, and when touching a target that is magical or a magic spell, this cast may either render the cast useless, drain the caster of their magic, or absorb whatever spell it touches. The limit to he amount of mana or magic these spells can nullify or contain have yet to be set, but Flame feels a draining effect on himself after a while. Prolonged casting can render him temporarily magic-less.
<br><br><b>Brand:</b> This branding, a magical binding of un-known origins was placed upon him, a dark, glowing mass of energy surging through his body, it acts as a battery and a converter. Magical attacks that are energy based, such as light or electricity, alongside fire attacks that manage to land, are absorbed by this branding and converted into useable mana for the user. This branding also works as a healing spell, which allows him to regenerate once triggered. The trigger is mass blood-loss, and/or shock.
<br><br><b>Electromancy:</b> Due to his familiar, A thunderbird he defeated and forced to himself, Flame is able to call upon storms at will. While he is no master of the craft, this ability wives him pseudo control over clouds, lightning, thunder, and to an extent, rain. Rolling thunderclouds, harsh tornadoes, and natural disasters of that such as included in this encompasing ability. A combination spell with fire has become a personal favourite of the magus, one where he calls upon thunderclouds of flame that rain acid down on his foes, with lightning as harsh as the core of the sun.</div>
 <div id="flash"></div>
 <div id="flame">Flame</div>

 <canvas id="game"></canvas>


<script src="https://ellexidecodes.github.io/Profile-Codes/free/yellow%20fireflies.js"></script>
<script src='https://ellexidecodes.github.io/Profile-Codes/repeatedEffects/tooltip.js'></script>
<script src='https://ellexidecodes.github.io/Profile-Codes/free/credit.js'></script>
<script src="https://pastebin.com/raw/UyMyH2tb"></script>