<div id="standby{{RandomID}}" style="position:absolute;inset:0;width:100%;height:100%;min-width:100%;min-height:100%;box-sizing:border-box;background-size: 40px 40px;
  background-image: radial-gradient(circle, {{
    BackgroundAccent
  }} 1px, rgba(0, 0, 0, 0) 1px);background-color: {{
    BackgroundColor
  }};font-family: 'Ubuntu Mono', monospace;
  color: {{TextColor}};display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;">

  <h1 style="text-align: center;color:{{TextColor}};font-size:4em;width: 100%;position: absolute;top: 0;">{{
    IntroData.LoadScreenTitle
  }}</h1>
  <div id="fluffmessages{{RandomID}}" style="position: absolute;top: 0;left: 0;">
    
<script>
let lines=[
{{#each IntroData.LoadScreenFluff}}
"{{this}}",
{{/each}}
]
let div=document.getElementById("fluffmessages{{RandomID}}")
var logRandomLine = (arr) => {
if (arr.length === 0) {
return;
}

var randomIndex = Math.floor(Math.random() * arr.length);
var randomLine = arr[randomIndex];
arr.splice(randomIndex, 1);
div.innerHTML += `<p style="margin:0;padding:0;">${randomLine}</p>`;
};

// Set an interval to log a random line every 50ms for ten times
var intervalCount = 0;
var intervalId{{RandomID}} = setInterval(() => {
logRandomLine(lines);
intervalCount++;
if (intervalCount >= 20) {
document.getElementById("standby{{RandomID}}").style.display="none"
document.getElementById("briefingcontainer{{RandomID}}").style.display="block"
clearInterval(intervalId{{RandomID}});
}
}, 35);
</script>
  </div>
  </div>