styles.css

body{
margin: 0;
background-image: url('test.jpg');
}
.container{
    margin: 5%;
    text-align: center;
}
.day {

    border:1px solid purple;
    text-align: center;
    font-size: 5vw;
    font-family: 'Nosifer', sans-serif;
    color: darkred;
    justify-content: center;
    margin: 5%;
    cursor: default;
    transform-origin: top;
    transition:all 0.7s cubic-bezier(0.42, 0, 0.22, 1.34);
    background: rgb(255, 192, 203, 1);
}

.card-text{
    font-size: 2.5vmin;
    margin-bottom: -0.1vmin;
        margin-top: 1vmin;
}

#advType{
    border-radius: 65px;
}




.doorOpen
{
    transform: perspective(900px) translateZ(0px) translateX(0px) translateY(0px) rotateX(75deg);
}




#app-calendar{
    margin-top: 1%;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
background: rgb(255, 192, 203, 0.5);

}

.day:hover {
    background-color: rgba(255,255,255,1);
}

.backDoor:nth-child(even) {
   rotate: -5deg;
   margin-right: 10%;
  }

  .backDoor:nth-child(odd) {
    rotate: 5deg;
   }
 

#title{
font-family: 'Playpen Sans', cursive;
color: palevioletred;
}

#advType{
    background-color: unset;
}

.tapeOn{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: rgba(239, 239, 239, 0.8);
    height: 5%;
    width: 75%;
}
.doorOpen .tapeOn{
    /* background: green;
    transition:all 0.7s cubic-bezier(0.42, 0, 0.22, 1.34)
 */

}

.tapeOff{
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: rgba(239, 239, 239, 1);
    height: 7%;
    width: 75%;
}

label, #advType{
    font-family: 'Playpen Sans', cursive;
    color: darkred;
}

/* background-image: url(https://m.media-amazon.com/images/M/MV5BNmE5NWQyYjktMmMzYi00YjY2LWFmNTUtMWQyMzcwNWM2NWYzXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_QL75_UX380_CR0,0,380,562_.jpg);
object-fit: fill;
    background-size: contain;
    background-repeat: no-repeat; */

    .movieImg{
        position: absolute;
        height: 80%;
        z-index: -1;
        left: 25%;
    }

   
    #popup-container{
        height: 40vw;
        margin-top: 1%;
        width: 90%;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background-color: rgb(96 95 127 / 0.8);
        position: absolute;
        z-index: 1000;
        left: 5%;
        visibility: hidden;
    }
    
    #popup{
        background-color: #ffffff;
        /* padding: 5% 10%; */
        padding: 5% 5% 5% 2%;
        display: flex;
        margin: auto;
        margin-top: 10%;
        width: 50%;
        border-radius: 15px;
        max-height: 40%;
        flex-direction: row-reverse;
    }

    .popup{
        background-color: #ffffff;
        padding: 20px 30px;
        width: 50%;
        border-radius: 15px;
    }
  
    .close-popup a{
        font-size: 2vmin;
        position: absolute;
        background-color: rebeccapurple;
        color: #fff;
        padding: 1%;
        font-weight: bold;
        text-decoration: none;
        border-radius: 10px;
        right: 23%;
        top: 25%;
    }

    .close-popup a:hover{
        background-color: rgba(102, 51, 153, 0.356);
        color: rebeccapurple;
    }


    .popup-btn{
        display: block;
        text-decoration: none;
        border: 2px solid rebeccapurple;
        padding:2%;
        /* padding: 5px 15px; */
        border-radius: 20px;
    font-size: 2vmin;
    color: rebeccapurple;
    margin: 2% auto;
    width: 45%;
    }
    .popup-btn:hover{
        background-color: rebeccapurple;
        color: #fff;
    }
    .popup .show {
        visibility: visible;
        animation: fadeIn 1s;

      }
      .card-title{
margin:0;
font-size: 3.2vmin;
      }
    .card-right-side{
        margin-left: 5%;
      }
   .card-img{
    max-height: 18vw;
   }