Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<nav id="navbar">
  <header>Use LUA in WoW!!!</header>
  <ul id="navlist">
    <li><a class="nav-link" href="#Guide_Summary">Guide Summary</a></li>
    <li><a class="nav-link" href="#Useful_Macros">Useful Macros</a></li>
    <li><a class="nav-link" href="#List_of_Emotes">List of Emotes</a></li>
    <li><a class="nav-link" href="#List_of_Functions">List of Functions</a></li>
    <li><a class="nav-link" href="#Useful_Addons">Useful Addons</a></li>
    <li><a class="nav-link" href="#Credits_&_Useful_Links">Credits & Useful Links</a></li>
  </ul>

</nav>
<main id="main-doc">
  <section id="Guide_Summary" class="main-section">
    <header>Guide Summary</header>
    <article>
      <p>This guide purpose is to introduce Vanilla WoW players to Addons and Macros </p>
      <p><span>World of Warcraft</span> is the most popular massively multiplayer online role-playing game(MMORPG). <span>Vanilla</span> is a term, its player base use to refer to its initial game version, before any expansions has been introduced. It also happens to be a common ice-cream flavor. </p>
      <p>The game utilizes <span>Lua</span>, a powerful, yet fast and easy to handle programing language, for its interface customization. Macros and addons are a way for players to interact with the game, using Lua, in order to enhance their gameplay experience. <span>Macros</span> represent strings of commands, which are typed and used in-game. <span>Addons</span> are applications, designed by the players, which can be integrated in the game, utilizing more complex program functions. </p>
      <p>The game designers have offered a number of predefined Lua <span>functions</span> which can be accessed by players. Furthermore players can create their own functions based on the alreayd predefined ones, obeying Lua syntax. The game offers a basic macro interface, which has many restrictions, but for the keen ones, there are addons like SuperMacro which enhances the macro management and allows execution and creation of complex functions, under more convenient setting. </p>
      <p>To create a macro, you simply need to access the macro interface by either choosing it from the game menu, or typing <code>/macro</code> in the chat. There, you must pick a macro name, an icon and then of course, insert the macro content, usually string of command(s). To use the macro, you can drag its icon and place it onto your action bars. It will behave just like any regular ability placed there, being called whenever you click it, or use the corresponding keybind. </p>
      <p>As stated above, addons are applications designed by the players. They are not part of the game code, but separate files. To use an addon, you must integrate it in the game folder, specifically in the <code>game_folder/Interface/Addons</code> directory. This will allow the addon to appear on the Addons button, on your character screen, where you can turn it on. Loading the game, the addon will be working. Addons usually come with their own menus and commands. </p>
    </article>
  </section>
  <section id="Useful_Macros" class="main-section">
    <header>Useful Macros</header>
    <article id="macro">
      <div id="macmain">
        <div id="maclist">
          <h4 class="spec">Action Bar Slots:</h4>
          <ul>
            <li>1 - 12 : Action Bar 1</li>
            <li>13 - 24 : Action Bar 2</li>
            <li>25 - 36 : Action Bar 3 (Right)</li>
            <li>37 - 48 : Action Bar 4 (Right-2)</li>
            <li>49 - 60 : Action Bar 5 (Bottom Right)</li>
            <li>61 - 72 : Action Bar 6 (Bottom Left)</li>
          </ul>
        </div>
        <div>
          <p class="spec"> To find "BUFF_TEXTURE" in certain macros use this macro. Target yourself while you have the buff. </p>
          <div><code>/script function m(s) DEFAULT_CHAT_FRAME:AddMessage(s); end for i=1,16 do s=UnitBuff("target", i); if(s) then m("B "..i..": "..s); end s=UnitDebuff("target", i); if(s) then m("D "..i..": "..s); end end</code></div>
        </div>
      </div>

      <div class="maclist">
        <h4>General Macros:</h4>
        <div>
          <p>
            Spammable Auto Attack Macro w/ Melee and Ranged swapping:
            This will use your bow or wand auto attack if your target is at range OR ELSE it will use a melee auto attack if the target comes too close. ALSO it won't toggle off your ranged auto attack if you spam it.
            Replace Auto Shot or Shoot with whatever your classes ranged auto attack is and replace (1) in IsAutoRepeatAction(1) with whatever button your melee and then ranged auto attack skill is on...(25), (37), etc...</p>
          <div><code>/run if CheckInteractDistance("target", 3) and (not PlayerFrame.inCombat) then AttackTarget() elseif not IsAutoRepeatAction(1) then CastSpellByName("Auto Shot OR Shoot") end</code></div>
        </div>
        <div>
          <p>Smart Buff Swap Macro Template:(Uses BUFF_1 if the main buff is active, or else uses SPELL_2)</p>
          <div><code>/run local i,x=1,0 while UnitBuff("player",i) do if UnitBuff("player",i)== "Interface\\Icons\\Spell_Texture_Name" then x=1 end i=i+1 end if x==0 then CastSpellByName("BUFF") else CastSpellByName("SPELL") end</code></div>
        </div>
        <div>
          <p>Reset Instance Macro:</p>
          <div><code>/script ResetInstances()</code></div>
        </div>
        <div>
          <p>Fishing/Mount/Dismount Macro: (I'd recommend keybinding this one to a mouse button like middleclick for easy fishing/mounting/dismounting with one hand):</p>
          <div><code>/run local i=GetInventoryItemTexture("player", GetInventorySlotInfo("MainHandSlot")) if i and string.find(i,"INV_Fishingpole")then CastSpellByName("Fishing") else UseAction(12)end</code></div>
        </div>
        <div>
          <p>Start Melee Attack: (Replace MELEE_SKILL with whatever melee attack you also want to keybind to the same button and remove /script PetAttack() if it doesn't apply to your class)
          </p>
          <div><code>/script if (not PlayerFrame.inCombat) then AttackTarget() end
              /cast MELEE_SKILL
              /script PetAttack()</code></div>
        </div>
        <div>
          <p>Spammable Wand Attack: (Won't toggle off Wand's "Shoot" skill if spammed)</p>
          <div><code>/script if not IsAutoRepeatAction(1) then CastSpellByName("Shoot") end</code></div>
        </div>
        <div>
          <p>Quest Macro:(Complete/Accept quests with a keybind - not 100% effective if there are more than 1 quest reward)</p>
          <div><code>/run AcceptQuest()
              /run CompleteQuest()
              /run i=GetNumQuestChoices() if i&lt;2 then GetQuestReward(1) end /run SelectAvailableQuest(1) /run SelectGossipAvailableQuest(1) /run SelectActiveQuest(1) /run SelectGossipActiveQuest(1)</code>
          </div>
        </div>
        <div>
          <p>Extreme Graphics Settings: (more than MAX graphics settings can be applied to the Config.wtf file however, depending on your server's restrictions this may or may not have an effect)</p>
          <div><code>/console groundEffectDensity 256
              /console groundEffectDist 170
              /console detailDoodadAlpha 100
              /console farclip 777
              /console horizonfarclip 6226
              /console smallcull 0
              /console maxLOD 3
              /console SkyCloudLOD 3
              /console characterAmbient 1</code></div>
        </div>
      </div>

      <div class="maclist">
        <h4>Class Specific Macros:</h4>
        <div>
          <p>Tracking Toggle Macro: (Toggles between different Hunter Tracking options)
            Humanoids/Hidden/Undead/Giants</p>
          <div><code>/run c=CastSpellByName t=GetTrackingTexture() if t and strfind(t,"Prayer") then c("Track Hidden") elseif t and strfind(t,"Stealth") then c("Track Undead") elseif t and strfind(t,"Dark") then c("Track Giants") else c("Track Humanoids") end</code></div>
        </div>
        <div>
          <p>Beasts/Dragonkin/Demons/Elementals</p>
          <div><code>/run c=CastSpellByName t=GetTrackingTexture() if t and strfind(t,"_Tracking") then c("Track Dragonkin") elseif t and strfind(t,"Dragon") then c("Track Demons") elseif t and strfind(t,"Fel") then c("Track Elementals") else c("Track Beasts") end
            </code></div>
        </div>
        <div>
          <p>

            Use the script to get the current Tracking Texture:

          </p>
          <div><code>

              /run icon= GetTrackingTexture() DEFAULT_CHAT_FRAME:AddMessage(icon)
            </code></div>
        </div>
        <div>
          <p>All-In-One Pet Macro:(Feeds, Dismisses, Calls or Revives Pet according to whatever is appropriate)</p>
          <div><code>/run local c=CastSpellByName if UnitExists("pet") then if UnitHealth("pet")==0 then c("Revive Pet") elseif GetPetHappiness()~=nil and GetPetHappiness()~=3 then c("Feed Pet") PickupContainerItem(3, 1) else c("Dismiss Pet") end else c("Call Pet") end</code></div>
        </div>
        <div>
          <p>Raptor Strike/Mongoose Bite Macro:</p>
          <div><code>/script if (not PlayerFrame.inCombat) then AttackTarget() end
              /cast Raptor Strike
              /cast Mongoose Bite</code></div>
        </div>
        <div>
          <p>Cast Buff or else spammable Wand "Shoot": (Using the example of Inner Fire and Shoot). Use "Find Buff Texture" macro from top of page to replace <code>Interface\\Icons\\Spell_Holy_InnerFire</code> with the appropriate buff texture.</p>
          <div><code>/run local i,x=1,0 while UnitBuff("player",i) do if UnitBuff("player",i)== "Interface\\Icons\\Spell_Holy_InnerFire" then x=1 end i=i+1 end if x==0 then CastSpellByName("Inner Fire") else UseAction(37) end</code></div>
        </div>
      </div>

    </article>
  </section>
  <section id="List_of_Emotes" class="main-section">
    <header>List of Emotes</header>
    <p>
      Emotes are a special type of chat in WoW. The word "Emote" indicates that you are communicating an action, not directly saying something.
      The following is a list of Emotes that can be used in the game. These emote commands can also be used in macros.
      Some of them have associated animations and sound
      This table also shows the difference in what will be communicated depending on whether you have a target selected or not.
    </p>
    <ul id="table">
      <li>
        <div><code>/agree</code></div>
        <p class="desc">You agree. You agree with </p>
      </li>
      <li>
        <div><code>/amaze</code></div>
        <p class="desc"> You are amazed!You are amazed by .</p>
      </li>
      <li>
        <div><code>/angry</code></div>
        <p class="desc">You raise your fist in anger. You raise your fist in anger at .
        </p>
      </li>
      <li>
        <div><code>/apologize</code></div>
        <p class="desc">You apologize to everyone. Sorry! You apologize to . Sorry!
        </p>
      </li>
      <li>
        <div><code>/applaud</code></div>
        <p class="desc">
        </p>
      </li>
      <li>
        <div><code>/applause</code></div>
        <p class="desc">You applaud. Bravo! You applaud at . Bravo!
        </p>
      </li>
      <li>
        <div><code>/attacktarget</code></div>
        <p class="desc">You tell everyone to attack something. You tell everyone to attack .
        </p>
      </li>
      <li>
        <div><code>/bark</code></div>
        <p class="desc"> You bark. Woof woof! You bark at
        </p>
      </li>
      <li>
        <div><code>/bashful</code></div>
        <p class="desc">You are bashful. You are so bashful...too bashful to get 's attention.
        </p>
      </li>
      <li>
        <div><code>/beckon</code></div>
        <p class="desc">You beckon everyone over to you. You beckon over.
        </p>
      </li>
      <li>
        <div><code>/beg</code></div>
        <p class="desc"> You beg everyone around you. How pathetic. You beg . How pathetic.
        </p>
      </li>
      <li>
        <div><code>/belch</code></div>
        <p class="desc"> You let out a loud belch. You burp rudely in 's face.
        </p>
      </li>
      <li>
        <div><code>/bite</code></div>
        <p class="desc"> You look around for someone to bite. You bite . Ouch!
        </p>
      </li>
      <li>
        <div><code>/blink</code></div>
        <p class="desc"> You blink your eyes. You blink at .
        </p>
      </li>
      <li>
        <div><code>/blow</code></div>
        <p class="desc"> You blow a kiss into the wind. You blow a kiss to .
        </p>
      </li>
      <li>
        <div><code>/blush</code></div>
        <p class="desc"> You blush. You blush at .
        </p>
      </li>
      <li>
        <div><code>/boggle</code></div>
        <p class="desc">You boggle at the situation. You boggle at .
        </p>
      </li>
      <li>
        <div><code>/bored</code></div>
        <p class="desc"> You are overcome with boredom. Oh the drudgery! You are terribly bored with .
        </p>
      </li>
      <li>
        <div><code>/bounce</code></div>
        <p class="desc">You bounce up and down. You bounce up and down in front of .
        </p>
      </li>
      <li>
        <div><code>/bow</code></div>
        <p class="desc"> You bow down graciously. You bow before .
        </p>
      </li>
      <li>
        <div><code>/bravo</code></div>
        <p class="desc"> You applaud. Bravo! You applaud at . Bravo!
        </p>
      </li>
      <li>
        <div><code>/brandish</code></div>
        <p class="desc"> You brandish your weapon fiercely. You brandish your weapon fiercely at .
        </p>
      </li>
      <li>
        <div><code>/brb</code></div>
        <p class="desc"> You let everyone know you'll be right back You let know you'll be right back.
        </p>
      </li>
      <li>
        <div><code>/burp</code></div>
        <p class="desc"> You let out a loud belch. You burp rudely in 's face.
        </p>
      </li>
      <li>
        <div><code>/bye</code></div>
        <p class="desc"> You wave goodbye to everyone. Farewell! You wave goodbye to . Farewell!
        </p>
      </li>
      <li>
        <div><code>/cackle</code></div>
        <p class="desc"> You cackle maniacally at the situation. You cackle maniacally at .
        </p>
      </li>
      <li>
        <div><code>/calm</code></div>
        <p class="desc"> You remain calm. You try to calm down.
        </p>
      </li>
      <li>
        <div><code>/cat</code></div>
        <p class="desc">
        </p>
      </li>
      <li>
        <div><code>/catty</code></div>
        <p class="desc">
          You scratch yourself. Ah, much better! You scratch . How catty!
        </p>
      </li>
      <li>
        <div><code>/charge</code></div>
        <p class="desc"> You start to charge.
        </p>
      </li>
      <li>
        <div><code>/cheer</code></div>
        <p class="desc"> You cheer! You cheer at .
        </p>
      </li>
      <li>
        <div><code>/chew</code></div>
        <p class="desc"> You begin to eat. You begin to eat in front of .
        </p>
      </li>
      <li>
        <div><code>/chicken</code></div>
        <p class="desc"> With arms flapping, you strut around. Cluck, Cluck, Chicken! With arms flapping, you strut around . Cluck, Cluck, Chicken!
        </p>
      </li>
      <li>
        <div><code>/chuckle</code></div>
        <p class="desc"> You let out a hearty chuckle. You chuckle at .
        </p>
      </li>
      <li>
        <div><code>/clap</code></div>
        <p class="desc"> You clap excitedly. You clap excitedly for .
        </p>
      </li>
      <li>
        <div><code>/cold</code></div>
        <p class="desc"> You let everyone know that you are cold. You let know that you are cold.
        </p>
      </li>
      <li>
        <div><code>/comfort</code></div>
        <p class="desc"> You need to be comforted. You comfort .
        </p>
      </li>
      <li>
        <div><code>/commend</code></div>
        <p class="desc"> You commend everyone on a job well done. You commend on a job well done.
        </p>
      </li>
      <li>
        <div><code>/confused</code></div>
        <p class="desc"> You are hopelessly confused. You look at with a confused look.
        </p>
      </li>
      <li>
        <div><code>/congrats, /cong</code></div>
        <p class="desc">
        </p>
      </li>
      <li>
        <div><code>/congratulate</code></div>
        <p class="desc">

          You congratulate everyone around you. You congratulate .
        </p>
      </li>
      <li>
        <div><code>/cough</code></div>
        <p class="desc"> You let out a hacking cough. You cough at .
        </p>
      </li>
      <li>
        <div><code>/cower</code></div>
        <p class="desc">You cower in fear. You cower in fear at the sight of .
        </p>
      </li>
      <li>
        <div><code>/crack</code></div>
        <p class="desc"> You crack your knuckles. You crack your knuckles while staring at .
        </p>
      </li>
      <li>
        <div><code>/cringe </code></div>
        <p class="desc"> You cringe in fear. You cringe away from .
        </p>
      </li>
      <li>
        <div><code>/cry</code></div>
        <p class="desc"> You cry. You cry on 's shoulder.
        </p>
      </li>
      <li>
        <div><code>/cuddle</code></div>
        <p class="desc"> You need to be cuddled. You cuddle up against .
        </p>
      </li>
      <li>
        <div><code>/curious</code></div>
        <p class="desc"> You express your curiosity to those around you. You are curious what is up to.
        </p>
      </li>
      <li>
        <div><code>/curtsey</code></div>
        <p class="desc"> You curtsey. You curtsey before .
        </p>
      </li>
      <li>
        <div><code>/dance</code></div>
        <p class="desc"> You burst into dance. You dance with .
        </p>
      </li>
      <li>
        <div><code>/ding </code></div>
        <p class="desc"> You reached a new level. DING! You congratulate on a new level. DING!
        </p>
      </li>
      <li>
        <div><code>/disappointed</code></div>
        <p class="desc">
        </p>
      </li>
      <li>
        <div><code>/disappointment</code></div>
        <p class="desc">
          You frown. You frown with disappointment at .
        </p>
      </li>
      <li>
        <div><code>/doh</code></div>
        <p class="desc"> You bonk yourself on the noggin. Doh! You bonk on the noggin. Doh!
        </p>
      </li>
      <li>
        <div><code>/doom </code></div>
        <p class="desc"> You threaten everyone with the wrath of doom. You threaten with the wrath of doom.
        </p>
      </li>
      <li>
        <div><code>/drink</code></div>
        <p class="desc"> You raise a drink in the air before chugging it down. Cheers! You raise a drink to . Cheers!
        </p>
      </li>
      <li>
        <div><code>/drool</code></div>
        <p class="desc"> A tendril of drool runs down your lip. You look at and begin to drool.
        </p>
      </li>
      <li>
        <div><code>/duck </code></div>
        <p class="desc"> You duck for cover. You duck behind .
        </p>
      </li>
      <li>
        <div><code>/eat</code></div>
        <p class="desc"> You begin to eat. You begin to eat in front of .
        </p>
      </li>
      <li>
        <div><code>/excited</code></div>
        <p class="desc"> You talk excitedly with everyone. You talk excitedly with .
        </p>
      </li>
      <li>
        <div><code>/eye</code></div>
        <p class="desc"> You cross your eyes. You eye up and down.
        </p>
      </li>
      <li>
        <div><code>/facepalm</code></div>
        <p class="desc"> You cover your face with your palm. You look over at and cover your face with your palm.
        </p>
      </li>
      <li>
        <div><code>/farewell</code></div>
        <p class="desc"> You wave goodbye to everyone. Farewell! You wave goodbye to . Farewell!
        </p>
      </li>
      <li>
        <div><code>/fart</code></div>
        <p class="desc"> You fart loudly. Whew...what stinks? You brush up against and fart loudly.
        </p>
      </li>
      <li>
        <div><code>/fear </code></div>
        <p class="desc"> You cower in fear. You cower in fear at the sight of .
        </p>
      </li>
      <li>
        <div><code>/feast</code></div>
        <p class="desc"> You begin to eat. You begin to eat in front of .
        </p>
      </li>
      <li>
        <div><code>/fidget </code></div>
        <p class="desc"> You fidget. You fidget impatiently while waiting for .
        </p>
      </li>
      <li>
        <div><code>/flap</code></div>
        <p class="desc"> With arms flapping, you strut around. Cluck, Cluck, Chicken! With arms flapping, you strut around . Cluck, Cluck, Chicken!
        </p>
      </li>
      <li>
        <div><code>/flee </code></div>
        <p class="desc">You yell for everyone to flee! You yell for to flee!
        </p>
      </li>
      <li>
        <div><code>/flex </code></div>
        <p class="desc"> You flex your muscles. Oooooh so strong! You flex at . Oooooh so strong!
        </p>
      </li>
      <li>
        <div><code>/flirt</code></div>
        <p class="desc"> You flirt. You flirt with .
        </p>
      </li>
      <li>
        <div><code>/flop </code></div>
        <p class="desc"> You flop about helplessly. You flop about helplessly around .
        </p>
      </li>
      <li>
        <div><code>/followme</code></div>
        <p class="desc"> You motion for everyone to follow. You motion for to follow.
        </p>
      </li>
      <li>
        <div><code>/food </code></div>
        <p class="desc"> You are hungry! You are hungry. Maybe has some food...
        </p>
      </li>
      <li>
        <div><code>/frown</code></div>
        <p class="desc"> You frown. You frown with disappointment at .
        </p>
      </li>
      <li>
        <div><code>/gasp</code></div>
        <p class="desc"> You gasp. You gasp at </p>
      </li>
    </ul>
  </section>
  <section id="List_of_Functions" class="main-section">
    <header>List of Functions</header>
    <article id="functions">
      <div>
        <div class="title">
          <h3>Action Functions</h3>
          <p>These functions are those which operate with the action buttons (General player actions are likely in the Activity Functions section below).</p>
        </div>

        <div>
          <div><code>UI ActionButtonDown(id)</code></div>
          <p> - Press the specified action button.
          </p>
        </div>
        <div>
          <div><code>UI ActionButtonUp(id)</code></div>
          <p> - Release the specified action button.
          </p>
        </div>
        <div>
          <div><code>ActionHasRange(slot)</code></div>
          <p> - Determine if the specified action is a range restriction (1 if yes, nil if no)
          </p>
        </div>
        <div>
          <div><code>UI BonusActionButtonDown</code></div>
          <p> - Trigger the specified bonus(pet or minion) action button.
          </p>
        </div>
        <div>
          <div><code>UI BonusActionButtonUp</code></div>
          <p> - Release the specified bonus(pet or minion) action button.
          </p>
        </div>

        <div>
          <div><code>ChangeActionBarPage()</code></div>
          <p> - Changes the current action button set to CURRENT_ACTIONBAR_PAGE.
          </p>
        </div>
        <div>
          <div><code>GetActionBarToggles()</code></div>
          <p> - Return the toggles for each action bar.
          </p>
        </div>
        <div>
          <div><code>GetActionCooldown(slot)</code></div>
          <p> - This returns the cooldown values of the specified action..
          </p>
        </div>
        <div>
          <div><code>GetActionCount(slot)</code></div>
          <p> - Get the count (bandage/potion/etc) for an action, returns 0 if none or not applicable.
          </p>
        </div>
        <div>
          <div><code>GetActionText(slot)</code></div>
          <p> - Get the text label (macros, etc) for an action, returns nil if none.
          </p>
        </div>
        <div>
          <div><code>GetActionTexture(slot)</code></div>
          <p> - Gets the texture path for the specified action.
          </p>
        </div>
        <div>
          <div><code>GetBonusBarOffset()</code></div>
          <p> - Determine which page of bonus actions to show.
          </p>
        </div>
        <div>
          <div><code>HasAction(slot)</code></div>
          <p> - Returns 1 if the player has an action in the specified slot, nil otherwise.
          </p>
        </div>
        <div>
          <div><code>IsActionInRange(slot)</code></div>
          <p> - Test if an action is in range (1=yes, 0=no, nil=not applicable).
          </p>
        </div>
        <div>
          <div><code>IsAttackAction(slot)</code></div>
          <p> - Return 1 if an action is an 'attack' action (flashes during combat), nil otherwise.
          </p>
        </div>
        <div>
          <div><code>IsAutoRepeatAction(slot)</code></div>
          <p> - Return 1 if an action is auto-repeating, nil otherwise.
          </p>
        </div>
        <div>
          <div><code>IsCurrentAction(slot)</code></div>
          <p> - Return 1 if an action is the one currently underway, nil otherwise.
          </p>
        </div>
        <div>
          <div><code>IsUsableAction(slot)</code></div>
          <p> - Return 1 if an action can be used at present, nil otherwise.
          </p>
        </div>
        <div>
          <div><code>IsConsumableAction(slot)</code></div>
          <p> - Return 1 if an action is consumable (i.e. has a count), nil otherwise.
          </p>
        </div>
        <div>
          <div><code>IsEquippedAction(slot)</code></div>
          <p> - Return 1 if an action is equipped (i.e. connected to an item that must be equipped), nil otherwise.
          </p>
        </div>
        <div>
          <div><code>PetHasActionBar()</code></div>
          <p> - Determine if player has a pet with an action bar.
          </p>
        </div>
        <div>
          <div><code>PickupAction(slot)</code></div>
          <p> - Drags an action out of the specified quickbar slot and holds it on the cursor.
          </p>
        </div>
        <div>
          <div><code>PickupPetAction(slot)</code></div>
          <p> - Drags an action from the specified pet action bar slot into the cursor.
          </p>
        </div>
        <div>
          <div><code>PlaceAction(slot)</code></div>
          <p> - Drops an action from the cursor into the specified quickbar slot.
          </p>
        </div>

        <div>
          <div><code>PROTECTED TurnOrActionStart()</code></div>
          <p> - Begin "Right Click" in the 3D world. (1.10 - Protected)
          </p>
        </div>
        <div>
          <div><code>PROTECTED TurnOrActionStop()</code></div>
          <p> - End "Right Click" in the 3D world. (1.10 - Protected)
          </p>
        </div>

      </div>

      <div>
        <div class="title">
          <h3>Battlefield Functions</h3>
        </div>
        <div>
          <div><code>AcceptAreaSpiritHeal()</code></div>
          <p> - Accept a spirit heal.
          </p>
        </div>
        <div>
          <div><code>CancelAreaSpiritHeal()</code></div>
          <p> - Cancel a spirit heal.
          </p>
        </div>
        <div>
          <div><code>CanJoinBattlefieldAsGroup()</code></div>
          <p> - returns nil if the player can not do a group join for a battlefield.
          </p>
        </div>

        <div>
          <div><code>CheckSpiritHealerDist()</code></div>
          <p> - Return true if you are in range with spirit healer while dead.
          </p>
        </div>
        <div>
          <div><code>GetAreaSpiritHealerTime()</code></div>
          <p> - Returns the time left until the next resurrection by the Sprit Guide.
          </p>
        </div>

        <div>
          <div><code>GetBattlefieldInfo(index)</code></div>
          <p> - Returns detailed information on the Battlefield you last opened a queue window for.
          </p>
        </div>

        <div>
          <div><code>GetBattlefieldPosition(index)</code></div>
          <p> - Get the map position and name of a player in the battleground not in your raid.
          </p>
        </div>
        <div>
          <div><code>GetBattlefieldScore(index)</code></div>
          <p> - Get score information about a player.
          </p>
        </div>

        <div>
          <div><code>GetBattlefieldStatInfo(index)</code></div>
          <p> - Get the battleground specific column for the score board.
          </p>
        </div>
        <div>
          <div><code>GetBattlefieldStatus(index)</code></div>
          <p> - Get the battlefield's current status.
          </p>
        </div>
        <div>
          <div><code>GetBattlefieldTimeWaited(index)</code></div>
          <p> - Get time waited in queue in milliseconds.
          </p>
        </div>
        <div>
          <div><code>GetBattlefieldWinner()</code></div>
          <p> - Get the battlefields winner.
          </p>
        </div>

        <div>
          <div><code>GetNumBattlefieldScores()</code></div>
          <p> - Returns the number of scores(players)listed in the battlefield scoreboard.
          </p>
        </div>
        <div>
          <div><code>GetNumBattlefieldStats()</code></div>
          <p> - Get the number of battleground specific columns.
          </p>
        </div>
        <div>
          <div><code>GetNumBattlefields()</code></div>
          <p> - Get the number of running battlefields for the last battleground queue window you opened.
          </p>
        </div>
        <div>
          <div><code>GetSelectedBattlefield()</code></div>
          <p> - Get the selected battlefield to join first.
          </p>
        </div>
        <div>
          <div><code>GetWorldStateUIInfo(i)</code></div>
          <p> - Get score and flag status within a battlefield.
          </p>
        </div>

        <div>
          <div><code>LeaveBattlefield()</code></div>
          <p> - Leave the current battlefield if it's been won.
          </p>
        </div>

        <div>
          <div><code>ShowBattlefieldList(index)</code></div>
          <p> - Displays a queue window for the specified battlefield. Only works if you are already in a queue for the battlefield. Index corresponds to location in queue array.
          </p>
        </div>
        <div>
          <div><code>ToggleBattlefieldMinimap()</code></div>
          <p> - Toggles the Battlefield Minimap.
          </p>
        </div>
      </div>

      <div>
        <div class="title">
          <h3>Buff/Debuff Functions</h3>
          <p>Don't get buffId and buffIndex confused, they aren't the same thing!</p>

        </div>
        <div>
          <div><code>CancelPlayerBuff(buffIndex)</code></div>
          <p> - Removes a specific buff from the player.
          </p>
        </div>
        <div>
          <div><code>CancelTrackingBuff()</code></div>
          <p> - Cancels your current tracking buff (Find Minerals etc.)
          </p>
        </div>

        <div>
          <div><code>GetWeaponEnchantInfo()</code></div>
          <p> - Return information about main and offhand weapon enchantments.
          </p>
        </div>

      </div>

      <div>
        <div class="title">
          <h3>Camera Functions</h3>
          <p>Mouse Look refers to holding down the right mouse button and controlling the movement direction. Shifting the view by holding down the left mouse button is not covered by these APIs.</p>

        </div>

        <div>
          <div><code>CameraZoomIn(increment)</code></div>
          <p> - Zooms the camera into the viewplane by increment.
          </p>
        </div>
        <div>
          <div><code>CameraZoomOut(increment)</code></div>
          <p> - Zooms the camera out of the viewplane by increment.
          </p>
        </div>
        <div>
          <div><code>FlipCameraYaw(degrees)</code></div>
          <p> - Rotates the camera about the Z-axis by the angle amount specified in degrees.
          </p>
        </div>
        <div>
          <div><code>IsMouselooking()</code></div>
          <p> - Returns 1 if mouselook is currently active, nil otherwise.
          </p>
        </div>
        <div>
          <div><code>MoveViewDownStart()</code></div>
          <p> - Begins rotating the camera downward.
          </p>
        </div>
        <div>
          <div><code>MoveViewDownStop()</code></div>
          <p> - Stops rotating the camera after MoveViewDownStart() is called.
          </p>
        </div>
        <div>
          <div><code>MoveViewInStart()</code></div>
          <p> - Begins zooming the camera in.
          </p>
        </div>
        <div>
          <div><code>MoveViewInStop()</code></div>
          <p> - Stops zooming the camera in after MoveViewInStart() is called.
          </p>
        </div>
        <div>
          <div><code>MoveViewLeftStart()</code></div>
          <p> - Begins rotating the camera to the Left.
          </p>
        </div>
        <div>
          <div><code>MoveViewLeftStop()</code></div>
          <p> - Stops rotating the camera after MoveViewLeftStart() is called.
          </p>
        </div>
        <div>
          <div><code>MoveViewOutStart()</code></div>
          <p> - Begins zooming the camera out.
          </p>
        </div>
        <div>
          <div><code>MoveViewOutStop()</code></div>
          <p> - Stops zooming the camera out after MoveViewOutStart() is called.
          </p>
        </div>
        <div>
          <div><code>MoveViewRightStart()</code></div>
          <p> - Begins rotating the camera to the Right.
          </p>
        </div>
        <div>
          <div><code>MoveViewRightStop()</code></div>
          <p> - Stops rotating the camera after MoveViewRightStart() is called.
          </p>
        </div>
        <div>
          <div><code>MoveViewUpStart()</code></div>
          <p> - Begins rotating the camera upward.
          </p>
        </div>
        <div>
          <div><code>MoveViewUpStop()</code></div>
          <p> - Stops rotating the camera after MoveViewUpStart() is called.
          </p>
        </div>
        <div>
          <div><code>PROTECTED PitchDownStart()</code></div>
          <p> - Begins pitching the camera Downward.
          </p>
        </div>
        <div>
          <div><code>PROTECTED PitchDownStop()</code></div>
          <p> - Stops pitching the camera after PitchDownStart() is called.
          </p>
        </div>
        <div>
          <div><code>PROTECTED PitchUpStart()</code></div>
          <p> - Begins pitching the camera Upward.
          </p>
        </div>
        <div>
          <div><code>PROTECTED PitchUpStop()</code></div>
          <p> - Stops pitching the camera after PitchUpStart() is called.
          </p>
        </div>
        <div>
          <div><code>NextView()</code></div>
          <p> - Cycles forward through the five predefined camera positions.
          </p>
        </div>
        <div>
          <div><code>PrevView()</code></div>
          <p> - Cycles backward through the five predefined camera positions.
          </p>
        </div>
        <div>
          <div><code>ResetView(index)</code></div>
          <p> - Resets the specified (1-5) predefined camera position to it's default if it was changed using SaveView(index).
          </p>
        </div>
        <div>
          <div><code>SaveView(index)</code></div>
          <p> - Replaces the specified (1-5) predefined camera positions with the current camera position.
          </p>
        </div>
        <div>
          <div><code>SetView(index)</code></div>
          <p> - Sets camera position to a specified (1-5) predefined camera position.
          </p>
        </div>
      </div>

      <div>
        <div class="title">
          <h3>Channel Functions</h3>
          <p>These are chat functions which are specific to channels. Also see the Chat Window Functions and Communication Functions sections.</p>

        </div>

        <div>
          <div><code>ChannelBan("channel", "name")</code></div>
          <p> - Bans a player from the specified channel.
          </p>
        </div>
        <div>
          <div><code>ChannelInvite("channel", "name")</code></div>
          <p> - Invites the specified user to the channel.
          </p>
        </div>
        <div>
          <div><code>ChannelKick("channel", "name")</code></div>
          <p> - Kicks the specified user from the channel.
          </p>
        </div>
        <div>
          <div><code>ChannelModerate("channel")</code></div>
          <p> - Enables channel Moderation commands such as ChannelKick/Ban.
          </p>
        </div>
        <div>
          <div><code>ChannelModerator("channel", "name")</code></div>
          <p> - Sets the specified player as the channel moderator.
          </p>
        </div>
        <div>
          <div><code>ChannelMute("channel", "name")</code></div>
          <p> - Turns off the specified player's ability to speak in a channel.
          </p>
        </div>

        <div>
          <div><code>ChannelUnban("channel", "name")</code></div>
          <p> - Unbans a player from a channel.
          </p>
        </div>
        <div>
          <div><code>ChannelUnmoderator("channel", "name")</code></div>
          <p> - Takes the specified user away from the moderator status.
          </p>
        </div>
        <div>
          <div><code>ChannelUnmute("channel", "name")</code></div>
          <p> - Unmutes the specified user from the channel.
          </p>
        </div>
        <div>
          <div><code>DisplayChannelOwner("channel")</code></div>
          <p> - Displays the owner of the specified channel in the default chat.
          </p>
        </div>
        <div>
          <div><code>EnumerateServerChannels()</code></div>
          <p> - Retrieves all available server channels (zone dependant).
          </p>
        </div>
        <div>
          <div><code>GetChannelList()</code></div>
          <p> - Retrieves joined channels.
          </p>
        </div>
        <div>
          <div><code>GetChannelName("channel" or index)</code></div>
          <p> - Retrieves the name from a specific channel.
          </p>
        </div>
        <div>
          <div><code>GetChatWindowChannels(index)</code></div>
          <p> - Get the chat channels received by a chat window.
          </p>
        </div>

        <div>
          <div><code>LeaveChannelByName("channel")</code></div>
          <p> - Leaves the channel with the specified name.
          </p>
        </div>
        <div>
          <div><code>ListChannelByName(channelMatch)</code></div>
          <p> - Lists members in the given channel to the chat window. -- Mjt 12:39, 19 June 2006 (EDT)
          </p>
        </div>
        <div>
          <div><code>ListChannels()</code></div>
          <p> - Lists all of the channels into the chat window.
          </p>
        </div>

        <div>
          <div><code>SetChannelOwner("channel", "name")</code></div>
          <p> - Sets the channel owner.
          </p>
        </div>
        <div>
          <div><code>SetChannelPassword("channel", "password")</code></div>
          <p> - Changes the password of the current channel.
          </p>
        </div>
      </div>

      <div>
        <div class="title">
          <h3>Unit Functions</h3>
          <p>These are functions which act on one or more units. Units are identified by UnitIds.</p>
        </div>

        <div>
          <div><code>AssistUnit("unit")</code></div>
          <p> - Instructs your character to assist the specified unit.
          </p>
        </div>

        <div>
          <div><code>DropItemOnUnit("unit")</code></div>
          <p> - Drops an item from the cursor onto a unit.
          </p>
        </div>
        <div>
          <div><code>FollowUnit("unit")</code></div>
          <p> - Follow an ally with the specified UnitID
          </p>
        </div>
        <div>
          <div><code>InviteToParty("unit")</code></div>
          <p> - Invite a unit to a party by its unit id (likely "target")
          </p>
        </div>
        <div>
          <div><code>IsUnitOnQuest(questIndex, "unit")</code></div>
          <p> - Determine if the specified unit is on the given quest.
          </p>
        </div>
        <div>
          <div><code>SpellCanTargetUnit("unit")</code></div>
          <p> - Returns true if the spell awaiting target selection can be cast on the specified unit.
          </p>
        </div>
        <div>
          <div><code>SpellTargetUnit("unit")</code></div>
          <p> - Casts the spell awaiting target selection on the specified unit.
          </p>
        </div>
        <div>
          <div><code>StartDuelUnit("unit")</code></div>
          <p> - Challenge a unit to a duel.
          </p>
        </div>
        <div>
          <div><code>TargetUnit("unit")</code></div>
          <p> - Selects the specified unit as the current target.
          </p>
        </div>
        <div>
          <div><code>UnitAffectingCombat("unit")</code></div>
          <p> - Determine if the unit is in combat or has aggro. (returns nil if "false" and 1 if "true")
          </p>
        </div>
        <div>
          <div><code>UnitArmor("unit")</code></div>
          <p> - Returns the armor statistics relevant to the specified unit.
          </p>
        </div>
        <div>
          <div><code>UnitAttackBothHands("unit")</code></div>
          <p> - Returns information about the unit's melee attacks.
          </p>
        </div>
        <div>
          <div><code>UnitAttackPower("unit")</code></div>
          <p> - Returns the unit's melee attack power and modifiers.
          </p>
        </div>
        <div>
          <div><code>UnitAttackSpeed("unit")</code></div>
          <p> - Returns the unit's melee attack speed for each hand.
          </p>
        </div>
        <div>
          <div><code>UnitBuff("unit", index[, showCastable])</code></div>
          <p> - Retrieves info about a buff of a certain unit.
          </p>
        </div>
        <div>
          <div><code>UnitCanAssist("unit", "otherUnit")</code></div>
          <p> - Returns true if the first unit can assist the second, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitCanAttack("unit", "otherUnit")</code></div>
          <p> - Returns true if the first unit can attack the second, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitCanCooperate("unit", "otherUnit")</code></div>
          <p> - Returns true if the first unit can cooperate with the second, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitCharacterPoints("unit")</code></div>
          <p> - Returns the number of unspent talent points for the specified unit -- usually 0.
          </p>
        </div>
        <div>
          <div><code>UnitClass("unit")</code></div>
          <p> - Returns the class name of the specified unit (e.g., "Warrior" or "Shaman").
          </p>
        </div>
        <div>
          <div><code>UnitClassification("unit")</code></div>
          <p> - Returns the classification of the specified unit (e.g., "elite" or "worldboss").
          </p>
        </div>
        <div>
          <div><code>UnitCreatureFamily("unit")</code></div>
          <p> - Returns the type of creature of the specified unit (e.g., "Crab").
          </p>
        </div>
        <div>
          <div><code>UnitCreatureType("unit")</code></div>
          <p> - Returns the classification type of creature of the specified unit (e.g., "Beast").
          </p>
        </div>
        <div>
          <div><code>UnitDamage("unit")</code></div>
          <p> - Returns the damage statistics relevant to the specified unit.
          </p>
        </div>

        <div>
          <div><code>UnitDefense("unit")</code></div>
          <p> - Returns the base defense skill of the specified unit.
          </p>
        </div>
        <div>
          <div><code>UnitExists("unit")</code></div>
          <p> - Returns true if the specified unit exists, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitFactionGroup("unit")</code></div>
          <p> - Returns the faction group id and name of the specified unit. (eg. "Alliance") - string returned is localization-independent (used in filepath)
          </p>
        </div>
        <div>
          <div><code>UnitHealth("unit")</code></div>
          <p> - Returns the current health, in points, of the specified unit.
          </p>
        </div>
        <div>
          <div><code>UnitHealthMax("unit")</code></div>
          <p> - Returns the maximum health, in points, of the specified unit.
          </p>
        </div>
        <div>
          <div><code>UnitInParty("unit")</code></div>
          <p> - Returns true if the unit is a member of your party.
          </p>
        </div>
        <div>
          <div><code>UnitInRaid("unit")</code></div>
          <p> - Returns 1 if unit is in your raid, nil if not.
          </p>
        </div>
        <div>
          <div><code>UnitIsCharmed("unit")</code></div>
          <p> - Returns true if the specified unit is charmed, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsCivilian("unit")</code></div>
          <p> - Returns true if the unit is a civilian NPC.
          </p>
        </div>
        <div>
          <div><code>UnitIsConnected("unit")</code></div>
          <p> - Returns 1 if the specified unit is connected or npc, nil if offline or not a valid unit.
          </p>
        </div>
        <div>
          <div><code>UnitIsCorpse("unit")</code></div>
          <p> - Returns true if the specified unit is a corpse, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsDead("unit")</code></div>
          <p> - Returns true if the specified unit is dead, nil otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsDeadOrGhost("unit")</code></div>
          <p> - Returns true if the specified unit is dead or a ghost, nil otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsEnemy("unit", "otherUnit")</code></div>
          <p> - Returns true if the specified units are enemies, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsFriend("unit", "otherUnit")</code></div>
          <p> - Returns true if the specified units are friends (PC of same faction or friendly NPC), false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsGhost("unit")</code></div>
          <p> - Returns true if the specified unit is a ghost, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsPVP("unit")</code></div>
          <p> - Returns true if the specified unit is flagged for PVP, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsPVPFreeForAll("unit")</code></div>
          <p> - Returns true if the specified unit is flagged for free-for-all PVP, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsPartyLeader("unit")</code></div>
          <p> - Returns true if the unit is the leader of its party.
          </p>
        </div>
        <div>
          <div><code>UnitIsPlayer("unit")</code></div>
          <p> - Returns true if the specified unit is a player character, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsPlusMob("unit")</code></div>
          <p> - Returns true if the specified unit is a mob, more powerful than its nominal level, false otherwise (e.g., "elite" mobs)
          </p>
        </div>
        <div>
          <div><code>UnitIsTapped("unit")</code></div>
          <p> - Returns true if the specified unit is tapped, false otherwise.
          </p>
        </div>
        <div>
          <div><code>UnitIsTappedByPlayer("unit")</code></div>
          <p> - Returns true if the specified unit is tapped by the player himself, otherwise false.
          </p>
        </div>
        <div>
          <div><code>UnitIsTrivial("unit")</code></div>
          <p> - Returns true if the specified unit is trivial (Trivial means the unit is "grey" to the player. false otherwise. </p>
        </div>
      </div>
    </article>
  </section>
  <section id="Useful_Addons" class="main-section">
    <header>Useful Addons</header>
    <article id="addons">
      <div><a href="https://legacy-wow.com/vanilla-addons/questie/" target="_blank">Questie</a>
        <p>A quest helper</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/atlasloot-enhanced/" target="_blank">AtlasLoot Enhanced</a>
        <p>UI Mod allowing for loot tables of bosses browse in-game</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/bagnon/" target="_blank">Bagnon</a>
        <p>A bag replacement addon</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/enemy-cast-bar/" target="_blank">Enemy Cast Bar</a>
        <p>Shows a replication of your targets cast bar.</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/gatherer/" target="_blank">Gatherer</a>
        <p>Gatherer is an addon for herbalists, miners and treasure hunters in World of Warcraft. It’s main purpose is to track the closest plants, deposits and treasure locations on you minimap.</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/cartographer/" target="_blank">Cartographer</a>
        <p>Powerful map addon</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/auctioneer/" target="_blank">Auctioneer</a>
        <p>Auction House UI replacement. Displays item info and analyzes auction data.</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/klhthreatmeter/" target="_blank">KLHThreatMeter</a>
        <p>Monitors and records your threat, and will list your threat in a table with other members of your party or raid group who are using the mod.</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/outfitter/" target="_blank">Outfitter</a>
        <p>Stores character equipment sets for easy change</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/atlas/" target="_blank">Atlas</a>
        <p>UI frames for dungeons and bosses loot</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/lazypig/" target="_blank">LazyPig</a>
        <p>Offers numerous gameplay improvements</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/decursive/" target="_blank">Decursive</a>
        <p>Assit with removing debuffs from your group and yourself, according your class ability.</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/big-wigs/" target="_blank">Big Wigs</a>
        <p>PVE raiding addon assisting with boss tactics. </p>
      </div>
    </article>
  </section>
  <section id="Credits_&_Useful_Links" class="main-section">
    <header>Credits & Useful Links</header>
    <article id="links">
      <p>Majority of the data in this guide is taken directly from the following sources:</p>
      <div><a href="https://vanilla-wow.fandom.com/wiki/Vanilla_WoW_Wiki" target="_blank">Vanilla WoW Wiki</a>
        <p>Emotes and functions commands have been drawn from this source</p>
      </div>
      <div><a href="https://forum.elysium-project.org/topic/40487-useful-vanilla-wow-1121-macros-by-wayleran/" target="_blank">Useful Vanilla WoW 1.12.1 Macros by Wayleran</a>
        <p>The macros sections is heavily extracted from this source</p>
      </div>
      <div><a href="https://legacy-wow.com/vanilla-addons/" target="_blank">Vanilla WoW Addons</a>
        <p>self explanatory </p>
      </div>
    </article>
  </section>
</main>
              
            
!

CSS

              
                :root {
  --lighter: hsl(268, 76%, 97%);
  --light: hsl(264, 100%, 91%);
  --purple: hsl(266, 64%, 64%);
  --dark: hsl(265, 60%, 35%);
  --darker: hsl(266, 100%, 16%);
  --red: hsl(9, 80%, 48%);
  --wnav: 300px;
  --hnav: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: arial;
  background: var(--lighter);
}

/* project requirements */

header {
  padding: 6px;
  font-size: 2em;
  font-weight: 900;
  color: white;
  background: var(--dark);
}
p {
  padding: 8px;
}
code {
  background: var(--light);
  border-radius: 4px;
  padding: 4px;
  color: var(--dark);
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
span {
  color: var(--red);
  font-size: 1.1em;
}

#navbar {
  z-index: 1;
  position: fixed;
  top: 0px;
  left: 0px;
  width: var(--wnav);
  height: var(--hnav);
  min-width: 200px;
  display: flex;
  flex-flow: column;
  background: var(--dark);
}
#navbar > header {
  text-align: center;
  min-width: 200px;
  text-shadow: 6px 0 6px var(--darker), -6px 0 6px var(--darker),
    0 -6px 6px var(--darker), 0 6px 6px var(--darker);
}
.nav-link {
  color: inherit; 
}
#navlist {
  display: flex;
  flex-flow: column;
  font-size: 1.4em;
}
#navlist > li {
  background: var(--light);
  border: 2px solid var(--dark);
  border-radius: 12px;
  color: var(--red);
  min-width: 140px;
  flex: 1 1 0px;
  padding: 8px 0 8px 12px;
}

#main-doc {
  position: absolute;
  margin-left: var(--wnav);
  margin-bottom: 110px;
}

#Guide_Summary>article>p:first-child {
  font-size: 1.2em;
  color: var(--red);
  text-indent: 1em;
}

@media (max-width: 1200px) {
  :root {
    --wnav: 25%;
  }
}
@media (max-width: 800px) {
  :root {
    --wnav: 100%;
    --hnav: 100px;
  }
  header {
    font-size: 1.8em;
  }
  #navbar > header {
    width: 200px;
    flex: 1 0 30%;
  }
  #navbar {
    height: initial;
    flex-flow: row wrap;
  }
  #main-doc {
    margin-left: initial;
    margin-top: var(--hnav);
  }
  #navlist {
    flex: 1 0 60%;
    flex-flow: row wrap;
    justify-content: center;
    text-align: center;
    font-size: 1.2em;
  }
  #navlist > li {
    padding: 4px;
    font-size: 0.9em;
  }
}

.main-section {
  padding: 0 12px;
  margin-bottom: 20px;
  border-top: 4px solid var(--dark);
}

.main-section > header {
  padding-left: 20px;
  width: 480px;
  margin: 0 auto 0.6em 2em;
}
@media (max-width: 800px) {
  .main-section > header {
    padding-left: 6px;
    margin: 0 auto 0.6em auto;
    width: 340px;
    max-width: 90%;
    font-size: 1.6em;
    text-align: center;
  }
}
@media (max-width: 400px) {
  .main-section > header {
    width: initial;
    max-width: none;
  }
}
 
/* Macros */
#macro > * {
  margin-bottom: 16px !important;
}

#macmain {
  display: flex;
  flex-flow: wrap;
  justify-content: space-evenly;
  width: 80%;
  margin: auto;
}
#macmain > * {
  flex: 1 0 60%;
}
#macmain > * > * {
  margin: 8px;
}
#macmain > div > div > code {
  display: inline-block;
}
#maclist {
  flex: 1 0 33%;
  display: flex;
  flex-flow: column;
  align-items: center;
}
#maclist > ul {
  min-width: 260px;
}
#maclist > h4 {
  text-align: center;
  color:var(--red);
}

.maclist {
  display: flex;
  flex-flow: wrap;
  border: 4px solid var(--purple);
  border-radius: 12px;
}
.maclist > h4 {
  flex-basis: 100%;
  background: var(--purple);
  color: var(--darker);
  padding: 8px;
  font-size: 1.3em;
  font-weight: normal;
  padding-left: 1em;
}
.maclist > div {
  display: flex;
  flex-flow: wrap;
  flex: 1 0 50%;
  min-width: 600px;
  border: 1px solid var(--purple);
  border-bottom: 6px solid var(--purple);
}
.maclist > div > * {
  flex: 1 0 50%;
  min-width: 300px;
}
.maclist > div > div > code {
  display: inline-block;
  margin: 4px;
}

@media (max-width: 1000px) {
  #macmain {
    width: 96%;
  }
}

#List_of_Emotes > p {
  width: 80%;
  margin: auto;
  margin-bottom: 12px;
  text-indent: 20px;
}
#table {
  display: flex;
  flex-flow: row wrap;
  border: 4px solid var(--purple);
  border-radius: 12px;
}
#table > * {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 280px;
  flex: 1 0 30%;
  border: 1px solid var(--purple);
}
#table > li > div {
  width: 120px;
  padding: 8px;
}
.desc {
  flex: 1 0 70%;
}

#functions {
  display: flex;
  flex-flow: column;
}
#functions > * {
  display: flex;
  flex-flow: row wrap;
  border: 4px solid var(--purple);
  border-radius: 12px;
  margin-top: 12px;
}

#functions > div > div {
  display: flex;
  flex: 1 0 30%;
  flex-flow: wrap;
  border: 1px solid var(--purple);
}
.title {
  flex-basis: 100% !important;
  border: none !important;
  padding: 8px !important;
  background: var(--purple);
}
.title > p {
  color: var(--lighter);
  border-left: 2px solid var(--darker);
}
#functions > div > div > div {
  flex:1 0 240px;
  padding: 8px;
}
#functions > div > div > p {
  flex: 1 0 260px;
  min-width: 260px;
}

.title > h3 {
  font-weight: normal;
  color: var(--darker);
  font-size: 1.4em;
  flex-basis: 30%;
  text-align: center;
}

#addons {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}
#addons > div {
  display: flex;
  flex-flow: column;
  border: 1px solid var(--purple);
  width: 300px;
  margin: 0 4px 8px 4px;
}
#addons > div > a {
  background: var(--light);
  font-size: 1.4em;
  color: var(--dark);
  text-align: center;
  line-height: 1.8em;
  margin: 0 32px;
}
#addons > div > p {
  text-indent: 20px;
}

#links {
  display: flex;
  flex-flow: column;
}
#links > p {
  font-size: 1.2em;
  color: var(--dark);
  margin-bottom: 12px;
}
#links > div {
  display: flex;
  flex-flow: wrap;
  border-bottom: 1px solid var(--red);
}
#links > div > p {
  flex: 1 0 70%;
}
#links > div > a {
  padding: 6px;
  width: 220px;
  color: var(--red);
}

@media (max-width: 630px) {
  .title > h3 {
    flex-basis: 100%;
  }
  .title > p {
    text-align: center;
    border-left: none;
  }

  .maclist > div {
    min-width: 300px;
  }
  .main-section {
    padding: 0 4px;
  }
  #List_of_Emotes > p {
    width: 98%;
  }

  :root {
    --hnav: 150px;
  }
  #navbar > header {
    flex-basis: 100%;
    font-size: 1.6em;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console