* {
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: "IQOSW01-Bold";
  background: #d2d2d2;
  
}

#app {
  height: 100%;
  display: flex;
  background-color: rgb(255 253 251);
  flex-direction: column;
  
  transform: translate3d(0, 0, 0);
  overflow: hidden;
}
#app #open-history {
  height: 80px;
  width: 80px;
  position: fixed;
  top: 0;
  left: 0;
}
#app #history {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #FFF;
  z-index: 100;
  overflow-y: auto;
  display: none;
}
#app #history .close {
  height: 80px;
  width: 80px;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}
#app #history table {
  width: 80%;
  margin-left: 10%;
  text-align: left;
  margin-top: 80px;
}
#app #history table thead tr {
  background-color: rgba(0, 0, 0, 0.05);
}
#app #history table thead th {
  padding: 1em;
}
#app #history table tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}
#app #history table tbody td {
  padding: 1em;
}
#app #history table tbody td:nth-child(1) {
  color: #666;
}
#app #history table tbody td:nth-child(2) {
  color: #d63031;
}
#app .pick-letter-text {
    /*color: #34303d;
    font-size: 2.2em;
    text-align: left;
    line-height: 2em;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.3s ease;
    padding-left: 48px;
    background-image: url(./img/adali.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right 24px center;*/
    color: #34303d;
    font-size: 2.2em;
    text-align: center;
    line-height: 2em;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1;
}
#app .envelopes {
  display: grid;
  grid-template-columns: 148px 148px 148px 148px 148px;
  justify-content: space-between;
  align-items: center;
  padding: 48px;
  padding-top: 0;
  flex-grow: 1;
}
#app .envelope, #app .big-envelope {
  padding-bottom: 64.28571429%;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: rgb(0 209 210);
  height: 0;
  width: 148px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 25px 20px -20px, rgba(0, 0, 0, 0.2) 0 0 4px;
}

#app .envelopes > .envelope:last-child{
    display: none;
}


#app .envelope .body, #app .big-envelope .body {
  border-left: 74px solid rgb(0 209 210);
  border-right: 74px solid rgb(0 209 210);
  border-bottom: 48px solid rgb(3 220 221);
  border-top: 47px solid transparent;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  position: absolute;
  left: 0;
  top: 0;
}
#app .envelope .flap, #app .big-envelope .flap {
  border-left: 74px solid transparent;
  border-right: 74px solid transparent;
  border-bottom: 47px solid transparent;
  border-top: 58px solid rgb(1 191 192);
  transform-origin: top;
  position: absolute;
}
#app .envelope .flap:after, #app .big-envelope .flap:after {
  content: "";
  position: absolute;
  height: 32px;
  width: 32px;
  left: -14px;
  top: -20px;
  //background-image: url(./img/flower.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
  transform:rotate(var(--rotation-rand))
}
#app .big-envelope {
  position: absolute;
  width: 400px;
  height: 257px;
  padding: 0;
  left: 0;
  top: 0;
  transform-origin: top left;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  transform: scale(0.37);
  transition: all 0.5s ease;
  background-color: rgb(1 191 192);
}
#app .big-envelope .body {
  border-left: 200px solid rgb(0 209 210);
  border-right: 200px solid rgb(0 209 210);
  border-bottom: 128px solid rgb(3 220 221);
  border-top: 128px solid transparent;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 1;
}
#app .big-envelope .hearts {
  top: 100px;
  display: none;
}
#app .big-envelope .hearts img {
  position: absolute;
  top: 50%;
  right: 0;
  height: 50px;
  z-index: 1;
}
#app .big-envelope .hearts img:nth-child(1) {
  right: 10%;
  height: 50px;
  transform: rotate(15deg);
  transition: all 3.5s ease;
}
#app .big-envelope .hearts img:nth-child(2) {
  right: 15%;
  height: 80px;
  transition: all 3s ease;
}
#app .big-envelope .hearts img:nth-child(3) {
  right: 20%;
  height: 30px;
  transform: rotate(-15deg);
  transition: all 2.5s ease;
  
}
#app .big-envelope .message {
  background-color: #fffdfb;
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
  position: absolute;
  border-radius: 12px;
  box-shadow: 2px -2px 0 #efefef;
  z-index: 1;
  transition: all 1s ease-in-out;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
}
#app .big-envelope .message h2 {
  font-size: 1.2em;
  margin: 0;
  color: #34303d;
  padding-top: 24px;
  font-family: "IQOSW05-Regular";
}
#app .big-envelope .message p {
  display: block;
  font-size: 1.5em;
  margin: 0;
  padding: 0;
  padding-top: 32px;
  color: #34303d;
}
#app .big-envelope .flap {
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-bottom: 128px solid transparent;
  border-top: 155px solid rgb(1 191 192);
  transition: all 0.8s ease-out;
  z-index: 1;
  perspective-origin: top;
}
#app .big-envelope .flap:after {
    height: 89px;
    width: 89px;
    left: -40px;
    top: -54px;
    transition: all 0.3s ease;
}
#app .big-envelope.focused {
  transform: scale(1) translate3d(calc((100vw - 400px) / 2), calc((100vh - 257px) / 1.5), 0) !important;
  transform-origin: center;
}
#app .big-envelope.pop-heart .flap:after {
  transform: scale(1.5);
  opacity: 0;
}
#app .big-envelope.open .flap {
  transform: rotateX(-180deg) perspective(400px);
  z-index: 0;
}
#app .big-envelope.open .hearts img {
  top: -70vh;
}
#app .big-envelope.message-out .message {
  top: -50%;
}

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
}

.bg img {
    position: absolute;
    left: 0;
    height: 400px;
    z-index: -1;
    transform-origin: bottom center;
    animation-name: rotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    display: none;
}

.bg img:nth-child(1) {
    left: 8%;
    --rotation-rand: 30deg;
    bottom: -124px;
}

.bg img:nth-child(2) {
    left: -9%;
    animation-delay: -2s;
    --rotation-rand: 35deg;
    bottom: -82px;
    
}

.bg img:nth-child(3) {
    left: 72%;
    --rotation-rand: -20deg;
    animation-delay: -1s;
    bottom: -150px;
}

.bg img:nth-child(4) {
    left: 100%;
    --rotation-rand: -45deg;
    animation-delay: -5s;
    bottom: -20px;
}

.bg img:nth-child(5) {
    left: 100%;
    --rotation-rand: 45deg;
    animation-delay: -7s;
}

.bg img:nth-child(6) {
    left: 100%;
    --rotation-rand: -45deg;
    animation-delay: -9s;
    top: -20px;
}

.bg img:nth-child(7) {
    left: -20%;
    --rotation-rand: 60deg;
    top: -100px;
    animation-delay: -1s;
}

@keyframes rotate {
    0% {
      transform: rotate(calc(-5deg + var(--rotation-rand)));
    }
    50% {
      transform: rotate(calc(5deg + var(--rotation-rand)));
    }
    100% {
      transform: rotate(calc(-5deg + var(--rotation-rand)));
    }
}



/* 
Bubbles
*/


.bubbles{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  top: 0;
  left: 0;
}

.bubble{
  position: absolute;
  bottom: 0;
  animation: flying 10s infinite ease-in;
  background-image: url(./img/heart.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate3d(0, 0, 0);
  animation-timing-function: ease-in-out;
  bottom: -300px;
  z-index: -1;
}

.bubble:nth-child(even) {
    background-image: url(./img/iqos.png);
}

.bubble:nth-child(1){
  width: 80px;
  height: 80px;
  left: 10%;
  animation-duration: 8s;
}

.bubble:nth-child(2){
  width: 120px;
  height: 120px;
  left: 20%;
  animation-duration: 5s;
  animation-delay: 1s;
}

.bubble:nth-child(3){
  width: 100px;
  height: 100px;
  left: 35%;
  animation-duration: 10s;
  animation-delay: 2s;
}

.bubble:nth-child(4){
  width: 160px;
  height: 160px;
  left: 50%;
  animation-duration: 7s;
  animation-delay: 0s;
}

.bubble:nth-child(5){
  width: 140px;
  height: 140px;
  left: 55%;
  animation-duration: 6s;
  animation-delay: 1s;
}

.bubble:nth-child(6){
  width: 150px;
  height: 150px;
  left: 65%;
  animation-duration: 8s;
  animation-delay: 3s;
}

.bubble:nth-child(7){
  width: 100px;
  height: 100px;
  left: 75%;
  animation-duration: 7s;
  animation-delay: 2s;
}

.bubble:nth-child(8){
  width: 160px;
  height: 160px;
  left: 80%;
  animation-duration: 6s;
  animation-delay: 1s;
}

.bubble:nth-child(9){
  width: 90px;
  height: 90px;
  left: 70%;
  animation-duration: 9s;
  animation-delay: 0s;
}

.bubble:nth-child(10){
  width: 100px;
  height: 100px;
  left: 85%;
  animation-duration: 5s;
  animation-delay: 3s;
  
}

@keyframes flying{
  0%{
    bottom: -300px;
    transform: translateX(0) scale(0.4);
  }
  50%{
    transform: translateX(100px)  scale(1);
  }
  100%{
    bottom: 110vh;
    transform: translateX(-100px)  scale(1.25);
  }
}


@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}
@font-face {
  font-family: "IQOSW01-Bold";
  src: url("fonts/IQOSW01-Bold.woff2") format("woff2"), url("fonts/IQOSW01-Bold.woff") format("woff");
}
@font-face {
  font-family: "IQOSW02-Bold";
  src: url("fonts/IQOSW02-Bold.woff2") format("woff2"), url("fonts/IQOSW02-Bold.woff") format("woff");
}
@font-face {
  font-family: "IQOSW05-Bold";
  src: url("fonts/IQOSW05-Bold.woff2") format("woff2"), url("fonts/IQOSW05-Bold.woff") format("woff");
}
@font-face {
  font-family: "IQOSW04-Bold";
  src: url("fonts/IQOSW04-Bold.woff2") format("woff2"), url("fonts/IQOSW04-Bold.woff") format("woff");
}
@font-face {
  font-family: "IQOSW10-Bold";
  src: url("fonts/IQOSW10-Bold.woff2") format("woff2"), url("fonts/IQOSW10-Bold.woff") format("woff");
}
@font-face {
  font-family: "IQOSW02-Light";
  src: url("fonts/IQOSW02-Light.woff2") format("woff2"), url("fonts/IQOSW02-Light.woff") format("woff");
}
@font-face {
  font-family: "IQOSW05-Light";
  src: url("fonts/IQOSW05-Light.woff2") format("woff2"), url("fonts/IQOSW05-Light.woff") format("woff");
}
@font-face {
  font-family: "IQOSW01-Regular";
  src: url("fonts/IQOSW01-Regular.woff2") format("woff2"), url("fonts/IQOSW01-Regular.woff") format("woff");
}
@font-face {
  font-family: "IQOSW04-Regular";
  src: url("fonts/IQOSW04-Regular.woff2") format("woff2"), url("fonts/IQOSW04-Regular.woff") format("woff");
}
@font-face {
  font-family: "IQOSW10-Regular";
  src: url("fonts/IQOSW10-Regular.woff2") format("woff2"), url("fonts/IQOSW10-Regular.woff") format("woff");
}
@font-face {
  font-family: "IQOSW05-Regular";
  src: url("fonts/IQOSW05-Regular.woff2") format("woff2"), url("fonts/IQOSW05-Regular.woff") format("woff");
}
@font-face {
  font-family: "IQOSW02-Regular";
  src: url("fonts/IQOSW02-Regular.woff2") format("woff2"), url("fonts/IQOSW02-Regular.woff") format("woff");
}
@font-face {
  font-family: "IQOSW10-Light";
  src: url("fonts/IQOSW10-Light.woff2") format("woff2"), url("fonts/IQOSW10-Light.woff") format("woff");
}
@font-face {
  font-family: "IQOSW04-Light";
  src: url("fonts/IQOSW04-Light.woff2") format("woff2"), url("fonts/IQOSW04-Light.woff") format("woff");
}
@font-face {
  font-family: "IQOSW01-Light";
  src: url("fonts/IQOSW01-Light.woff2") format("woff2"), url("fonts/IQOSW01-Light.woff") format("woff");
}


@media only screen and (min-height: 1600px) {
  #app .pick-letter-text{
      font-size: 3em;
  }
  
  #app .envelopes{
      padding: 100px;
      padding-top: 0;
  }
  
  #app .envelope .body, #app .big-envelope .body{
    border-left-width: 118px;
    border-right-width: 118px;
    border-bottom-width: 77px;
    border-top-width: 75px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  #app .envelope, #app .big-envelope{
      width: 237px;
  }

  #app .envelopes{
      grid-template-columns: 237px 237px 237px;
  }
  
  #app .envelope .flap, #app .big-envelope .flap{
    border-left: 118px solid transparent;
    border-right: 118px solid transparent;
    border-bottom: 75px solid transparent;
    border-top: 93px solid rgb(1 191 192);
  }
  
  #app .big-envelope {
      width: 640px;
      height: 411px;
  }
  
  #app .big-envelope .body {
    border-left-width: 320px;
    border-right-width: 320px;
    border-bottom-width: 205px;
    border-top-width: 205px;
    border-bottom-left-radius: 19px;
    border-bottom-right-radius: 19px;
  }
  
  #app .big-envelope .message h2{
    font-size: 1.9em;
  }
  
  #app .big-envelope .message p{
      font-size: 2.4em;
      padding-top: 64px;
  }
  
  #app .big-envelope .flap{
    border-left-width: 320px;
    border-right-width: 320px;
    border-bottom-width: 205px;
    border-top-width: 248px;
  }
  
  #app .big-envelope.focused{
    transform: scale(1) translate3d(calc((100vw - 640px) / 2), calc((100vh - 411px) / 1.5), 0) !important;
  }
  
  #app .envelopes > .envelope:last-child{
    display: block;
   }

}