<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="search" title="TROM Search" type="application/opensearchdescription+xml" href="opensearchdescription.xml">
    <style>
      * { margin: 0; }
      html, body { width: 100%; height: 100%; }
body {
  background: url('https://www.tromsite.com/wp-content/uploads/2018/09/tromsite-bg-pattern-light-5.png') !important; background-repeat: repeat !important; background-attachment: fixed !important;
  height: auto !important;}


#search:before {
    content: url("https://www.tromsite.com/wp-content/uploads/2021/02/trom-logo-dark.png");
    transform: scale(.6);
    display: block;
    width: 100%;
margin: 0 auto;}

      #search-box {
        position: fixed;
        left: 50%;
        top: 1rem;
        transform: translateX(-50%);
      }
      
      #info {
        color: black;
        text-align: center;
        font-weight: bold;
      }
      
      #info.error { color: #7b7b7b; margin-top: 20px;font-size: 13px;font-style: italic;}

      #search input[name="query"] {
        width: 500px;
        height: 40px;
        background-color: white;
        border: 2px solid darkgrey;
        border-radius: 4px;
        box-sizing: border-box;
      }
      
      #search {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #search-inputs {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }

      #search input[type="submit"] {
        height: 40px;
        background-color: #bc5151;
        color: white;
        font-weight: bold;
        border: none;
        border-radius: 4px;
        margin-left: 10px;
        cursor: pointer;
        padding: 0 10px;
        box-sizing: border-box;
        width: 20%;
      }

      .search-radio-buttons {
        display: flex;
        justify-content: center;
        width: 100%;
      }

      #search label {
        margin-left: 5px;
        margin-right: 15px;
      }
    </style>
    <script type="module" src="index.js"></script>
  </head>
  <body>
    <div id="search-box">
      <form id="search">
        <div id="search-inputs">
          <input name="query" type="text" placeholder="Query">
          <input type="submit" value="Search">
        </div>
        <div class="search-radio-buttons">
          <input type="radio" id="search-category-all" name="category" value="all" checked>
          <label for="search-category-all">All</label>
          <input type="radio" id="search-category-images" name="category" value="images">
          <label for="search-category-images">Images</label>
          <input type="radio" id="search-category-news" name="category" value="news">
          <label for="search-category-news">News</label>
          <input type="radio" id="search-category-videos" name="category" value="videos">
          <label for="search-category-videos">Videos</label>
          <input type="radio" id="search-category-files" name="category" value="files">
          <label for="search-category-videos">Files</label>
        </div>
      </form>
      <p id="info"></p>
    </div>
  </body>
</html>