<!DOCTYPE HTML>
<html>
  <head>
    <style>
      html,body {
        margin: 0;
        padding: 0;
        background-color: black;
      }
      body {
        width: 100vw;
        height: 100vh;
      }
      .overlay2 {
        width: 100%;
        height: 100%;
        position: absolute;
        filter: blur(40px);
        background-position: center;
        background-size: cover;
        background-image: url('@wallpaper@');
      }
      .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgb(27,45,89);
        opacity: 0.1;
      }
      .container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        position: absolute;
        font-family: Cantarell;
        flex-direction: column;
      }
      .title {
        font-size: 32px;
      }
      .search {
        padding: 20px;
        width: 300px;
        border: none;
        outline: none;
        background-color: black;
        color: grey;
        font-size: 16px;
      }
    </style>
    <script>
      /*window.onload = () => {
        const mainInput = document.getElementById("main-input");
        mainInput.focus();
        mainInput.value = "";
        mainInput.addEventListener("keypress", function(event) {
          if (event.key === "Enter") {
            event.preventDefault();
            window.location.href = `https://google.com/search?q=${mainInput.value}`;
          }
        });
      };*/
    </script>
    <!-- for now -->
    <link rel="icon" href="https://www.google.com/favicon.ico">
  </head>
  <body>
    <div class="overlay2"></div>
    <div class="overlay"></div>
    <div class="container">
      <!-- <div class="title">Good Morning!</div>
      <div style="height: 20px"></div>
      <input class="search" id="main-input"/> -->
    </div>
  </body>
</html>