/*font*/
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Poppins:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Momo+Signature&display=swap');


/*background*/
body{
  background-image: url("/images/background.gif");
  background-repeat: repeat-x repeat-y;
  margin: 0%;
  cursor: url("/images/normalCursor.gif"), auto;
}


.header{
  background: url(/images/strawberryBorderUp.png) no-repeat top center;
  height: 20vw;
  background-size: 100%;
}

.data_container
{
  padding: 0% 15% 0% 15%;
  text-align: center;
  background: url(/images/containerBg.png) no-repeat top center;
}

.data_letter{
  padding: 5% 35% 5% 35%;
  font-family: "Cedarville Cursive", cursive;
  font-weight: 400;
  font-style: normal;
  font-size:x-large;
  color: #eb7a5a;
}

.data_letter--content{
  font-weight: 200;
  font-style: normal;
  font-size:large;
  color: #f79478;
}

.clickText{
  font-family: "Momo Signature", cursive;
  font-weight: 100;
  font-style: normal;
  font-size:x-small;
  color: #81bd51;
}

.image-btn{
  background: none;
  border: none;
  padding: 0;
  cursor: url("/images/selectCursor.gif"), auto;
  width: 100%;
  display: grid; /* Enables CSS Grid */
  place-items: center; /* Centers both horizontally and vertically */
}

.image-btn img{
  width: 20%;
  display: block; /* to remove extra space below image */
}

/*Envelope*/


#envelope {
    position: relative;
    width: 280px;
    height: 180px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-left: auto;
    margin-right: auto;
    top: 150px;
    background-color: #f2f6f9;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.front { 
    position: absolute;
    width: 0;
    height: 0;
    z-index: 3;
}
.flap {
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    border-bottom: 82px solid transparent; /* a little smaller */
    border-top: 98px solid rgb(252, 240, 240); /* a little larger */
    transform-origin: top;
    pointer-events: none;
}
.pocket {
    border-left: 140px solid #ffe7e7;
    border-right: 140px solid #ffe7e7;
    border-bottom: 90px solid #fff7f7;
    border-top: 90px solid transparent;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.letter {
    position: relative;
    background-color: #fff;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 90%;
    top: 5%;
    border-radius: 6px;
    box-shadow: 0 2px 26px rgba(0,0,0,.12);
}
.letter:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: 
        linear-gradient(180deg, 
        rgba(255,255,255,0.00) 25%, 
        rgba(215,227,239,0.70) 55%, 
        rgba(215,227,239,1.00) 100%);
}
.words {
    position: absolute;
    left: 10%;
    width: 80%;
    height: 14%;
    background-color: #EEEFF0;
}
.words.line1 {
    top: 15%;
    width: 20%;
    height: 7%;
}
.words.line2 {
    top: 30%;
}
.words.line3 {
    top: 50%;
}
.words.line4 {
    top: 70%;
}
.open .flap {
    transform: rotateX(180deg);
    transition: transform .4s ease, z-index .6s;
    z-index: 1;
}
.close .flap {
    transform: rotateX(0deg);
    transition: transform .4s .6s ease, z-index 1s;
    z-index: 5;
}
.close .letter {
    transform: translateY(0px); 
    transition: transform .4s ease, z-index 1s;
    z-index: 1;
}
.open .letter {
    transform: translateY(-60px);
    transition: transform .4s .6s ease, z-index .6s;
    z-index: 2;
}

.envlope-wrapper {
  height: (180px + 200px);
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: url("/images/selectCursor.gif"), auto;
}

/*Modal box*/
/* The Modal (background) */
.modal {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  width: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6rem 3rem;
  border: 3px solid rgb(180, 65, 67);
  border-radius: 5px;
  background: white;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
  display: none;
  opacity: 0;
  transition:
    opacity 2s,
    display 2s allow-discrete;
}

.showing {
  opacity: 1;
  display: block;
}

@starting-style {
  .showing {
    opacity: 0;
  }
}

.message {
  font-size:1.1rem;
  margin-bottom: 1.6rem;
  margin-top: 0;
  color: rgb(228, 79, 79);
  font-family: "Momo Signature", cursive;
}

.btnModal {
  color:rgb(228, 79, 79);
  font-family: "Momo Signature", cursive;
  font-size: inherit;
  background: white;
  padding: 0.3rem 3.4rem;
  border: 3px solid rgb(234, 105, 105);
  margin-right: 2.6rem;
  box-shadow: 0 0 0 rgb(225, 94, 94);
  transition: all 0.2s;
}

.btnModal:last-child {
  margin: 0;
}

.btnModal:hover {
  box-shadow: 0.4rem 0.4rem 0 rgb(231, 52, 52);
  transform: translate(-0.4rem, -0.4rem);
  cursor: url("/images/bunnyPixel.gif"), auto;
}

.btnModal:active {
  box-shadow: 0 0 0 black;
  transform: translate(0, 0);
}

.btnModal:disabled, .btnModal:disabled:hover{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  transform: none;
  box-shadow: none;
}

/*confettiiii*/
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    pointer-events: none;
}

/*Media query*/
/*Mobile - 0 to 767, Tablet - 768 to 1023, Desktop - 1024+*/

@media (max-width: 767px){

  .data_container
  {
    background-size: 40% 100%;
    padding: 1%;
  }

  .data_letter{
  font-size:small;
  }

  .data_letter--content{
    font-size: x-small;
  }
}

@media (min-width: 768px){
  .data_container
  {
    padding: 1%;
    background-size: 30% 100%;
  }

  .data_letter{
  font-size:medium;
  }

  .data_letter--content{
    font-size: small;
  }
}

@media (min-width: 992px){

  .data_container
  {
    padding: 1%;
    background-size: 35% 100%;
  }

  .data_letter{
  font-size:x-large;
  }

  .data_letter--content{
    font-size: large;
  }
}