@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
body {
    position: fixed;
	top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	margin: 0;
	padding: 0;
	background: #425565;
}

#progressEgg {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	position: fixed;
  	top: 0;
  	bottom: 30%;
  	left: 0;
  	right: 0;
}
#progressEggs {
  	width: 192px;
  	height: 192px;
}
#progressEggs img {
  	position: absolute;
}
#progressEgg #grayProgress {
  	filter: grayscale(1);
}
#progressEgg #colorProgress {
	clip: rect(96px,192px,192px,0px);
}
#progressText {
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 24px;
	color: #e0dddd;
}

canvas {
	max-width: 1000px;
	max-height: 1000px;
	width: 100%;
	height: 100%;
	left: 0;
    right: 0;
    position: absolute;
	margin: auto;
}

.imperfectButton {
    background: #d6d6d6;
    padding: 1rem 1rem;
    transition: all .5s ease;
    color: #41403E;
    font-size: 2rem;
    letter-spacing: 1px;
    outline: none;
    box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	border: 2px solid #111111;
}

#infoLayer {
	position: fixed;
	top: 20%;
	left: 2px;
	width: calc(100% - 4px);
	max-width: 400px;
	padding: 0.5em 1em;
	padding-top: 0;
	box-sizing: border-box;
	align-items: center;
	background: #333333;
	color: #dddddd;
	opacity: 0.9;
	border-radius: 10px;
	border: 3px solid #111111;
	box-shadow: 0px 2px 4px #333333;
	font-family: Arial;
	font-size: 20px;
	transition: 1s;
	transform: translateX(-105%);
}
#infoLayer.show {
	transform: translateX(0);
}
#infoLayer > div {
	text-align: end;
}
#infoLayer input {
	font-family: Arial;
	font-size: 20px;
    margin-right: -0.5em;
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
	outline:none;
}
#infoLayer input:hover {
  background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
  background-color:#ffab23;
}
#infoLayer input:active {
  position:relative;
  top:1px;
}

.hidden {
  display: none !important;
}

@keyframes new {
  0% {
    left: 0%;
    margin-left: -550px;
  }
  100% {
    left: 50%;
    margin-left: -275px;
  }
}
@keyframes open {
  0% {
    transform: translate3d(0, 0, 0) rotateY(0);
  }
  33.333% {
    transform: translate3d(-100%, 0, 0) rotateY(-180deg);
  }
  66.666% {
    transform: translate3d(-100%, 0, 0) rotateY(-180deg);
  }
  100% {
    transform: translate3d(-100%, 733.33333px, 0) rotateY(-180deg);
  }
}
@keyframes flap-open {
  0% {
    transform: rotateX(0deg);
    z-index: 5;
  }
  50% {
    transform: rotateX(0deg);
    z-index: 5;
  }
  100% {
    transform: rotateX(-180deg);
    z-index: -1;
  }
}
@keyframes letter-out {
  0% {
    transform: translate3d(0, 0, 0);
    box-shadow: inset 0 0px 30px -5px #b08c5b, 0 0 10px -5px;
  }
  100% {
    transform: translate3d(0, -733.33333px, 0);
    box-shadow: inset 0 0px 30px -5px #a87e50, 0 0 20px -5px;
  }
}
@keyframes send {
  0% {
    transform: translate3d(-100%, 733.33333px, 0) rotateY(-180deg);
    left: 50%;
    margin-left: -275px;
  }
  33% {
    transform: translate3d(-100%, 0, 0) rotateY(-180deg);
    left: 50%;
    margin-left: -275px;
  }
  66% {
    transform: translate3d(-100%, 0, 0) rotateY(-180deg);
    left: 50%;
    margin-left: -275px;
  }
  100% {
    transform: translate3d(0, 0, 0) rotateY(0deg);
    left: 50%;
    margin-left: -275px;
  }
}
@keyframes sendaway {
  0% {
    transform: translate3d(0, 0, 0) rotateY(0deg);
    left: 50%;
    margin-left: -275px;
  }
  100% {
    transform: translate3d(0, 0, 0) rotateY(0deg);
	left: 100%;
    margin-left: 20px;
  }
}
@keyframes flap-close {
  0% {
    transform: rotateX(-180deg);
    z-index: -1;
  }
  50% {
    transform: rotateX(0deg);
    z-index: 5;
  }
  100% {
    transform: rotateX(0deg);
    z-index: 5;
  }
}
@keyframes letter-in {
  0% {
    transform: translate3d(0, -733.33333px, 0);
    box-shadow: inset 0 0px 30px -5px #a87e50, 0 0 20px -5px;
  }
  100% {
    transform: translate3d(0, 0, 0);
    box-shadow: inset 0 0px 30px -5px #b08c5b, 0 0 10px -5px;
  }
}
body, html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  position: relative;
  perspective: 800px;
  overflow: hidden;
}

.envelope {
  z-index: 2;
  position: absolute;
  width: 550px;
  height: 366.66667px;
  top: 50%;
  left: 50%;
  margin-top: -183.33333px;
  margin-left: -275px;
  transform-style: preserve-3d;
  transform-origin: right center;
  transition: transform 1s ease, margin 2s ease;
  color: #1F1F1F;
}
.envelope.new {
  animation: new 1s forwards;
}
.envelope.old {
    margin-top: 1200px;
	transition: 2s;
}
.envelope.open {
  animation: open 3s forwards;
}
.envelope.open .top-flap {
  animation: flap-open 1s 1s forwards;
}
.envelope.open .letter {
  animation: letter-out 1s 2s forwards;
}

.envelope.write {
	animation: none;
    transform: translate3d(-100%, 2000px, 0) rotateY(-180deg);
}
.envelope.open.write {
	transition: transform 2s ease;
    transform: translate3d(-100%, 733.33333px, 0) rotateY(-180deg);
}
.envelope.open.write .top-flap {
  animation: flap-open 0s 0s forwards;
}
.envelope.open.write .letter {
  animation: letter-out 0s 0s forwards;
}

.envelope.send {
  animation: send 3s forwards;
}
.envelope.send.away {
  animation: sendaway 1s forwards;
}
.envelope.send .top-flap {
  transform: rotateX(-180deg);
  z-index: -1;
  animation: flap-close 1s 1s forwards;
}
.envelope.send .letter {
  animation: letter-in 1s forwards;
}

.envelope .front, .envelope .back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  border-radius: 5px;
  box-shadow: inset 0 0 30px -5px #a87e50, 0 0 20px -5px;
}
.envelope .front {
  backface-visibility: hidden;
  display: table;
}
.envelope .front:focus {
  outline: none;
}
.envelope .front .stamp {
  transform: translate3d(0, 0, 1px);
  position: absolute;
  width: 80px;
  height: 80px;
  right: 10px;
  top: 10px;
  padding: 10px;
  background: radial-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 4px, #f6f6df 4px, #f6f6df);
  background-size: 20px 20px;
  background-position: -10px -10px;
}
.envelope .front .stamp:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  border-radius: 2px;
}
.envelope .front .post {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-family: 'Courgette', cursive;
}
.envelope .front .post p {
  font-weight: bold;
  margin: 0;
}
.envelope .front .post p:first-child {
  font-size: 50px;
  line-height: 50px;
}
.envelope .front .post p:last-child {
  font-size: 30px;
}
.envelope .back {
  transform: rotateY(180deg) translate3d(0, 0, 1px);
}
.envelope .back .flap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.envelope .back .flap:before {
  content: "";
  position: absolute;
  background-color: #FFF;
  box-shadow: inset 0 0 30px -7px #a87e50;
}
.envelope .back .top-flap:before, .envelope .back .bottom-flap:before {
  width: 388.90873px;
  height: 388.90873px;
}
.envelope .back .top-flap {
  z-index: 5;
  transform-origin: top center;
}
.envelope .back .top-flap:before {
  transform-origin: top left;
  transform: rotate(-45deg);
  border-bottom-left-radius: 50px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.envelope .back .bottom-flap {
  z-index: 4;
}
.envelope .back .bottom-flap:before {
  transform-origin: left bottom;
  transform: rotate(45deg) translate(-15px, -15px);
  border-top-left-radius: 100px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
}
.envelope .back .left-flap:before, .envelope .back .right-flap:before {
  width: 269.27249px;
  height: 269.27249px;
  top: -5px;
}
.envelope .back .left-flap {
  z-index: 3;
}
.envelope .back .left-flap:before {
  transform-origin: top left;
  transform: rotate(45deg);
  border-top-left-radius: 20px;
  border-bottom-right-radius: 30px;
  border-top-right-radius: 5px;
}
.envelope .back .right-flap {
  z-index: 2;
}
.envelope .back .right-flap:before {
  right: 0;
  transform-origin: top right;
  transform: rotate(-45deg);
  border-top-right-radius: 20px;
  border-bottom-left-radius: 30px;
  border-top-left-radius: 5px;
}
.envelope .back .letter {
  z-index: 1;
  position: absolute;
  top: 5px;
  left: 10px;
  width: 530px;
  height: 346.67px;
  background-color: #FFF;
  border-radius: 5px;
  padding: 1px;
  box-sizing: border-box;
  box-shadow: inset 0 0px 30px -5px #B08C5B, 0 0 10px -5px;
  font-family: 'Courgette', cursive;
}

.envelope.open .back .letter {
	top: -50px;
	height: 500px;
	transition: 1s;
	transition-delay: 2s;
}
.envelope.open.write .back .letter {
	transition: 0.1s;
	transition-delay: 0s;
}
.envelope .back .letterText {
	margin: 0;
	width: 100%;
	height: 100%;
	padding: 1em;
	border: 0;
	box-sizing: border-box;
	overflow: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	color: #000000;
	background: transparent;
	outline: none;
	font-family: 'Courgette', cursive;
	font-size: 30px;
}
.letterText::-webkit-scrollbar {
  display: none;
}
.envelope .back .letterText::placeholder {
  color: #cccccc;
}
.envelope .back .letterText:focus
.envelope .back .letter .button:focus {
  outline: none;
}


.envelope.open .back .letter .closeButton,
.envelope.write .back .letter .uploadButton {
	opacity: 1;
	transition: 1s;
	transition-delay: 5s;
	cursor: pointer;
	pointer-events: all;
}
.envelope .back .letter .button,
.envelope.open.write .back .letter .closeButton {
	position: absolute;
	width: 100%;
	margin-top: 10px;
	box-sizing: border-box;
	opacity: 0;
	text-align: center;
	pointer-events: none;
}

.envelopeWrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(1);
}

@media only screen and (max-width: 600px) {
  .envelopeWrap {
    transform: scale(0.9);
  }
}
@media only screen and (max-width: 520px) {
  .envelopeWrap {
    transform: scale(0.8);
  }
}
@media only screen and (max-width: 440px) {
  .envelopeWrap {
    transform: scale(0.7);
  }
}
@media only screen and (max-width: 400px) {
  .envelopeWrap {
    transform: scale(0.65);
  }
}
@media only screen and (max-width: 360px) {
  .envelopeWrap {
    transform: scale(0.6);
  }
}
@media only screen and (max-width: 330px) {
  .envelopeWrap {
    transform: scale(0.55);
  }
}
@media only screen and (max-width: 300px) {
  .envelopeWrap {
    transform: scale(0.5);
  }
}


.shareDialogWrap {
    position: fixed;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
	display: flex;
    align-items: center;
    justify-content: center;
    background: #ff000055;
}
.shareDialog {
	display: flex;
    flex-direction: column;
	width: 100%;
	max-width: 600px;
	height: 100%;
	margin: auto;
	padding: 10px;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	font-family: 'Courgette', cursive;
	font-size: 22px;
	pointer-events: none;
}
.send .shareDialog {
	pointer-events: all;
}
.shareDialog a {
	display: flex;
    flex-direction: column;
    text-decoration: none;
    margin: 10px;
}
.shareDialog a img {
	width: 55px;
	height: 55px;
	border-radius: 20%;
}
.shareDialog a div {
	margin-top: 2px;
	text-align: center;
}

.shareText,
.shareButtons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.shareText {
	flex-direction: column;
}

.shareLink {
	margin: 20px 0px;
	font-size: 18px;
	background: #ddd;
	padding: 0.5em;
	font-family: Arial;
	font-weight: bold;
}

.finishedButtons {
	display: flex;
	width: 95%;
}
.finishedButtons .button {
	flex-basis: 45%;
	flex-grow: 1;
	margin: 5px;
	text-align: center;
	cursor: pointer;
}