@import"https://fonts.googleapis.com/css?family=Roboto";:root{--coffee: #402218;--red: rgba(239, 143, 143, 1);--coffee-text: #865439;--blue: rgba(153, 153, 230, 1);--primary-color: var(--red);--text-color: var(--blue);--bkg-journal: repeating-linear-gradient( 90deg, transparent 0 10%, var(--primary-color) 10% calc(10% + 1px), transparent calc(10% + 1px) calc(10% + 3px), var(--primary-color) calc(10% + 3px) calc(10% + 4px), transparent calc(10% + 4px) 95%, var(--primary-color) 95% calc(95% + 1px), transparent calc(95% + 1px) 100% ), repeating-linear-gradient( rgba(243, 243, 243, 1) 0px 120px, var(--primary-color) 120px 121px, transparent 121px 123px, var(--primary-color) 123px 124px, transparent 124px 100% ), repeating-linear-gradient(lightblue 0 1px, transparent 1px 30px), url(https://images.unsplash.com/photo-1615800098779-1be32e60cca3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=710&q=80);--bkg-rough: repeating-linear-gradient( 90deg, transparent 0 10%, var(--primary-color) 10% calc(10% + 1px), transparent calc(10% + 1px) calc(10% + 3px), var(--primary-color) calc(10% + 3px) calc(10% + 4px), transparent calc(10% + 4px) 95%, var(--primary-color) 95% calc(95% + 1px), transparent calc(95% + 1px) 100% ), repeating-linear-gradient( #cdc7b7 0px 120px, var(--primary-color) 120px 121px, transparent 121px 123px, var(--primary-color) 123px 124px, transparent 124px 100% ), repeating-linear-gradient( rgba(50, 50, 50, .25) 0 1px, transparent 1px 30px ), url(https://images.unsplash.com/photo-1615800098799-0ccb261b1f92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=710&q=80)}.lock-screen{margin:0;padding:0;height:100vh;width:100vw;background-color:#000;position:absolute;z-index:998}.lock-screen h1{position:relative;top:40%;left:50%;font-size:1.5em;transform:translate(-50%,-50%);color:#fff;z-index:999;text-align:center;margin-bottom:30px}.lock-screen input{position:relative;top:40%;left:50%;transform:translate(-50%,-50%);color:#000;z-index:999;text-align:center;padding:1px;width:300px;font-size:2em}body{font-family:Roboto;background:radial-gradient(ellipse at center,rgba(26,140,141,1) 0%,rgba(3,95,120,1) 100%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;perspective:1000px;margin:0;height:100vh;width:100vw;overflow:hidden}body.zoomed{transform:scale(1.3);transform-origin:50dvw 50dvh}*{outline:none}.invitation{width:500px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.envelope{background:#2b292a;width:100%;height:307.6923076923px;position:relative;z-index:1}.envelope.is-open:before,.envelope.is-open:after{z-index:-2}.envelope:before,.envelope:after{content:"";position:absolute;bottom:0}.envelope:before{right:0;border-bottom:0px solid transparent;border-top:307.6923076923px solid transparent;border-right:500px solid #2b292a;z-index:1}.envelope:after{left:0;border-bottom:0px solid transparent;border-top:307.6923076923px solid transparent;border-left:500px solid #2b292a;z-index:1}.flap{border-right:250px solid transparent;border-top:153.8461538462px solid #2b292a;border-left:250px solid transparent;position:absolute;left:0;top:0;transform-origin:50% 0%;z-index:2}.mask{box-sizing:border-box;-webkit-clip-path:inset(0 0 50% 0);clip-path:inset(0 0 50% 0);overflow:hidden;position:relative;width:480px;height:2010px;z-index:0;margin:auto;top:50%;transform:translateY(-50%);perspective:1200px}.card{position:relative;width:480px;height:670px;margin:auto;transform-style:preserve-3d;transform-origin:50% 10%;transform:translateY(128%) rotateY(0)}.face{top:0;right:0;bottom:0;left:0;position:absolute;background:transparent 50% 100% / auto 100% no-repeat;box-shadow:0 3px 6x #0000004d}.face:last-of-type{transform:translateZ(-3px) rotateY(180deg);background-size:130% auto}.front{background:rgb(70,26,141);background:-moz-radial-gradient(center,ellipse cover,rgb(114,26,141) 0%,rgb(3,97,120) 100%);background:-webkit-radial-gradient(center,ellipse cover,rgb(114,26,141) 0%,rgb(3,97,120) 100%);background:radial-gradient(ellipse at center,rgb(114,26,141) 0%,rgb(3,97,120) 100%)}.front strong{font-weight:700}.front .container-outer{display:table;width:100%;height:100%}.front .container{width:100%;margin:0 auto;display:table-cell;vertical-align:middle}.front p{color:#fff}.main-text{position:relative}.front .main-text .top p,.front .main-text .bottom p{line-height:1;margin:0;text-align:center;font-weight:700;font-size:72px;letter-spacing:10px;position:absolute;width:100%}.front .main-text .top,.front .main-text .bottom{width:100%;display:block;overflow:hidden;position:relative}.front.animate .main-text .top,.front.animate .main-text .bottom{animation-duration:1s;animation-fill-mode:forwards;animation-delay:1s}.front .main-text .bottom p{bottom:0px}.front .main-text .top{height:32px}.front.animate .main-text .top{animation-name:goUp}.front .main-text .bottom{height:41px}.front.animate .main-text .bottom{animation-name:goDown}.front .main-text .sub-text p{text-align:center;font-size:24px;line-height:1;font-weight:300;text-transform:uppercase;letter-spacing:10px;margin:0;position:absolute;width:100%;top:50%;transform:translateY(-70%);opacity:0}.front.animate .main-text .sub-text p{animation-name:fadeIn;animation-duration:1s;animation-fill-mode:forwards;animation-delay:2s}.front .main-text .date{margin-top:20px;opacity:0}.front.animate .main-text .date{animation-name:fadeIn;animation-duration:1s;animation-fill-mode:forwards;animation-delay:3s}.front .main-text .date p{position:absolute;text-align:center;font-size:24px;line-height:1;font-weight:300;text-transform:uppercase;letter-spacing:10px;margin:0;width:100%}@keyframes goUp{0%{transform:translateY(0)}to{transform:translateY(-22px)}}@keyframes goDown{0%{transform:translateY(0)}to{transform:translateY(22px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.front footer{display:block;width:100%;padding:15px;box-sizing:border-box;position:absolute;left:0;bottom:0}.front footer:after{content:"";display:table;clear:both}.front footer p{font-weight:300;font-size:12px}.front footer .left{float:left;text-align:left;font-size:12px;letter-spacing:2px}.front footer .right{float:right;text-align:right;font-size:12px;letter-spacing:2px}.face.back{background:var(--bkg-journal);color:#000;overflow:hidden}.face.back img{position:relative;top:20px;display:inline-block;width:80%;left:13%;margin-top:10px}.back button,.front button{position:absolute;box-shadow:0 1px 2px #0000004d;left:50%;bottom:15px;transform:translate(-50%,-50%);transform-origin:50% 50%;z-index:1;animation-name:fadeIn;animation-duration:1s;animation-fill-mode:forwards;animation-delay:3s}#button{font: 1.25em Karla,sans-serif;padding:15px 30px;border-radius:30px;background:#931b1b;color:#fff;border:none;position:absolute;box-shadow:0 1px 2px #0000004d;left:50%;top:170px;transform:translate(-50%,-50%);transform-origin:50% 50%;z-index:1;cursor:pointer;transition:background .3s ease-out,color .3s ease-out}#button.invert{color:#fff;background:#931b1b}.d-none{display:none}