body{
    background-image: url("https://ppsk-images.pages.dev/zetes-warehouse.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}


#heartbeat-button {
  background-color: #014380; /* Zetes Dark Blue */
  color: white;
  width: 220px; /* Doubled width */
  height: 220px; /* Doubled height */
  line-height: 200px; /* Doubled line-height */
  text-align: center;
  text-decoration: none;
  font-size: 40px;
  border-radius: 50%; /* Make it circular */
  border: none;
  cursor: pointer;
  animation: heartbeat 1.5s infinite; /* Apply heartbeat animation */
  transition: background-color 0.3s;
    }


@keyframes heartbeat {

  
    0%{
        transform: scale(1); /* Back to initial size */
    }
    50%{
        transform: scale(1.2); /* Max size */
    }

}


#passwordParagraph{
    font-weight:bold;
    font-size:2.5em;
    color:#014380;
}



rect{
    fill: none;
    stroke: url(#gradient);
    stroke-width: 30px;
    stroke-dasharray: 2160;
    animation-name: countdown;
    animation-duration: 60s;
    animation-timing-function: linear;
    width:310px;
    height:310px;
    
}
       
.rectangle{
    position: absolute;
    width:310px;
    height:310px;

}
   
.main-stop {
    stop-color: purple;
}
.alt-stop {
    stop-color: orange;
}
      

@keyframes countdown {
    from{
        stroke-dashoffset: 0;
    }
    to{
        stroke-dashoffset: 2160;
    }
}

#imgDiv{
    height: 300px;
    position: relative;
}

#QR{
    position: absolute;
}