body {
    background:black;
    color:white;
    font-family:monospace;
    margin:0;
    

}


.box {
    min-height:250vh;

    background-image:url("https://i.pinimg.com/736x/19/92/ec/1992ec986d9f8eaee3c31c6a13174e42.jpg");
    background-size:cover;

    /* filter:contrast(1.1); */

    position:relative;
    
    outline:5px solid red;
    
}

.tape {

    width:96px;
    height:528px;

    border-radius:5px;
    
    overflow:hidden;

    box-shadow:5px 5px 10px black;

    position:absolute;

    transition:.3s;
    
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;

}

.tape1{
    left:150px;
    top:180px;
    transform:rotate(3deg);
}

.tape2{
    left:260px;
    top:240px;
    transform:rotate(-2deg);
}

.tape3{
    left:360px;
    top:180px;
    transform:rotate(-2deg);
}

.tape4{
    left:444px;
    top:200px;
    transform:rotate(-1deg);
}

.tape5{
    left:550px;
    top:170px;
    transform:rotate(2deg);
}

.tape6{
    left:650px;
    top:180px;
    transform:rotate(-3deg);
}

.tape7{
    left:750px;
    top:150px;
    transform:rotate(0deg);
}

.tape8{
    left:850px;
    top:202px;
    transform:rotate(5deg);
}

.tape9{
    left:950px;
    top:175px;
    transform:rotate(-2deg);
}

.tape10{
    left:1035px;
    top:190px;
    transform:rotate(-1deg);
}

.tape11{
    left:140px;
    top:725px;
    transform:rotate(-1deg);
}

.tape12{
    left:250px;
    top:777px;
    transform:rotate(3deg);
}

.tape13{
    left:360px;
    top:730px;
    transform:rotate(-2deg);
}

.tape14{
    left:450px;
    top:745px;
    transform:rotate(6deg);
}

.tape15{
    left:555px;
    top:700px;
    transform:rotate(-2deg);
}

.tape16{
    left:670px;
    top:720px;
    transform:rotate(3deg);
}

.tape17{
    left:780px;
    top:690px;
    transform:rotate(-1deg);
}

.tape18{
    left:875px;
    top:747px;
    transform:rotate(1deg);
}

.tape19{
    left:990px;
    top:720px;
    transform:rotate(10deg);
}

.tape20{
    left:333px;
    top:1050px;
    transform:rotate(88deg);
}

.tape21{
    left:333px;
    top:1140px;
    transform:rotate(94deg);
}

.tape22{
    left:825px;
    top:1120px;
    transform:rotate(60deg);
}

.spine {

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:5px;

    pointer-events:none;

}

.checkout-area {

    position:absolute;

    left:50%;

    top:300px;

    transform:translateX(-50%);

    width:300px;

    height:200px;

}

.display-area {
    position:absolute;

    left:50%;
    top:1400px;

    width:300px;
    height:200px;
}

.tape.selected {
  
  outline:5px solid red;

    position:fixed;

    left:50%;
    bottom:-111px;
    top:auto;

    transform:
    translateX(-50%)
    rotate(90deg)
    scale(1.15);

    z-index:100;

    box-shadow:
    15px 20px 30px black;

}

#cover {

    width:150px;

    height:250px;
  

    object-fit:cover;

}

#overlay{

    position:fixed;

    inset:0;

    background:rgba(20,18,16,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

}

#overlay.open{

    opacity:1;

    visibility:visible;

}

#movie-popup {

    background:#e7d6b5;

    color:#111;

    width:500px;

    padding:30px;
    padding-top:10px;
    padding-bottom:10px;

    border-radius:5px;

    box-shadow:
    10px 10px 30px black;

    transform:translateY(-100px);

    opacity:0;

    transition:.5s;

}


.movie-info {

    display:flex;

    align-items:flex-start;

    gap:25px;
    
    flex:1;

}


#cover {

    width:200px;

    height:300px;

    object-fit:cover;

}


.movie-text {

    text-align:left;

    flex:1;

}

#year {

    font-size:14px;
    
    font-style:italic;

    margin-top:-10px;

}

.button-row {

    display:flex;

    justify-content:flex-end;

    gap:15px;

    margin-top:-30px;

}


#rent-button {

    background:#8b0000;

    color:white;

    border:none;

    padding:10px 20px;

    font-family:monospace;

    cursor:pointer;

}


#close-popup {

    background:#222;

    color:white;

    border:none;

    padding:10px 20px;

    font-family:monospace;

    cursor:pointer;

}

#overlay.open #movie-popup{

    transform:translateY(-50px);

    opacity:1;

}

.tape:not(.selected):hover {

    transform:
    translateY(-20px)
    rotate(0deg)
    scale(1.1);

}