:root {
  /* */
  --color: #222;
  --color-border: #222;
  --color-font: #fff;
  --color-light: #363636;
  
  --color-yellow: #ffe08a;
  --color-green: #00d1b2;
  --color-black: #0a0a0a;
  
  --border: 1px solid #999;
  --border-radius: 8px;
  --gap: 2px;
  --dt-width: 100vw;
  --keyboard-size: calc(var(--dt-width) * .9);
  --key-size: calc(var(--keyboard-size) / 6);
}

* {
  position: relative;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
  background-color: var(--color);
  color: var(--color-font);
}

#jogo {
  width: calc(100vw - (var(--gap) * 3));
  margin: auto;
  padding: var(--gap);
}

/* LOGO */
#jogo figure img {
  width: 100%;
  object-fit: cover;
}

/* TABULEIRO */
.tabuleiro {
  width: 100%;
}

#tabuleiro {
  width: var(--keyboard-size);
  margin: calc(4 * var(--gap)) auto;
}

#tabuleiro tr {
  text-align: center;
  display: flex;
  justify-content: center;
}

.tag {
  width: var(--key-size);
  height: var(--key-size);
  line-height: var(--key-size);
  background-color: var(--color-light);
  border-radius: var(--border-radius);
  border: var(--border);
  margin: calc(var(--gap));
  font-size: calc(var(--key-size) * .5);
}

.tag.is-warning {
  background-color: var(--color-yellow);
  color: var(--color-black);
}

.tag.is-black {
  background-color: var(--color-black);
  color: var(--color-font);
}

.tag.is-primary {
  background-color: var(--color-green);
  color: var(--color-font);
}

/* TECLADO */
button {
  font-size: 1.2em;
  cursor: pointer;
  width: 100%;
  height: 2.4em;
  line-height: 2.4em;
  display: flex;
  justify-content: center;
  border: var(--border);
  border-radius: var(--border-radius);
}

#teclado .table {
  width: 100%;
}

#teclado .table tr {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  width: 100%;
}

#teclado .table tr td {
  display: block;
  flex-grow: 1;
}

/* DESKTOP */
@media (min-width: 500px) {
  :root {
    --dt-width: 500px;
    --keyboard-size: calc(var(--dt-width) * .8);
  }
  #jogo {
    max-width: var(--dt-width);
  }
}

.pontuacao {
  width: 60%;
}

.barras {
  width: 80%;
}

.barra {
  background-color: rgb(158, 158, 158);
  height: 2em;
  width: 100%;
  border: 1px solid #fff;
  font-family: Arial;
}

.buttons {
  width: 70%; 
}

.button.is-dark {
  background-color: #363636;
  border-color: transparent;
  color: #fff;
}

.button.is-dark:hover, .button.is-dark.is-hovered {
  background-color: #fff;
  border-color: transparent;
  color:  #363636;
}

.button.is-light {
    background-color: whitesmoke;
    border-color: transparent;
    color: rgba(0, 0, 0, 0.7);
  }
  
.button.is-light:hover, .button.is-light.is-hovered {
  background-color: #eeeeee;
  border-color: transparent;
  color: rgba(0, 0, 0, 0.7);
}

.button.is-light.is-outlined {
  background-color: transparent;
  border-color: whitesmoke;
  color: whitesmoke;
}
  
.button.is-light.is-outlined:hover, .button.is-light.is-outlined.is-hovered, .button.is-light.is-outlined:focus, .button.is-light.is-outlined.is-focused {
  background-color: whitesmoke;
  border-color: whitesmoke;
  color: rgba(0, 0, 0, 0.7);
}

.button.is-fullwidth {
  display: flex;
  width: 100%;
}

.button.is-primary {
  background-color: #00d1b2;
  border-color: whitesmoke;
  color: #fff;
}
  
.button.is-primary:hover, .button.is-primary.is-hovered {
  background-color: #eeeeee;
  border-color: whitesmoke;
  color: #040404;
}

.section {
  height: 100%;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: space-between;
}

.alerta {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: space-between;
}

.notification {
  background-color: whitesmoke;
  border-radius: 4px;
  position: relative;
  padding: 1.25rem 2.5rem 1.25rem 1.5rem;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: space-between;
}

.notification.is-dark {
  background-color: #000000d0;
  color: #fff;
}