  <nav>
    <div class="container" style="width: 40%">
      <img alt="VanillaLauncher Logo" style="width: 95px; height: 95px;" src="./assets/logo.webp" />
      <div class="logo fancyText">Vanilla Launcher</div>
    </div>
    <div class="button selectedButton" onclick="changeSelectedButton(this)">Home</div>
    <div class="button" onclick="changeSelectedButton(this)">Settings</div>
    <div class="button" onclick="changeSelectedButton(this)">Downloads</div>
    <div class="container" style="flex-direction: row-reverse; width: 40%" onclick="history.back();">
      <div class="box"><img style="width: 18px; height: 18px;" alt="backButton" src="./assets/x.png" /></div>
    </div>
  </nav>

  <home class="fadeInFirst">
    <div class="container" style="height: 470px; justify-content: center">
      <div class="launch"></div>
      <button class="button launchbutton" style="top: 250px" onclick="launch();">
        <span style="opacity: 1; z-index: 10; font-family: 'Panton'">Launch 1.8.9</span>
      </button>
    </div>
    <div class="container" style="height: 75px; background-color: #141312"></div>
    <span class="subheading">Recent News</span>

    <div class="container newsContainer">
      <div class="news">
        <div id="newsImage1"></div>
        <div id="newsContent1" class="container newsContent">
          This is a VanillaMC or Eaglercraft Client news placeholder.
        </div>
        <div class="container newsFooter">
          <span>Posted by <span id="newsAuthor1">Eaglercraft</span></span>
          <div id="newsDate1" class="container" style="flex-direction: row-reverse">
            Loading...
          </div>
        </div>
      </div>
      <div class="news">
        <div id="newsImage2"></div>
        <div id="newsContent2" class="container newsContent">
          This section is for the Eaglercraft Launcher news. It is a placeholder while it loads.
        </div>
        <div class="container newsFooter">
          <span>Posted by <span id="newsAuthor2">EaglercraftX</span></span>
          <div id="newsDate2" class="container" style="flex-direction: row-reverse">
            Loading...
          </div>
        </div>
      </div>
      <div class="news">
        <div id="newsImage3"></div>
        <div id="newsContent3" class="container newsContent">
          This is Eaglercraft Client news from Lax1dude. Eaglercraft is unblocked in schools. Placeholder.
        </div>
        <div class="container newsFooter">
          <span>Posted by <span id="newsAuthor3">Minecraft</span></span>
          <div id="newsDate3" class="container" style="flex-direction: row-reverse">
            Loading...
          </div>
        </div>
      </div>
    </div>
    <div class="container" style="height: 75px; background-color: #141312"></div>
    <span class="subheading">Servers</span>
    <div class="container info">
      <div class="container" style="
          position: absolute;
          width: 90%;
          height: 50px;
          background-color: #DA5A57;
          justify-content: space-between;
          font-size: 1.5em;
          font-weight: 400;
          border-radius: 10px 10px 0 0;
          z-index: 100;
        ">
        <div class="container" style="width: 40%; margin-left: 15px; ">#1</div>
        VanillaMC
        <div class="container" style="width: 40%; flex-direction: row-reverse; margin-right: 15px;">
          <div class="dropdown">
            <span id="hidemobile">Alternative</span> IPs <div class="arrow"> <img alt="downArrow"
                style="width:0.75em; height: 0.75em;" src="./assets/down.svg"> </div>
            <div class="dropdown-content">
              vanillacraftsmp.us.to
              <br>
              vanillamc.tech
              <br>
              vanillacraftsmp.uk.to
              <br>
              vanillacraft.minecraft.pe
              <br>
              vanillacraftsmp.404.mn
              <br>
              vanillamc.boxiq.com
              <br>
              vanillamc.cbu.net
              <br>
              vanillamc.ens.org
              <br>
              th.orns.net
            </div>
          </div>
        </div>
      </div>
      <div class="container" style="
          position: relative;
          top: 50px;
          height: 200px;
          width: 90%;
          background-color: var(--darkgrey-color);
          border-radius: 0 0 10px 10px;
          align-items: start;
        ">
        <div class="container" style="width: 50%;">
          <img alt="VanillaLauncher Logo" src="./assets/logo.webp" style="width: 95px; height: 95px;" />
          <div class="container"
            style="width: 80%; flex-direction: column; justify-content: center; align-items: start;">
            <span style="font-size: 2em; font-weight: 400">VanillaMC
              <span id="hidemobile"><span style="color: grey">|</span> Factions</span></span>
            <span style="font-size: 1.5em; font-weight: 300; color: #ffff55">[wss://] vanillamc.me</span>
          </div>
        </div>
      </div>
    </div>
    <span class="subheading">About</span>
    <div class="container info" style="height: 150px;">
      <div class="container" style="width: 90%; height: 100%; overflow: scroll; background-color: var(--darkgrey-color); border-radius: 10px; align-items: flex-start; padding: 15px">
          <h3>Eaglercraft is a project developed by <a href="https://github.com/lax1dude">Lax1dude</a>. Eaglercraft uses <a href="https://teavm.org/">TeaVM</a> to compile java code into javascript, allowing Minecraft to run in all major web browsers. Eaglercraft is the original 1.5.2 version, while EaglercraftX is the name of the 1.8.8 port. It is completely free and <a href="https://git.eaglercraft.rip/eaglercraft">open source.</a> Eaglercraft servers use <a href="https://github.com/lax1dude/eagl3rxbungee">EaglerXBungee, or EaglerBungee</a> to allow websocket connections from Eaglercraft Clients.</h3>
      </div>
    </div>
  </home>
  <settings>
    <div class="navbarfiller"></div>
    <div class="container allSettingsContainer">
      <div class="container" style="
  justify-content: space-between;">
        <span style="font-family: 'Panton'; font-size: 2em; margin: 36px 0 32px 0;">Preferences</span>
        <button class="button saveSettingsButton" style="height: 45px;" onclick="saveSettings();">Save Changes</button>
      </div>
      <span class="settingCategory">Game Settings</span>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <span style="font-weight: bold; font-size: 1.5em;">Client</span>
          <span class="settingExplanation">Select the client you want to use
            for the game. WASM versions have better performance</span>
        </div>
        <div class="optionContainer" style="margin-bottom: 36px;">
          <select id="clientDropdown">
            <option value="vanilla">Vanilla 1.8.8</option>
            <option value="wasm">Vanilla 1.8.8 (WASM, more FPS)</option>
            <option value="resent">Resent</option>
            <option value="starlike">Starlike</option>
            <option value="1.9">1.9</option>
            <option value="eaglerforge">EaglerForge</option>
          </select>
        </div>
      </div>
      <span class="settingCategory">Web Settings</span>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <label for="tabName" style="font-weight: bold; font-size: 1.5em;">Tab name</label>
          <label for="tabName" class="settingExplanation">Set the title of this tab</label>
        </div>
        <div class="optionContainer">
          <div class="container" style="width: max-content; justify-content: center;">
            <input type="text" id="tabName" />
          </div>
        </div>
      </div>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <label for="tabIcon" style="font-weight: bold; font-size: 1.5em;">Tab icon</label>
          <label for="tabIcon" class="settingExplanation">Input a url to an image for the tab icon</label>
        </div>
        <div class="optionContainer">
          <div class="container" style="width: max-content; justify-content: center;">
            <input type="text" id="tabIcon" />
          </div>
        </div>
      </div>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <span style="font-weight: bold; font-size: 1.5em;">about:blank</span>
          <span class="settingExplanation">Open this tab in a blank tab</span>
        </div>
        <div class="optionContainer">
          <div class="container" style="width: max-content; justify-content: center;">
            <div class="button" id="aboutBlankButton"
              style="padding: 0px; margin: 0px; background-color: var(--blue-color);" onclick="aboutBlank();">Open</div>
          </div>
        </div>
      </div>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <span style="font-weight: bold; font-size: 1.5em;">Auto about:blank</span>
          <span class="settingExplanation">Instantly opens about:blank if you don't want to leave
            this page in your history. Doesn't work in firefox</span>
        </div>
        <div class="optionContainer" style="margin-bottom: 36px;">
          <div class="container" style="width: max-content; justify-content: center;">
            <div id="autoaboutblank" class="button" style="padding: 0px; margin: 0px; user-select: none;"
              onclick="toggleAutoAboutBlank();">Disabled</div>
          </div>
        </div>
      </div>
    </div>
  </settings>
  <downloads>
    <div class="navbarfiller"></div>
    <span class="subheading" style="top: 32px;">Downloads</span>
    <div id="downloads" class="container">
    </div>
  </downloads>
  <footer style="position: fixed; bottom: 0; width: 100%; z-index: 100;">
    <div class=" container" style="margin-top: 30px">
      <span style="width: 35%; text-align: start">&copy; 2024 VanillaMC * v1.1.0</span>
      <span id="c" style="color: white"></span>
      <div class="container" style="flex-direction: row-reverse; width: 35%">
        <p>Not affiliated with Mojang, AB.</p>
      </div>
    </div>
  </footer>