@font-face {
    font-family: "Cantarell";
    src: url('Cantarell.otf');
}

:root {
  --preto: #111111;
  --branco: #fffadf;
  --cinza: #cecece;
  --azul: #4096f5;
  
  --borda-normal: solid 2px var(--cinza);
  --borda-destaque: solid 2px var(--azul);
  --raio-borda: 15px;
	--espaco-1: 10px;
	--espaco-2: 20px;
  --tamanho-fonte: 20px;
  --altura-4: 2.4rem;
}

* {
  font-family: 'Cantarell', 'Segoe UI', 'Tahoma', sans-serif;
  font-size: var(--tamanho-fonte);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--branco);
  background-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

#barra {
  position: absolute;
  pointer-events: auto;
  user-select: none;
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: row;
  gap: var(--espaco-2);
  padding: var(--espaco-1) var(--espaco-2);
  overflow-x: visible;
  overflow-y: visible;
  align-items: center;
  justify-content: start;
  background-color: var(--preto);
  color: var(--branco);
}

input, button {
  display: flex;
  padding: var(--espaco-1) var(--espaco-2);
  background-color: transparent;
  border: var(--borda-normal);
  border-radius: var(--raio-borda);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden; 
  text-overflow: ellipsis;
}

input:focus, input:hover, button:hover {
  cursor: pointer;
  border: var(--borda-destaque);
  outline: none;
}

#entrada_cor_sol{
  display: none;
}

#botao_cor_sol {
	width: auto;
	height: var(--altura-4);
	aspect-ratio: 1/1;
	text-align: center;
	background-color: rgb(255,255,255);
	border: var(--borda-normal);
	border-radius: var(--raio-borda);
}