Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mek's Hub</title>
    <link rel="icon" href="./favicon.ico" />
    <style>
      @font-face {
        font-family: 'Ink Free';
        src: url(../src/assets/fonts/Inkfree.ttf);
      }

      @font-face {
        font-family: 'Macondo';
        src: url(../src/assets/fonts/Macondo-Regular.ttf);
      }

      :root {
        --background-color: #1A1423;
        --background-color-2: #242228;
        --primary-color: #372549;
        --secondary-color: #774C60;
        --accent-color: #B75D69;
        --text-color: #EACDC2;
        --fontA: "Ink Free";
        --fontB: "Macondo";
      }

      body {
        background-color: #1A1423;
        font-family: var(--fontA);
      }

      .main-container {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1.4rem;
        padding: 10px;
        border: 1px solid var(--accent-color);
        border-radius: 10px;
        width: 70vw;
        height: 80vh;
      }

      #app-icon {
        width: 300px;
        height: 150px;
        border-radius: 10px;
      }

      #title {
        font-size: 2rem;
        font-weight: bold;
        font-style: italic;
        color: var(--text-color);
        text-shadow: 2px 3px 4px var(--accent-color);
        letter-spacing: 3px;
      }

      #body-text {
        font-size: 1rem;
        color: var(--text-color);
        text-shadow: 2px 3px 4px var(--accent-color);
        letter-spacing: 3px;
        word-spacing: 1px;
      }
    </style>
  </head>
  <body>
    <div class="main-container">
      <img src="../src/assets/images/app-icon.jpg" id="app-icon" />
      <h2 id="title">Loading Mek's Hub</h2>
      <span id="body-text">"Loading Mek's Hub... Please Wait..."</span>
    </div>
  </body>
</html>