/*@font-face {
  font-family: 'Kingthings-Clarity';
  src: url('Kingthings-Clarity.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body {
  font-family: 'Kingthings-Clarity', sans-serif;
}*/

@font-face {
  font-family: 'Eight-Bit-Dragon2';
  src: url('Eight-Bit-Dragon2.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html, body {
  font-family: 'Eight-Bit-Dragon2', sans-serif;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

:root {
  --bg: #fff;
  --fg: #3d3d3d;
  --header-bg: #3d3d3d;
}

body.dark {
  --bg: #3d3d3d;
  --fg: #eee;
}

body {
  background-color: var(--bg);
  color: var(--fg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #3d3d3d;
    --fg: #eee;
  }
}

img {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* fallback */
  image-rendering: -moz-crisp-edges; /* firefox */
}

body {
    margin: 0;
    padding: 5px;
    font-size: 11px;
  }
  
  .container {
    margin: 0 auto;
    padding: 5px; 
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  h1 {
    text-align: center;
  }
  
  .upload-section, .query-section, .result-section {
    margin-bottom: 10px;
  }
  
  textarea {
    width: 100%;
    height: 100px;
    margin-top: 5px;
  }
  
  button {
    margin-top: 5px;
    padding: 5px 7px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  table {
    width: 55vw; /* or 100%, up to container width */
    max-width: 55vw;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 4px;
    text-align: left;
    max-width: 200px;
    word-wrap: break-word; /* doesn't exist lol */
    word-break: break-word; /* use this instead */
    overflow-wrap: break-word;
    white-space: normal; /* allow wrapping */
    background-color: var(--header-bg); /* you didn't do this */
  }
  
  
  

    #mainBuild {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 45vw;
    z-index: 9999;
    box-shadow: -2px 0 10px rgba(0,0,0,0.4);
    transition: width 0.3s ease;
    overflow: auto;
  }

  #mainBuild.collapsed {
    width: 0;
    overflow: hidden;
  }

  #toggleBuild {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000; /* higher than #mainBuild */
  }

  #toggleBuild.shifted {
    right: 45vw; /* same as mainBuild width */
  }

  #mainBuild table {
    width: 45vw; /* or 100%, up to container width */
    max-width: 45vw;
    border-collapse: collapse;
  }