@import url('https://fonts.googleapis.com/css?family=Sacramento');

#card {
   height:500px;
   width:800px;
   margin:5em auto;
   position: fixed;
  top: -15px;
   left: 25%;
   display:flex;
   visibility:hidden;
}
#card h2 {
   font-size:3em;
   margin:0;
   color:pink;
   text-align: center;
}
#card p {
   font-size: 1.5em;
   text-align: justify;
   padding-left: 30px; /* Espacio en blanco a la izquierda */
   padding-right: 30px; /* Espacio en blanco a la derecha */
}


.side {
   background:#eee;
   height:550px;
   width:400px;
/*    border:1px solid red; */
   padding:10px;
}
.side.one {
   width:320px;
   transform:skew(10deg,20deg);
   background:linear-gradient(90deg, #fff, #fff 40%, #ddd);
}
.side.two {
   transform:skew(10deg,-15deg);
   background:linear-gradient(-90deg, #fff, #fff 40%, #f0f0f0);
}

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   font-family: 'Sacramento', cursive;
   background-color: #cdf98c;
   overflow: hidden;
 }
 
 .valentines-day {
   position: relative;
   cursor: pointer;
 }
 
 .envelope {
   position: relative;
   filter: drop-shadow(0 0 25px rgba(0,0,0,.3));
 }
 
 .envelope:before {
   content:"";
   position: absolute;
   width:254px;
   height:254px;
   background-color: #e2e2e2;
   transform: rotate(-45deg);
   border-radius: 0 15px 0 0;
   left:-37px;
   top:-82px;
 }
 
 .envelope:after {
   content:"";
   position: absolute;
   background-color: #f3f3f3;
   width:360px;
   height:225px;
   left:-90px;
   top:45px;
 }
 
 .heart {
   position: relative;
   background-color: #e01911;
   display: inline-block;
   height: 180px;
   top:50px;
   left:0;
   transform: rotate(-45deg);
   width:180px;
   filter: drop-shadow(0 -10px 25px rgba(0,0,0,.3));
   transition: .5s;
 }
   
 .heart:before, .heart:after {
   content:"";
   background-color: #e01911;
   border-radius:50%;
   height: 180px;
   width: 180px;
   position: absolute;
   }
   
 .heart:before {
   top:-100px;
   left:0;}
   
 .heart:after {
   left:100px;
   top:0;}
 
 .front {
   position: absolute;
   width:0;
   height:0;
   border-right: 190px solid #f3f3f3;
   border-top: 113px solid transparent;
   border-bottom: 113px solid transparent;
   top:44px;
   left:80px;
   z-index:4;
 }
 
 .front:before {
   content:"";
   position: absolute;
   width:0;
   height:0;
   border-left: 190px solid #f3f3f3;
   border-top: 113px solid transparent;
   border-bottom: 113px solid transparent;
   top:-113px;
   left:-170px;
 }
 
 .front:after {
   width:0;
   height:0;
   position: absolute;
   content:"";
   border-bottom: 150px solid #ffffff;
   border-right:180px solid transparent;
   border-left: 180px solid transparent;
   top:-36px;
   left:-170px;
 }
 
 .text {
   position: absolute;
   font-family: arial;
   letter-spacing:5px;
   text-align: center;
   color: white;
   z-index:2;
   top:60px;
   left:15px;
   transition: .5s;
 }
 
 .valentines-day:hover .heart {
   transform: translateY(-50px) rotate(-45deg);
 }
 
 .valentines-day:hover .text {
   transform: translateY(-50px);
 }