html
{
  height: 100%;
}
body
{
  margin: 0;
  padding: 0;
  background: linear-gradient(#111,#000);
}


.visor
{
  --sombra: /*#0109FF*/ #5E00FF;
  margin: auto;
  width: calc(100% - 10px);
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px #333 solid;
  color: #fff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: inset 0 0 500px var(--sombra);
  border: 1px var(--sombra) solid;
  background: #401D7C
}

.visor h1
{
  word-break: break-all;
  font-size: 45px;
  color: #eee;
  text-shadow: 0 0 10px #0109FF
}
.botoes
{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  color: #fff;
  padding: 0 10px;
}

.botoes button
{
  --sombra: #0109FF;
  -webkit-tap-highlight-color: transparent;
  --tema: #222;
  color: #fff;
  border: none;
  border-radius: 70%;
  padding: 0;
  font-size: 27px;
  cursor: pointer;
  border: 1px var(--sombra) solid;
  animation: neon 1s linear alternate infinite;
  box-shadow: inset 0 0 45px var(--sombra)
}
/*

@keyframes neon
{
  0%
  {
    box-shadow: inset 0 0 15px #0109FF
  }
 100%
 {
   box-shadow: inset 0 0 45px #0109FF
 }
}
*/

.botoes button.clicado,
.botoes button:active
{
  font-size: 15px!important;
}

.botoes button.del
{
  font-family: Material Simbolo;
  text-transform: lowercase;
  --sombra: #FF082D
}

.botoes button.operadores
{
 --sombra: #FF5E08;
}


.botoes button.igual,
.botoes button.c
{
 --sombra:  #0B73B1;
}