<style>

body{
background:#0a0a0a;
display:flex;
justify-content:center;
margin:0;
font-family:'Share Tech Mono', monospace;
}

.sqs-block-code{
padding:0 !important;
}

section{
padding:0 !important;
display:flex;
justify-content:center;
}

.receipt{
width:380px;
padding:34px 26px;
color:#cfcfcf;
position:relative;

background:
linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.85)),
url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

background-blend-mode:overlay;

box-shadow:
0 25px 50px rgba(0,0,0,.7),
inset 0 0 80px rgba(255,255,255,.05);

filter: contrast(95%) brightness(95%);

animation:paperMove 8s ease-in-out infinite;
}

@keyframes paperMove{

0%{transform:rotate(.35deg)}
50%{transform:rotate(-.35deg)}
100%{transform:rotate(.35deg)}

}

.receipt:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(
transparent 70%,
rgba(0,0,0,.35)
);
pointer-events:none;
}

.header{
text-align:center;
margin-bottom:22px;
opacity:.85;
}

.header h1{
font-size:22px;
letter-spacing:3px;
margin:0;
color:#e6e6e6;
}

.divider{
border-top:1px dashed rgba(255,255,255,.25);
margin:18px 0;
}

.song{
margin-bottom:18px;
opacity:.9;
display:none;
}

.song-title{
display:flex;
justify-content:space-between;
font-size:14px;
margin-bottom:5px;
letter-spacing:1px;
}

.services{
font-size:13px;
padding-left:10px;
}

.services a{
text-decoration:none;
color:#9f9f9f;
display:block;
padding:3px 0;
transition:.15s;
}

.services a:hover{
color:#ffffff;
background:rgba(255,255,255,.05);
padding-left:6px;
}

.footer{
text-align:center;
margin-top:22px;
font-size:12px;
opacity:.75;
}

.barcode{
font-size:18px;
letter-spacing:4px;
margin-top:10px;
opacity:.6;
}

</style>


<div class="receipt">

<div class="header">
<h1>Selections</h1>
</div>

<div class="divider"></div>

<div class="song">
<div class="song-title">
<span>CROSS THE LINE</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>NEXT</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>IF I COULD HAVE YOU NOW</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>NEXT</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>MORE THAN ONE</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>NEXT</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>MAD JUICY</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>NEXT</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>COOL AND DEADLY</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>NEXT</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>OVERTIME</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>NEXT</span>
<span>$0.00</span>
</div>
</div>

<div class="song">
<div class="song-title">
<span>GLORY</span>
<span>$0.00</span>
</div>
</div>

<div class="divider"></div>

<div class="footer">

TOTAL: $0.00<br>
THANK YOU FOR LISTENING

<div class="barcode">
|||| ||| |||| ||| ||
</div>

</div>

</div>


<script>

const songs = document.querySelectorAll(".song")

let i = 0

function printNext(){

if(i < songs.length){

songs[i].style.display = "block"

i++

setTimeout(printNext, 250)

}

}

window.onload = printNext

</script>