*{
    box-sizing: border-box;
}

html{
    height: 100%;
    overflow: hidden;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#container{
    background: url(../img/apagado.png) center center no-repeat;
    width: 354px;
    height: 95px;
    padding: 3px 0 0 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.4px;
    position: relative;
}

#container::after{
    content: url(../img/overlay.png);
    position: absolute;
    top: -64px;
    left: -115px;
}

.barra{
    opacity: 0; 
    transition: opacity 0.3s ease-in-out; 
}

.barra.acesa {
    opacity: 1; 
}


@keyframes animacao-glow {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(255, 180, 50, 0.2));
  }

  50% {
    filter: drop-shadow(0 0 5px rgba(255, 140, 0, 0.4));
  }
}

.barra.acesa img {
  animation: animacao-glow 2s ease-in-out infinite;
}