:root{
    --shadow: 0 16px 32px rgba(0,0,0,.35);
}

html,body{
    height:100%;
    background:#808080;
}

.stage{
    position:relative;
    width:800px;
    height:600px;
    aspect-ratio:3/4;
    border-radius:24px;
    margin: 0 auto;
}

/* cloth */
.cloth{
    position:absolute;
    inset:5% 10% 5% 10%;
    transform:rotate(0deg);
    background:#f2efe9;
    border-radius:28px;
    box-shadow:var(--shadow);
    padding: 8px;
}

.item{position:absolute}

/* WATCH */
.watch{
    left:15%;
    top:25%;
    width:120px;
    height:560px;
    transform:rotate(-14deg)scale(0.5);
    transform-origin: 0 0;
}
.strap{
    position:absolute;
    left:15px;
    top:0;
    bottom:0;
    width:90px;
    border-radius:8px;
    background:#1f4a3c;
    box-shadow:var(--shadow);
}
.holes{
    position:absolute;
    top:148px;
    left:55px;
    width:10px;
    height:10px;
    border-radius:10px;
    background:#0f1317;
}
.holes1{
    position:absolute;
    top:108px;
    left:55px;
    width:10px;
    height:10px;
    border-radius:10px;
    background:#0f1317;
}
.holes2{
    position:absolute;
    top:68px;
    left:55px;
    width:10px;
    height:10px;
    border-radius:10px;
    background:#0f1317;
}
.button{
    position:absolute;
    top:248px;
    left:120px;
    width:10px;
    height:20px;
    border-radius:3px;
    background:#1f4a3c;
}
.face{
    position:absolute;
    top:200px;
    left:-3px;
    width:126px;
    height:126px;
    border-radius:16px;
    background:#0f1317;
    box-shadow:var(--shadow)
}
.buckle{
    position:absolute;
    bottom:18px;
    left:8px;
    width:104px;
    height:18px;
    border-radius:4px;
    background:#aeb6bf
}

/* CASIO TV */
.tv{
    right:2%;
    top:3%;
    width:340px;
    height:360px;
    transform:rotate(18deg)scale(0.5);
    border-radius:18px;
    background:#657083;
    box-shadow:var(--shadow);
    transform-origin: 0 0;
}
.casiotext{
    position:absolute;
    right:120px;
    top:5px;
    font-weight:900;
    font-size:30px;
    font-family:ui-serif,Georgia,serif
}
.screen{
    position:absolute;
    left:56px;
    top:42px;
    width:250px;
    height:180px;
    border-radius:12px;
    background:#0f151b
}
.badge{
    position:absolute;
    left:58px;
    bottom:56px;
    height:22px;
    width:140px;
    background:#dde7ff;
    border-radius:4px
}
.btn{
    position:absolute;
    left:220px;
    bottom:64px;
    width:64px;
    height:20px;
    border-radius:8px;
    background:#21262c
}

/* PLAYING CARD */
.card{
    right:14%;
    bottom:7%;
    width:250px;
    height:330px;
    transform:rotate(26deg) scale(0.5);
    transition: transform 200ms ease;
}
.card:hover{
    transform: rotate(26deg) scale(0.55);
}
.paper{
    position:absolute;
    inset:0;
    border-radius:14px;
    background:#fff;
    box-shadow:var(--shadow)
}
.heart{
    position:absolute;
    font-size: 25px;
    right:18px;
    bottom:35px;
    transform:rotate(180deg);
}
.big{
    transform: scale(2) translate(-40px,-45px);
    font-size: 50px;
}
.a{
    position:absolute;
    font-size: 25px;
    right:20px;
    bottom:8px;
    top:auto;
    font-weight:900;
    color:#d23a3a;
    transform:rotate(180deg);
    font-family:ui-serif,Georgia,serif
}

/* FLOPPIES */
.floppy{
    right:18%;
    bottom:18%;
    width:320px;
    height:260px;
    transform:rotate(12deg) scale(0.5);
}
.disk{
    position:absolute;
    inset:0;
    border-radius:12px;
    background:#fffdf6;
    box-shadow:var(--shadow)
}
.label{
    position:absolute;
    right:18px;
    top:0px;
    width:270px;
    height:160px;
    border-radius:6px;
    background:#FFFDD0
}
.floppywords{
    position:absolute;
    left:80px;
    top:10px;
    font-weight:0;
    font-size:15px;
    font-family:Garamond
}
.floppywords2{
    position:absolute;
    left:80px;
    top:30px;
    font-weight:0;
    font-size:12px;
    font-family:Garamond
}
.metal{
    position:absolute;
    right:68px;
    top:70%;
    width:170px;
    height:80px;
    border-radius:6px;
    background:#c0c0c0;
}

/* CD + CASE */
.cdcase{
    left:4%;
    bottom:8%;
    width:220px;
    height:220px;
    transform:rotate(12deg) scale(0.5);
}
.case{
    position:absolute;
    inset:0;
    border-radius:12px;
    background:#242833;
    box-shadow:var(--shadow)
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.cd{
    position:absolute;
    left:24px;
    top:16px;
    width:180px;
    height:180px;
    border-radius:50%;
    background-color:#cfd3df;
    box-shadow:var(--shadow);
    animation: spin-slow 12s linear infinite; transform-origin: 50% 50%;
    background-image: linear-gradient(transparent 50%, black calc(50% + 1px), transparent calc(50% + 2px));
}
.hub{
    position:absolute;
    left:78px;
    top:80px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#e9edf6
}
.sticker{
    position:absolute;
    left:6px;
    bottom:6px;
    width:120px;
    height:34px;
    background:#fff;
    border-radius:4px;
    box-shadow:var(--shadow);
    padding: 6px 10px; 
}
.dot{
    position:absolute;
    right:8px;
    bottom:8px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#d8b56a;
}

/* XEROX */
.xerox{
    left:18%;
    top:8%;
    width:220px;
    height:80px;
    transform:rotate(-24deg) scale(0.5);
}
.ticket{
    position:absolute;
    inset:0;
    background:#e9e0c9;
    border-radius:6px;
    box-shadow:var(--shadow);
}
.ticket::before{
    content:"";
    position:absolute;
    left:-6px; top:18px;
    width:12px; height:12px;
    border-radius:50%;
    background:#808080;
}
.outline{
    left:5px;
    top:5px;
    width:210px;
    height:70px;
    background:#e9e0c9;
    outline: 1px solid black;
}
.xeroxword{
    position:absolute;
    right:10px;
    top:10px;
    font-weight:0;
    font-size:57px;
    font-family:Helvetica
}