*{
    margin: 0;
    border: 0;
    padding: 0;
}
body{
    background: linear-gradient(135deg, #ffc9d7d1 25%, transparent 25%) -100px 0, linear-gradient(225deg, #ffc9d7d1 25%, transparent 25%) -100px 0, linear-gradient(315deg, #ffc9d7d1 25%, transparent 25%), linear-gradient(45deg, #ffc9d7d1 25%, transparent 25%);
    background-size: 200px 200px;
    background-color: #F5F5FF;
  
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
h1{
    font-family: cursive;
}
.container{
    position: relative;
    
    
}
.envelop{
    position: relative;
    background-color: #ff89a7;
    height: 33vmin;
    width: 55vmin;

    
}
.card{
    position: absolute;
    background-color:antiquewhite;
    height: 27vmin;
    width: 45vmin;

    display: flex;
    align-items: center;
    justify-content: center;
    left: 5vmin;
    top: 1vmin;
    
    animation: slide-rev 0.2s ease-out;
}

.msg{
  top: 4.5vmin;
    position: absolute;
    font-size: 1.5vmin;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.msg .hbd{
  font-size: larger;
}
.hrt{
    font-size: 6vmin;
    position: absolute;
    bottom: 1vmin;
    animation: beat 0.5s infinite alternate linear;

}
@keyframes beat {
    from{
        transform: scale(.7);
    }
    to{
        transform: scale(1);
    }
}
.btn{
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  font-size: 2.7vmin;
  padding: 1vmin 2vmin;
  margin: 2.1vmin;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
 

}

.yes {
  background-color: #ff5580;
  color: white;
}
.no {
  background-color: #909090;
  color: rgb(255, 255, 255);
}
.ofcourse{
  background-color: #ff5580;
  color: white;

}


.lid {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 132px 27.4vmin 0 27.4vmin;
    border-color: #ff89a7 transparent transparent transparent;
  
    top: 0;
    transform-origin: top;
    animation: open-rev 2s;

 }
 .container:hover .lid {
    animation: open 0.5s;
    animation-fill-mode: forwards;
  }
  
.container:hover .card {
    animation: slide 0.2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }
  @keyframes slide {
  100% {
    transform: translatey(-15vmin);
    z-index: 2;
  }
}

@keyframes open {
    100% {
      transform: rotatex(180deg);
    }
  }

@keyframes open-rev {
  from {
    transform: rotatex(-180deg);
  }
}

@keyframes slide-rev {
  from {
    transform: translatey(-15vmin);
  }
}
.cover1 {
    position: absolute;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 33.1vmin 0 0 55vmin;
    border-color: transparent transparent transparent #ffa9c0;
    z-index: 100;
    top: 0;
    left: 0;
 }

 .cover2 {
    position: absolute;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 33.1vmin 55vmin 0 0;
    border-color: transparent #ffa9c0 transparent transparent;
    z-index: 1000;
    top: 0;
    right: 0;
 }

 .container{
    perspective: 500px;
    animation: bounce 2s ease-in-out infinite;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
 }
@keyframes bounce {
  0%, 100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-20px);
  }
  
}

.newpage{
  margin-top: 0vmin;
  height: 3vmin;
  width: 35vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadein 1.5s ease-in;
}
@keyframes fadein{
  from {
    opacity: 0;
    transform: translateY(0);
  }
  to{
    opacity: 1;
    transform: translateY(1);
  }
}
.newpage h2{
  font-size: 2.3vmin;
}
.shadow{
    position: relative;
    top: 5vmin;
    border-radius: 50%;
    opacity: .7;
    height: 2vmin;
    width: 55vmin;
    background-color: #e8c5d0;
}