Code Comic

<style>
/*

    AUTHOR: Elle
    LANGUAGE: HTML/CSS
    FOR: Cyclone [RPC PROFILE]
    SOURCE: https://pastebin.com/raw/tckGHLPZ -
    REGISTRATION: https://www.copyrighted.com/work/2PKqDybNAqyK7xoN ;
    LICENSE WILL NOT BE GIVEN TO ANYONE || DO NOT REMOVE ANY OF THE CREDIT HIDDEN AND IN OOC

     IMAGES USED IN THIS PROFILE ARE NOT MINE; ONLY THE CODE IS

     READ THE DISCLAIMER SHOWCASED IN https://ellexide-codes.tumblr.com/disclaimer


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


    */


    /*
    ============================================================================================================
    THE REST OF THE CODE IS KEPT IN MY FILE BUT IT WON'T AFFECT HOW YOUR PROFILE WILL LOOK. HERE ARE THE EDITABLE
    PORTIONS OF YOUR CODE. IT MAKES IT EASIER FOR YOU TO IGNORE THE PARTS OF THE CODE WHERE YOU REALLY CAN'T TOUCH
    BECAUSE IT MIGHT BREAK THE WHOLE THING. IT ALSO MAKES IT EASIER FOR ME TO FIX BUGS YOU MAY FIND.
    =============================================================================================================
    */


    /*---- CHANGE BACKGROUND ----*/
    body{
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/e0/d7/94/e0d794dae91b3879031c3ace1a6fe4b0.jpg') !important;
    background-size: 25% !important;
    }
    #ooc{
        background-image: url('http://l.rgbimg.com/cache1v0cla/users/x/xy/xymonau/600/oc3d1gm.jpg') !important;
        background-size: 70% !important;
    }

    :root{
        --box-background: url('https://media.istockphoto.com/vectors/snow-of-halftone-cubes-on-blue-sky-background-vector-id524719421?k=6&m=524719421&s=612x612&w=0&h=zxX8KxN6vM5KJHggal4PH2kDK1rV6tOw3wcbWZGiH_E=') !important;
        /* I EXTREMELY SUGGEST NOT CHANGING THE BACKGROUND OF THE MAIN CODE AND *IF YOU HAVE TO* PLEASE
        CONTACT ELLE ON HOW TO PROPERLY DO IT. IF YOU DON'T SEE WHAT I MEAN, GO AHEAD AND TRY
        CHANGING IT.

        IF YOU REALLY WANT TO DO IT YOURSELF REFER TO THE NEXT PART*/
    }

    /* ------ MAIN BOX BACKGROUND --------*/
    /* ---- AFTER YOU CHANGE THE LINK ABOVE MESS AROUND WITH THIS UNTIL YOU FIND GET IT PERFECTLY ALIGNED ----*/
    #skew-background{
        top: -5% !important;
        left: -30% !important;
        height: 124.5% !important;
        width: 107.7% !important;
    }



    /* --------- CHANGE COLORS ----------*/
    :root{
        --scrollbar: #db1313 !important;
        --h1: #db1313 !important;
        --bold: #db1313 !important;
        --link: #db1313 !important;
        --link-outline: #ffee00 !important;
        --sheet-color: linear-gradient(360deg,#ffee00 50%, rgba(255, 255, 0, 0.5)) !important;
        --name: #db1313 !important;
        --pad-color: linear-gradient(180deg, #ddd, rgba(221, 221, 221, 0.8)) !important;
        --mainbox-pad: #8cd4ff !important;
    }

    /*
        ========= INFORMATION ===========
        WHAT ARE THE PADS AND SHEETS?
THE PADS AND SHEETS ARE VERY FADED OVERLAYS TO THE BACKGROUNDS OF THE DIFFERENT BOXES.
WITHOUT THEM, THE PATTERNS OF THE BACKGROUNDS ARE TOO INTENSE THAT THE WORDS GET DROWNED
OUT. WHEN YOU CHANGE THEM, REFER TO THE MAIN COLOR FOUND IN YOUR IMAGE LIKE BLUE,
OR YELLOW, OR PEACH, AND CHANGE IT TO THAT COLOR
    */



    /* -------- CHANGE FONTS [you have to link them first]----------*/
    h1{font-family: 'Bangers' !important; font-size: 3.5vh !important;}
    #name{font-family: 'Bangers' !important; font-size: 20vh !important;}
    .words, #actualbox{font-family: 'Bubblegum Sans' !important;}


    /* ------- OPTION ADD A NEW GALLERY/FRIENDS TAB -----------*/
    .three{right: 35%;}
    .four{right: 38%;}
    /* -- IF IT'S THREE TABS USE THIS --*/
    /*#bottom-left{
        width: 28% !important;
        right: 35.7% !important;
    }*/
    /* -- IF IT'S FOUR TABS USE THIS --*/
    /*#bottom-left{
        width: 25% !important;
        right: 38.7% !important;
    }*/

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

    </style>
<!-- LOAD IN CSS FILE -->
<link href="https://ellexidecodes.github.io/Profile-Codes/free/cyclone.css" rel="stylesheet">
    <!-- DONATER PERK: DETERS CODE THEFT || IF YOU'RE NOT A DONATOR, IT'S FINE BUT IT WON'T WORK -->
    <script src="https://ellexidecodes.github.io/Profile-Codes/free/credit.js"></script>


    <!-- ACTUAL PROFILE -->
    <div id="sheet"></div>
    <div id="mainimg">
        <img src="https://i.imgur.com/sKdgIZy.png" height="100%" width="100%">
    </div>
    <div id="border">
        <div id="boom">
<img src="https://i.imgur.com/QNtL3Jb.png" height="100%" width="100%">
        </div>
    </div>
    <div id="bottom-right"></div>
    <div id="bottom-left"></div>
    <div id="name">CYCLONE</div>
    <a href="#bio" class="nav one"></a>
    <a href="#info" class="nav two"></a>
    <!-- additional tabs -->
    <!--<a href="#idname" class="nav three"></a>
        <a href="#idname" class="nav four"></a>-->
    <div id="ooc">
        <div id="pad"></div>
        <div class="words">
<center><h1>Out of Character</h1></center>
<b>𝞅</b> This code is made and copyrighted by <a href="https://themonstrousdev.github.io/" target="_blank">The Monster</a> for anyone to use freely. DM <b>Deum</b> for a code of your own.<br>
<b>𝞅</b> PM friendly.<br>
<b>𝞅</b> Female typist.<br>
<b>𝞅</b> Story is great. I much prefer story.<br>
<b>𝞅</b> More bullets.<br>
<b>𝞅</b> More bulleeeeeets.<br>
<b>𝞅</b> Why is this a thing?<br>
<b>𝞅</b> I just wanna test the overflow okay?<br>
<b>𝞅</b> You can edit them later. Huehuehuehue.<br>
<b>𝞅</b> FIGHT ME.
        </div>
    </div>
    <div id="box"><div class="pad"></div></div>
    <div id="box-skew">
        <div id="skew-background"><div class="pad"></div></div>
    </div>
    <div id="actualbox">
        <div id="host">
<div id="info" class="info">
    <center><h1>Information</h1></center>
    <b>Name</b><div class="r">Arisa-Jane Jones</div><br>
    <b>Moniker</b><div class="r">AJ, Cyclone</div><br>
    <b>Age</b><div class="r">28</div><br>
    <b>Height</b><div class="r">5'9</div><br>
    <b>Species</b><div class="r">Human</div><br>
    <b>Origin</b><div class="r">Moscow, Russia</div><br>
    <b>Location</b><div class="r">New York City, New York</div><br>
    <b>Occupation</b><div class="r">Thief, Gang Member, Mechanic</div>
</div>
<br>
<div id="bio" class="info">
    <center><h1>Biography</h1></center>
        If you can't roll with the big kids, go back to the sandbox. I ain't no baby sitter.
        <center><b>Bold</b> <i>Italics</i> <s>Strikethrough</s> <u>Underline</u> <a href="#">Link</a></center>
</div>
<!-- GALLERY TAB -->
<!--<br>
<div id="gallery" class="info">
    <center><h1>Gallery</h1></center>
    <a href="linkhere" target="_blank"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>&nbsp;
    <a href="linkhere" target="_blank"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>&nbsp;
    <a href="linkhere" target="_blank"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>&nbsp;
    <a href="linkhere" target="_blank"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>&nbsp;
    <a href="linkhere" target="_blank"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>&nbsp;
    <a href="linkhere" target="_blank"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>&nbsp;
    <a href="linkhere" target="_blank"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>&nbsp;
    <a href="linkhere" target="_blank"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>&nbsp;
    <a href="linkhere" target="_blank"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>&nbsp;
    <a href="linkhere" target="_blank"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>&nbsp;
</div>-->
<!-- FRIENDS TAB -->
<!--<br>
<div id="friends" class="info">
    <center><h1>Friends</h1></center>
    <center>
    <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
    <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
    <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
    <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
    <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
    <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
    <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
    <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
    <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
    <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
    </center>-->
        </div>
    </div>
</div>
    <audio controls controlsList="nodownload" src="http://k003.kiwi6.com/hotlink/n7rtbp8pgh/Willow_-_Fireball.mp3" type="audio/mpeg"></audio>
    <!-- CREDIT PLEASE DO NOT REMOVE -->
    <div id="credit">
        <a href="https://www.copyrighted.com/work/2PKqDybNAqyK7xoN"><font style="font-family: Bangers; font-size: 3vh;">&copy;</font> 2018</a> || <a href="https://themonstrousdev.github.io/" target="_blank">The Monster</a>
    </div>
    </body>