:root {
  --largura-tabela: 90%;
  --cor-texto: white;
  --cor-fundo: rgba(0, 0, 0, 0);
  --cor-fundo-2: rgb(102, 102, 0, 0.8);
  --altura-tabela: 80%;
  --tamanho-fonte: 2.3rem;
  --borda: 2px solid black;
  --peso-fonte: regular;
  --transforma-texto-produto: capitalize;
  --texto-cabeca: uppercase;
  --tamanho-fonte-cabeca: 2.5rem;
}

html {
  min-height: 100vh;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {

  background-color: black;

  padding: 0;

  margin: 0;

  overflow: hidden;

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  min-height: 100%;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

table {
  border-collapse: collapse !important;
}

.tabelaprodutos {
  font-size: 3.2rem;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

td,
th {
  border: var(--borda);
  font-weight: var(--peso-fonte);
  padding: 2px 5px 2px 5px;
}

th {
  text-transform: var(--texto-cabeca);
}

th.catnome {
  font-size: var(--tamanho-fonte-cabeca);
}

td.preco {
  text-align: center;
  padding: 0 0.6rem 0 0.6rem;
}

td.vazio {
  color: rgba(0, 0, 0, 0);
}

#tabela {
  margin-top: 200px;
  padding: 0 5px 0 5px;
  display: flex;
  height: var(--altura-tabela);
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.divnome {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.spannome {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.divpreco {
  display: table;
  table-layout: fixed;
  min-width: max-content;
  text-align: center;
}

#video {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  max-height: 100%;
  max-width: 100%;
  margin: auto;
}

#imagem {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  max-height: 100vh;
  right: 0;
  bottom: 0;
}