body{
    margin:0;
    background:#111;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    cursor:url("./images/dime-cursor.png") 32 32, auto;
    overflow:hidden;
    position:relative;
}

/* background image behind the ticket */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:url("./images/page-background-purple-v2.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    filter:blur(6px);
    transform:scale(1.05);
    opacity:0.55;
    z-index:0;
}

/* dark overlay */
body::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);
    z-index:1;
}

.ticket{
    position:relative;
    width:min(100vw, 1366px);
    aspect-ratio:1366 / 768;
    z-index:2;
}

.background{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    z-index:1;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}

.scratch {
  position: absolute;
  z-index: 2;
}

/* slightly bigger so no pink peeks through */
.scratch.films {
  left: 8.8%;
  top: 61.9%;
  width: 11.7%;
  height: 21.0%;
}

.scratch.dp {
  left: 26.6%;
  top: 61.9%;
  width: 11.7%;
  height: 21.0%;
}

.scratch.ac {
  left: 44.4%;
  top: 61.9%;
  width: 11.7%;
  height: 21.0%;
}

.scratch.gaff {
  left: 62.1%;
  top: 61.9%;
  width: 11.7%;
  height: 21.0%;
}

.scratch.about {
  left: 79.9%;
  top: 61.9%;
  width: 11.7%;
  height: 21.0%;
}