Lotus

<!DOCTYPE html>
  <html>
    <head>
      <title id="changepage">
        LotusCraft - Home
      </title>
    <style>
      body {
        background-color: #f1f1f1;
      }
      #home, #about, #discord {
        border-radius: 5%;
        border-width: 1px;
        border-left-color: black;
        border-right-color: black;
        border-bottom-color: black;
        border-top-color: black;
        background-color: #00dbef;
        font-family: Arial;
        font-size: 2.4em;
        transition-duration: 1s;
        display: inline-block;
        margin: 8px;
        padding: 8px;
        letter-spacing: 3px;
        text-align: center;
      }
      #home:hover, #about:hover, #discord:hover {
        cursor: pointer;
        background-color: #639fff;
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

      }
      #g {
        font-family: Arial;
        font-size: 2em;
        color: black;
        margin-bottom: 6px;
        padding: 6px;
        text-indent: 30px;
        letter-spacing: 3px;
      }
    </style>
    </head>
    <body>
      <div id="navcontainer">
          <center>
            <b>
              <p id="pnavbutton">

                    <button id="home" onClick="home()">
                      Home
                    </button>
                    <button id="about" onClick="about()">
                      About Us
                    </button>
                    <button id="discord" onClick="discord()">
                      Discord
                    </button>
                  <hr>
                </p>
              </b>
          </center>
        </div>
      <br>
        <div>
          <center>
            <b>
              <p id="g">
              es
            </p>
        <script>
            function about() {
              var abouttitle = "LotusCraft - About us";
              var aboutus = "Welcome to the About us page! Here you can find everything about the server and the owners!"
              document.getElementById("changepage").innerHTML = abouttitle;
              document.getElementById("g").innerHTML = aboutus;
            }
            function home() {
              var hometitle = "LotusCraft - Home";
              document.getElementById("changepage").innerHTML = hometitle;
            }
            function discord() {
              alert("You are being taken to the discord channel!");
              window.location="https://discord.gg/TDzcWu5"
            }
            var g = "Welcome to the official website for the Minecraft server LotusCraft!";
            document.getElementById("g").innerHTML = g;

        </script>
    </body>
  </html>