:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:var(--wedding--palette---d-b10);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--wedding--palette---ivory: rgba(255, 255, 240, 1);--wedding--palette---forest--green: rgba(44, 95, 45, 1);--wedding--palette---dusty--blue: rgba(155, 173, 188, 1);--wedding--palette---deep--burgundy: rgba(107, 39, 55, 1);--wedding--palette---d-b30: rgba(93, 108, 120, 1);--wedding--palette---d-b40: rgba(73, 86, 97, 1);--wedding--palette---d-b50: rgba(55, 66, 75, 1);--wedding--palette---f-g-10: rgba(63, 124, 64, 1);--wedding--palette---f-g-20: rgba(85, 153, 86, 1);--wedding--palette---f-g10: rgba(28, 66, 28, 1);--wedding--palette---d-b-10: rgba(141, 60, 79, 1);--wedding--palette---d-b10: rgba(73, 22, 34, 1);--wedding--palette---d-b-30: rgba(209, 114, 136, 1);--wedding--palette---i-v10: rgba(232, 232, 215, 1);--wedding--palette---i-v20: rgba(210, 210, 190, 1);--others---olo--black: rgba(79, 79, 79, 1);--others---olo--collective: rgba(53, 136, 129, 1);--others---michelin: rgba(184, 44, 60, 1);--others---house: rgba(247, 207, 193, 1);--others---house: rgba(227, 165, 144, 1);--others---wood--dark: rgba(72, 83, 97, 1);--olo--website---background: rgba(242, 243, 245, 1);--olo--website---header: rgba(117, 117, 109, 1);--olo--website---typography: rgba(22, 22, 19, 1);--olo--website---accent-1: rgba(214, 94, 25, 1);--olo--website---accent-2: rgba(101, 189, 125, 1);--olo--website---accent-3: rgba(213, 181, 101, 1);--olo--website---success: rgba(18, 184, 120, 1);--olo--website---warning: rgba(241, 174, 42, 1);--olo--website---danger: rgba(219, 75, 104, 1)}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;height:100dvh;background-color:var(--wedding--palette---d-b10);touch-action:pan-x pan-y;overscroll-behavior-y:none}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{height:100%;width:100%;margin:0;padding:2rem;background-color:var(--wedding--palette---d-b10);text-align:center;box-sizing:border-box;overflow-y:hidden}@media (max-width: 768px){#root{padding:1rem}}@media (max-width: 480px){#root{padding:.5rem}}:root{--animation-duration: .6s;--step-1: calc(var(--animation-duration) * 1);--step-2: calc(var(--animation-duration) * 2)}.save-the-date-container{display:flex;flex-direction:column;height:100%;padding:1rem}.save-the-date-wrapper{display:flex;justify-content:center;align-items:center;flex:1;flex-direction:column}h1{font-family:Pinyon Script,cursive;color:var(--wedding--palette---ivory);opacity:1;margin:1rem 0;max-height:1000px}h1.open{opacity:0;max-height:0;margin:0;transition:all var(--animation-duration) ease-out}.envelope-wrapper{position:relative;opacity:1;width:min(90vw,370px);cursor:pointer;height:fit-content;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;padding-top:20vh;max-height:100vh;overflow:hidden;transition:all var(--animation-duration) ease-out}.envelope-wrapper.fade-out-envelope{padding-top:0;opacity:0;max-height:0}.envelope-backside{width:100%;height:auto;z-index:0;grid-row:1;grid-column:1}.envelope-bottom{position:relative;width:100%;height:auto;z-index:3;transition:z-index 0s ease-in-out;grid-row:1;grid-column:1}.envelope-bottom.lower{z-index:1;transition-delay:calc(var(--animation-duration) * 3)}.envelope-flap{display:flex;flex-direction:column;align-items:center;position:relative;grid-row:1;grid-column:1}.envelope-top{position:relative;width:100%;height:auto;z-index:3;transform-origin:top center;transition:transform var(--animation-duration) ease-in-out,z-index 0s ease-in-out}.envelope-top.flip{transform:rotateX(180deg) translateY(-11px);z-index:1;transition-delay:var(--step-1)}.stamp{position:relative;top:-70px;height:auto;z-index:4;opacity:1;transition:opacity var(--step-1) ease-in-out;width:104px}.stamp.fade-out{opacity:0}.save-the-date-card{position:relative;width:360px;aspect-ratio:5 / 7;z-index:2;opacity:0;transition:all .6s ease-out;transition-delay:opacity var(--step-1)}.save-the-date-card img{position:absolute;top:0;left:0;width:100%;height:100%}.save-the-date-card.slide-up{animation:slideUpWithBounce var(--step-2) cubic-bezier(.25,.46,.45,.94) backwards;animation-delay:calc(var(--step-2) * 1.25);opacity:1}.save-the-date-card.centered{cursor:pointer;transform:scale(1.25);transition:transform calc(var(--animation-duration) / 2) ease-out;-webkit-user-select:none;user-select:none}@keyframes slideUpWithBounce{0%{clip-path:inset(0 0 80% 0);transform:translateY(-260px)}70%{clip-path:inset(0 0 0 0);transform:translateY(calc(-90% - 65px))}to{clip-path:inset(0 0 0 0)}}@media (max-width: 425px){.save-the-date-card{width:90%}.save-the-date-card.centered{transform:none}@keyframes slideUpWithBounce{0%{clip-path:inset(0 0 80% 0);transform:translateY(-240px)}70%{clip-path:inset(0 0 15% 0);transform:translateY(calc(-90% - 65px))}to{clip-path:inset(0 0 0 0)}}}@media (max-width: 375px){.save-the-date-container{padding:10px}@keyframes slideUpWithBounce{0%{clip-path:inset(0 0 80% 0);transform:translateY(-230px)}70%{clip-path:inset(0 0 15% 0);transform:translateY(calc(-90% - 65px))}to{clip-path:inset(0 0 0 0)}}}
