/* Use Google's hosted "Open Sans" font as display font in button */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600");

body {
  font-family: "Open Sans", Roboto, "Helvetica Neue", Helvetica, Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}

.container {
  height: 350px;
  width: 600px;
  box-shadow: 0 0 25px -6px rgb(0 0 0 / 12%);
}

.envelope {
  border-top: 175px solid transparent;
  border-left: 300px solid #8da19f;
  border-bottom: 175px solid #899d9b;
  border-right: 300px solid #859a98;
}

.flip {
  top: 0;
  left: 0;
  border-top: 195px solid #79908e;
  border-left: 300px solid transparent;
  border-bottom: 155px solid transparent;
  border-right: 300px solid transparent;
}

.flip-open {
  animation: flipOpen .4s ease-in forwards;
}

.flip-close {
  animation: flipClose .4s ease-in forwards;
}

.letter {
  top: 0px;
  left: 10px;
  height: 350px;
  width: 580px;
  background: #F8FAFC;
}

.letter-open {
  top: -110px;
  transition: .4s ease-in;
}

.letter-close {
  top: 0px;
  transition: .4s ease-in;
}

.letter-content {
  top: 40px;
  left: 40px;
  height: 15px;
  width: 375px;
  background: #E2E8F0;
  border-radius: 4px;
}

.letter-content:before,
.letter-content:after {
  position: absolute;
  left: 0px;
  content: '';
  height: 100%;
  background: #E2E8F0;
  border-radius: 4px;
}

.letter-content:before {
  top: 30px;
  width: 200px;
}

.letter-content:after {
  top: 60px;
  width: 275px;
}

.wax-seal {
  width: 100px;
  height: auto;
}


.shaking-animation {
  animation: shaking 5s infinite;
}



@keyframes flipOpen {
  0% {
    transform: rotateX(0deg);
    transform-origin: center top;
  }

  100% {
    transform: rotateX(180deg);
    transform-origin: center top;
  }
}

@keyframes flipClose {
  0% {
    transform: rotateX(180deg);
    transform-origin: center top;
  }

  100% {
    transform: rotateX(0deg);
    transform-origin: center top;
  }
}



@keyframes shaking {
  50% {
    transform: rotate(0deg);
  }

  55% {
    transform: rotate(5deg);
  }

  57% {
    transform: rotate(-5deg);
  }

  59% {
    transform: rotate(5deg);
  }

  61% {
    transform: rotate(-5deg);
  }

  63% {
    transform: rotate(0deg);
  }
}



@media (max-width: 640px) {
  .container {
    height: 200px;
    width: 350px;
    box-shadow: 0 0 25px -6px rgb(0 0 0 / 12%);
  }

  .envelope {
    border-top: 100px solid transparent;
    /* border-left: 175px solid #F1F5F9;
    border-bottom: 100px solid #EFF3F7;
    border-right: 175px solid #EDF1F5; */
    border-left: 175px solid #8da19f;
    border-bottom: 100px solid #899d9b;
    border-right: 175px solid #859a98;
  }

  .flip {
    top: 0;
    left: 0;
    /* border-top: 100px solid #E2E8F0; */
    border-top: 100px solid #79908e;
    border-left: 175px solid transparent;
    border-bottom: 100px solid transparent;
    border-right: 175px solid transparent;
  }

  .flip-open {
    animation: flipOpen .4s ease-in forwards;
  }

  .flip-close {
    animation: flipClose .4s ease-in forwards;
  }

  .letter {
    top: 0px;
    left: 10px;
    height: 200px;
    width: 320px;
    background: #F8FAFC;
  }

  .letter-open {
    top: -60px;
    transition: .4s ease-in;
  }

  .letter-close {
    top: 0px;
    transition: .4s ease-in;
  }

  .letter-content {
    top: 30px;
    left: 30px;
    height: 10px;
    width: 260px;
    background: #E2E8F0;
    border-radius: 4px;
  }

  .letter-content:before,
  .letter-content:after {
    position: absolute;
    left: 0px;
    content: '';
    height: 100%;
    background: #E2E8F0;
    border-radius: 4px;
  }

  .letter-content:before {
    top: 25px;
    width: 120px;
  }

  .letter-content:after {
    top: 50px;
    width: 200px;
  }

  .wax-seal {
    width: 70px;
    height: auto;
  }
}

@media (min-width: 768px) {}

@media (min-width: 1024px) {}

@media (min-width: 1280px) {}

@media (min-width: 1536px) {}