* {
  -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: #a8fff6;
  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;

}
#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: #1fbaab;
  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 .envelope .body, #app .big-envelope .body {
  border-left: 74px solid #19ccba;
  border-right: 74px solid #19ccba;
  border-bottom: 48px solid #1edeca;
  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 #1fbaab;
  transform-origin: top;
  position: absolute;
}
#app .envelope .flap:after, #app .big-envelope .flap:after {
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: -12px;
  top: -16px;
  background-image: url(./img/heart.svg);
  filter: invert(9%) sepia(97%) saturate(6720%) hue-rotate(338deg) brightness(81%) contrast(107%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#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;
}
#app .big-envelope .body {
  border-left: 200px solid #19ccba;
  border-right: 200px solid #19ccba;
  border-bottom: 128px solid #1edeca;
  border-top: 128px solid transparent;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 1;
}
#app .big-envelope .hearts {
  top: 100px;
}
#app .big-envelope .hearts img {
  position: absolute;
  top: 50%;
  right: 0;
  filter: invert(9%) sepia(97%) saturate(6720%) hue-rotate(338deg) brightness(81%) contrast(107%);
  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;
  filter: invert(9%) sepia(97%) saturate(6720%) hue-rotate(338deg) brightness(101%) contrast(107%);
}
#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;
  filter: invert(9%) sepia(97%) saturate(6720%) hue-rotate(338deg) brightness(91%) contrast(107%);
}
#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 #21bfaf;
  transition: all 0.8s ease-out;
  z-index: 1;
  perspective-origin: top;
}
#app .big-envelope .flap:after {
  height: 65px;
  width: 65px;
  left: -32px;
  top: -43px;
  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 {
  filter: blur(8px) invert(9%) sepia(97%) saturate(6720%) hue-rotate(338deg) brightness(81%) contrast(107%);
  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%;
}

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

.background img {
  position: absolute;
  animation-name: move;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.background img:nth-child(1) {
  width: 11.877539882vmin;
  height: 11.877539882vmin;
  top: 1%;
  left: 64%;
  animation-duration: 14.7s;
  animation-delay: -6.8s;
  transform-origin: 11vw -10vh;
  filter: invert(1) blur(2.2567325776vmin);
  opacity: 0.27;
}
.background img:nth-child(2) {
  width: 11.9800573378vmin;
  height: 11.9800573378vmin;
  top: 2%;
  left: 84%;
  animation-duration: 20s;
  animation-delay: -12.1s;
  transform-origin: -22vw -3vh;
  filter: invert(1) blur(0.4792022935vmin);
  opacity: 0.26;
}
.background img:nth-child(3) {
  width: 13.9355943514vmin;
  height: 13.9355943514vmin;
  top: 56%;
  left: 82%;
  animation-duration: 18.4s;
  animation-delay: -21.1s;
  transform-origin: 2vw 18vh;
  filter: invert(1) blur(1.8116272657vmin);
  opacity: 0.23;
}
.background img:nth-child(4) {
  width: 12.2809566172vmin;
  height: 12.2809566172vmin;
  top: 17%;
  left: 56%;
  animation-duration: 19.8s;
  animation-delay: -5.9s;
  transform-origin: -7vw 15vh;
  filter: invert(1) blur(1.9649530587vmin);
  opacity: 0.22;
}
.background img:nth-child(5) {
  width: 13.2874764823vmin;
  height: 13.2874764823vmin;
  top: 47%;
  left: 15%;
  animation-duration: 15.3s;
  animation-delay: -7.2s;
  transform-origin: 10vw -1vh;
  filter: invert(1) blur(2.5246205316vmin);
  opacity: 0.27;
}
.background img:nth-child(6) {
  width: 10.4917133178vmin;
  height: 10.4917133178vmin;
  top: 93%;
  left: 2%;
  animation-duration: 19.1s;
  animation-delay: -3.3s;
  transform-origin: -21vw 9vh;
  filter: invert(1) blur(1.5737569977vmin);
  opacity: 0.18;
}
.background img:nth-child(7) {
  width: 10.8707907325vmin;
  height: 10.8707907325vmin;
  top: 13%;
  left: 31%;
  animation-duration: 18.6s;
  animation-delay: -6.7s;
  transform-origin: 11vw 17vh;
  filter: invert(1) blur(0.652247444vmin);
  opacity: 0.13;
}
.background img:nth-child(8) {
  width: 10.0667418776vmin;
  height: 10.0667418776vmin;
  top: 14%;
  left: 67%;
  animation-duration: 11.7s;
  animation-delay: -7.6s;
  transform-origin: 24vw 25vh;
  filter: invert(1) blur(0.6040045127vmin);
  opacity: 0.21;
}
.background img:nth-child(9) {
  width: 10.7148119256vmin;
  height: 10.7148119256vmin;
  top: 54%;
  left: 47%;
  animation-duration: 19.5s;
  animation-delay: -11.1s;
  transform-origin: -5vw 20vh;
  filter: invert(1) blur(0.5357405963vmin);
  opacity: 0.13;
}
.background img:nth-child(10) {
  width: 13.1266097994vmin;
  height: 13.1266097994vmin;
  top: 16%;
  left: 44%;
  animation-duration: 10.4s;
  animation-delay: -6.9s;
  transform-origin: 22vw 3vh;
  filter: invert(1) blur(1.8377253719vmin);
  opacity: 0.24;
}
.background img:nth-child(11) {
  width: 12.7743660562vmin;
  height: 12.7743660562vmin;
  top: 95%;
  left: 70%;
  animation-duration: 13.6s;
  animation-delay: -8.4s;
  transform-origin: 19vw -18vh;
  filter: invert(1) blur(2.043898569vmin);
  opacity: 0.29;
}
.background img:nth-child(12) {
  width: 13.4327775082vmin;
  height: 13.4327775082vmin;
  top: 2%;
  left: 94%;
  animation-duration: 13.9s;
  animation-delay: -3.5s;
  transform-origin: -24vw 19vh;
  filter: invert(1) blur(0.9402944256vmin);
  opacity: 0.27;
}
.background img:nth-child(13) {
  width: 12.8241598523vmin;
  height: 12.8241598523vmin;
  top: 94%;
  left: 15%;
  animation-duration: 11.4s;
  animation-delay: -3.3s;
  transform-origin: -20vw 22vh;
  filter: invert(1) blur(0.5129663941vmin);
  opacity: 0.12;
}
.background img:nth-child(14) {
  width: 13.8747676485vmin;
  height: 13.8747676485vmin;
  top: 77%;
  left: 75%;
  animation-duration: 21.4s;
  animation-delay: -7s;
  transform-origin: -8vw -7vh;
  filter: invert(1) blur(0.6937383824vmin);
  opacity: 0.3;
}
.background img:nth-child(15) {
  width: 12.0994307543vmin;
  height: 12.0994307543vmin;
  top: 57%;
  left: 32%;
  animation-duration: 14.7s;
  animation-delay: -1.3s;
  transform-origin: -5vw 9vh;
  filter: invert(1) blur(1.2099430754vmin);
  opacity: 0.14;
}
.background img:nth-child(16) {
  width: 14.7544055911vmin;
  height: 14.7544055911vmin;
  top: 52%;
  left: 64%;
  animation-duration: 21.7s;
  animation-delay: -4.3s;
  transform-origin: 20vw -11vh;
  filter: invert(1) blur(2.2131608387vmin);
  opacity: 0.21;
}
.background img:nth-child(17) {
  width: 10.8151574075vmin;
  height: 10.8151574075vmin;
  top: 75%;
  left: 99%;
  animation-duration: 20.5s;
  animation-delay: -17.3s;
  transform-origin: -3vw 21vh;
  filter: invert(1) blur(1.1896673148vmin);
  opacity: 0.24;
}
.background img:nth-child(18) {
  width: 12.9174525156vmin;
  height: 12.9174525156vmin;
  top: 88%;
  left: 59%;
  animation-duration: 17.2s;
  animation-delay: -2.5s;
  transform-origin: 16vw -17vh;
  filter: invert(1) blur(0.2583490503vmin);
  opacity: 0.11;
}
.background img:nth-child(19) {
  width: 13.9280688282vmin;
  height: 13.9280688282vmin;
  top: 20%;
  left: 38%;
  animation-duration: 17.1s;
  animation-delay: -6.1s;
  transform-origin: 7vw -8vh;
  filter: invert(1) blur(2.6463330774vmin);
  opacity: 0.16;
}
.background img:nth-child(20) {
  width: 13.6364070198vmin;
  height: 13.6364070198vmin;
  top: 63%;
  left: 68%;
  animation-duration: 14.9s;
  animation-delay: -19.7s;
  transform-origin: -23vw 2vh;
  filter: invert(1) blur(2.045461053vmin);
  opacity: 0.18;
}
.background img:nth-child(21) {
  width: 11.2887220836vmin;
  height: 11.2887220836vmin;
  top: 46%;
  left: 62%;
  animation-duration: 21.4s;
  animation-delay: -20.5s;
  transform-origin: -3vw 25vh;
  filter: invert(1) blur(0.4515488833vmin);
  opacity: 0.16;
}
.background img:nth-child(22) {
  width: 14.7491883284vmin;
  height: 14.7491883284vmin;
  top: 31%;
  left: 78%;
  animation-duration: 12.2s;
  animation-delay: -6.5s;
  transform-origin: -13vw -17vh;
  filter: invert(1) blur(1.032443183vmin);
  opacity: 0.18;
}
.background img:nth-child(23) {
  width: 13.7546400978vmin;
  height: 13.7546400978vmin;
  top: 65%;
  left: 47%;
  animation-duration: 13s;
  animation-delay: -20.3s;
  transform-origin: -10vw -22vh;
  filter: invert(1) blur(1.5130104108vmin);
  opacity: 0.18;
}
.background img:nth-child(24) {
  width: 10.3995584802vmin;
  height: 10.3995584802vmin;
  top: 36%;
  left: 29%;
  animation-duration: 20.2s;
  animation-delay: -21.4s;
  transform-origin: 17vw 13vh;
  filter: invert(1) blur(0.2079911696vmin);
  opacity: 0.29;
}
.background img:nth-child(25) {
  width: 14.7254569656vmin;
  height: 14.7254569656vmin;
  top: 91%;
  left: 81%;
  animation-duration: 18.3s;
  animation-delay: -14.1s;
  transform-origin: -9vw -20vh;
  filter: invert(1) blur(1.1780365573vmin);
  opacity: 0.11;
}
.background img:nth-child(26) {
  width: 10.7711980043vmin;
  height: 10.7711980043vmin;
  top: 63%;
  left: 27%;
  animation-duration: 10.7s;
  animation-delay: -6.8s;
  transform-origin: 19vw -8vh;
  filter: invert(1) blur(1.6156797007vmin);
  opacity: 0.12;
}
.background img:nth-child(27) {
  width: 14.030386199vmin;
  height: 14.030386199vmin;
  top: 87%;
  left: 35%;
  animation-duration: 12.2s;
  animation-delay: -12.4s;
  transform-origin: 5vw 11vh;
  filter: invert(1) blur(1.1224308959vmin);
  opacity: 0.15;
}
.background img:nth-child(28) {
  width: 12.7656892142vmin;
  height: 12.7656892142vmin;
  top: 8%;
  left: 79%;
  animation-duration: 11s;
  animation-delay: -13.5s;
  transform-origin: 10vw 11vh;
  filter: invert(1) blur(1.4042258136vmin);
  opacity: 0.16;
}
.background img:nth-child(29) {
  width: 14.3884195576vmin;
  height: 14.3884195576vmin;
  top: 58%;
  left: 61%;
  animation-duration: 10.2s;
  animation-delay: -5.8s;
  transform-origin: -20vw 10vh;
  filter: invert(1) blur(2.4460313248vmin);
  opacity: 0.25;
}
.background img:nth-child(30) {
  width: 11.407170946vmin;
  height: 11.407170946vmin;
  top: 93%;
  left: 61%;
  animation-duration: 14.8s;
  animation-delay: -19.8s;
  transform-origin: 5vw -18vh;
  filter: invert(1) blur(1.2547888041vmin);
  opacity: 0.16;
}
.background img:nth-child(31) {
  width: 12.5575372229vmin;
  height: 12.5575372229vmin;
  top: 1%;
  left: 26%;
  animation-duration: 19.4s;
  animation-delay: -10.8s;
  transform-origin: -3vw -17vh;
  filter: invert(1) blur(1.3813290945vmin);
  opacity: 0.12;
}
.background img:nth-child(32) {
  width: 13.7434732741vmin;
  height: 13.7434732741vmin;
  top: 11%;
  left: 87%;
  animation-duration: 12.3s;
  animation-delay: -11.6s;
  transform-origin: 23vw 23vh;
  filter: invert(1) blur(2.0615209911vmin);
  opacity: 0.23;
}
.background img:nth-child(33) {
  width: 13.2836785585vmin;
  height: 13.2836785585vmin;
  top: 86%;
  left: 17%;
  animation-duration: 20.5s;
  animation-delay: -12.5s;
  transform-origin: -10vw -4vh;
  filter: invert(1) blur(0.7970207135vmin);
  opacity: 0.28;
}
.background img:nth-child(34) {
  width: 13.4591862135vmin;
  height: 13.4591862135vmin;
  top: 61%;
  left: 18%;
  animation-duration: 10.4s;
  animation-delay: -1s;
  transform-origin: -19vw -24vh;
  filter: invert(1) blur(0.2691837243vmin);
  opacity: 0.2;
}
.background img:nth-child(35) {
  width: 10.6847909864vmin;
  height: 10.6847909864vmin;
  top: 24%;
  left: 79%;
  animation-duration: 15.6s;
  animation-delay: -7.7s;
  transform-origin: 23vw 1vh;
  filter: invert(1) blur(1.602718648vmin);
  opacity: 0.25;
}
.background img:nth-child(36) {
  width: 13.5287471564vmin;
  height: 13.5287471564vmin;
  top: 44%;
  left: 94%;
  animation-duration: 20.7s;
  animation-delay: -15s;
  transform-origin: -5vw 17vh;
  filter: invert(1) blur(1.8940246019vmin);
  opacity: 0.18;
}
.background img:nth-child(37) {
  width: 11.1303182139vmin;
  height: 11.1303182139vmin;
  top: 31%;
  left: 31%;
  animation-duration: 11.4s;
  animation-delay: -2.7s;
  transform-origin: -23vw 2vh;
  filter: invert(1) blur(0.5565159107vmin);
  opacity: 0.15;
}
.background img:nth-child(38) {
  width: 11.3948724133vmin;
  height: 11.3948724133vmin;
  top: 45%;
  left: 53%;
  animation-duration: 17.1s;
  animation-delay: -15.6s;
  transform-origin: 16vw -18vh;
  filter: invert(1) blur(1.3673846896vmin);
  opacity: 0.2;
}
.background img:nth-child(39) {
  width: 10.8809399093vmin;
  height: 10.8809399093vmin;
  top: 56%;
  left: 18%;
  animation-duration: 14.2s;
  animation-delay: -20.7s;
  transform-origin: 10vw -16vh;
  filter: invert(1) blur(2.0673785828vmin);
  opacity: 0.13;
}
.background img:nth-child(40) {
  width: 13.7472993262vmin;
  height: 13.7472993262vmin;
  top: 74%;
  left: 90%;
  animation-duration: 18.7s;
  animation-delay: -0.1s;
  transform-origin: 11vw -20vh;
  filter: invert(1) blur(1.2372569394vmin);
  opacity: 0.22;
}
.background img:nth-child(41) {
  width: 13.0173945905vmin;
  height: 13.0173945905vmin;
  top: 37%;
  left: 48%;
  animation-duration: 19.3s;
  animation-delay: -19s;
  transform-origin: 0vw 22vh;
  filter: invert(1) blur(1.5620873509vmin);
  opacity: 0.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");
}

/*# sourceMappingURL=app.css.map */