html,
body {
  padding: 0;
  margin: 0;
  background-color: var(--color-bg);
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

html {
  font-family: 'Poppins', sans-serif;
}

body {
  padding: 0 36px;
  overflow-y: scroll;
}

input[type='checkbox'] {
  filter: sepia(1);
  margin-left: 0;
  margin-right: 5px;
}

html,
body,
#app {
  height: 100%;
}

.center-container {
  height: 100%;
  width: 100%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ring);
}
.center-container-text {
  margin-top: 24px;
  animation: appear 0.4s 3s both ease-out;
}

:root {
  --color-bg: #272925;
  --color-bg-with-alpha: #2729258a;
  --color-primary-lighter: #b9b377;
  --color-primary: #d0cb8c;
  --color-primary-button: #a49e5f;
  --color-primary-darker: #868045;
  --color-primary-contrast: #fff;
  --color-alt: #e7e5d1;
  --color-card: #fafaf4;
  --color-card-bottom: #ececdf;
  --color-ring: #fff7de;
  --color-ring-diamond: #f5faff;
  --color-aysin-and-thibaut: var(--color-ring);
  --color-details: var(--color-ring);
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.main {
  max-width: 450px;
  margin: auto;
  margin-top: 40px;
}

.rsvp-prompt {
  color: #fff;
  opacity: 0.6;
  font-size: 12px;
  margin-left: 32px;
  margin-bottom: 32px;
  animation: appear 0.4s 3s both ease-out;
}
.bottom-spacer {
  height: 300px;
}

.invite {
  margin-bottom: 80px;
  animation: appear 0.4s 3s both ease-out;
}
.invite:nth-child(n + 2) {
  animation-delay: 3.25s;
}

.card {
  background-color: var(--color-card);
  box-shadow: 1.7px 1.6px 1.6px rgba(0, 0, 0, 0.1),
    4.1px 3.9px 3.8px rgba(0, 0, 0, 0.076),
    7.6px 7.3px 7.1px rgba(0, 0, 0, 0.069),
    13.6px 13px 12.7px rgba(0, 0, 0, 0.064),
    25.5px 24.2px 23.8px rgba(0, 0, 0, 0.056),
    61px 58px 57px rgba(0, 0, 0, 0.041);
  border-radius: 8px;
  overflow: hidden;
}

.card-wrapping {
  padding: 8px;
  background: repeating-linear-gradient(
      135deg,
      var(--color-alt),
      var(--color-alt) 12px,
      transparent 12px,
      transparent 24px,
      var(--color-primary) 24px,
      var(--color-primary) 36px,
      transparent 36px,
      transparent 48px
    )
    0 0;
}
.card-wrapping-inner {
  border-radius: 8px;
  background: var(--color-card);
  overflow: hidden;
}

.person-mainsection {
  padding: 24px;
}

.person-name {
  font-family: 'Ephesis', cursive;
  font-size: 42px;
  line-height: 0.9;
  color: transparent;
  text-shadow: 1px 1px #00000024, 0px 0px var(--color-primary-darker),
    -1px -1px white;
}

.person-name::first-letter {
  font-size: 1.4em;
  font-weight: normal;
}

.formfield-inline {
  display: flex;
  align-items: center;
}
.formfield-inline-label {
  font-size: 11px;
  transition: opacity 0.2s;
  line-height: 1;
}
.formfield-inline-label.--striked {
  opacity: 0.5;
  text-decoration: line-through;
}

.main-options {
  display: flex;
  align-items: center;
}
.options-prompt {
  color: #000;
  opacity: 0.5;
  font-size: 10px;
  margin: 8px 0 6px;
}
.main-options-sep {
  width: 24px;
  text-align: center;
  opacity: 0.3;
  flex-shrink: 1;
}
.main-options-sep::before {
  display: block;
  content: '/';
}

.more-options {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.8s ease-in-out;
}
.more-options.--open {
  max-height: 80px;
}

.send-button-container {
  max-height: 0px;
  background-color: var(--color-card-bottom);
  overflow: hidden;
  transition: max-height 0.8s ease-in-out;
}
.send-button-container.--open {
  max-height: 65px;
}
.send-button-wrapper {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
}

.send-button {
  position: relative;
  padding: 6px 32px;
  border-radius: 8px;
  border: none;
  background-color: var(--color-primary-button);
  box-shadow: 0 4px var(--color-primary-darker);
  color: var(--color-primary-contrast);
  font-weight: bold;
  transition: background-color 0.2s, color 0.2s, transform 0.05s,
    box-shadow 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.send-button:hover {
  background-color: var(--color-primary-lighter);
}
.send-button:active,
.send-button.--sending {
  transform: translateY(3px);
  box-shadow: 0 1px var(--color-primary-darker);
}

.send-button.--sending {
  color: transparent;
}
.send-button::before {
  display: flex;
  align-items: center;
  justify-content: center;
  content: attr(data-sending);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: transparent;
  transform: translateY(-10px);
}
.send-button.--sending::before {
  color: white;
  transform: translateY(0);
  transition: color 0.2s, transform 0.5s;
}

.enveloppe-wrapper {
  position: relative;
}
.enveloppe-part {
  transition: transform 1.5s 0.2s ease-in-out, opacity 0.5s;
}
.--enveloppe-open .enveloppe-part {
  transition: transform 1.2s 0.2s ease-in-out, opacity 0.5s 1s;
  transform: translateY(80%);
  opacity: 0;
}

.enveloppe-back {
  position: absolute;
  z-index: 1;
  left: -16px;
  right: -16px;
  bottom: -16px;
  top: -16px;
  background-color: #ccc;
  border-radius: 12px;
  box-shadow: 1.7px 1.6px 1.6px rgba(0, 0, 0, 0.1),
    4.1px 3.9px 3.8px rgba(0, 0, 0, 0.076),
    7.6px 7.3px 7.1px rgba(0, 0, 0, 0.069),
    13.6px 13px 12.7px rgba(0, 0, 0, 0.064),
    25.5px 24.2px 23.8px rgba(0, 0, 0, 0.056),
    61px 58px 57px rgba(0, 0, 0, 0.041);
}
.enveloppe-front {
  position: absolute;
  z-index: 20;
  left: -16px;
  right: -16px;
  bottom: -16px;
  top: -16px;
  border-radius: 12px;
  overflow: hidden;
}

.--enveloppe-open .enveloppe-front {
  pointer-events: none;
}

.enveloppe-front-left {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, #cfcfcf, #fff);
  clip-path: polygon(0% 0%, 45% 60%, 0% 100%);
}
.enveloppe-front-right {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, #cfcfcf, #f0f0f0);
  clip-path: polygon(100% 0%, 55% 60%, 100% 100%);
}
.enveloppe-front-bottom {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, #c6c6c6 50%, #f5f5f5);
  clip-path: polygon(0% 100%, 42.3% 55.45%, 57.7% 55.45%, 100% 100%);
}
.enveloppe-front-top {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, #f4f4f4 50%, #e2e2e2);
  clip-path: polygon(0% 0%, 37.32% 63.92%, 62.68% 63.92%, 100% 0%);
  transform-origin: top;
  transition: transform 0.5s 2s;
}
.--enveloppe-fully-closed .enveloppe-front-top {
  transition: transform 0.3s;
  cursor: pointer;
}
.enveloppe-front-top:hover {
  transform: scaleY(0.9);
}
.--enveloppe-open .enveloppe-front-top {
  transform: scaleY(0);
  transition: transform 0.5s;
}

.enveloppe-front-top-name {
  margin-top: 16px;
  margin-left: 60px;
  font-family: 'Ephesis', cursive;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-primary-darker);
  opacity: 0.8;
}
.enveloppe-front-top-stamp-wrapper {
  position: absolute;
  top: 30px;
  right: 41px;
  opacity: 0.6;
}
.enveloppe-front-top-stamp-img {
  display: block;
  height: 55px;
  width: 135px;
}

.enveloppe-content {
  position: relative;
  z-index: 10;
}

.admin-list > * {
  margin-top: 40px;
}

/** -- main info -- */
.main-info-text {
  margin-top: 30%;
  margin-bottom: 10%;
  font-size: 70px !important;
}
.main-info-details {
  animation: appear 0.5s 2.3s both;
  color: var(--color-details);
  margin-bottom: 10%;
}
.main-info-blurp {
  text-align: center;
  margin-bottom: 20px;
  font-size: 12px;
}
.main-info-list {
  background-color: #ffffff25;
  padding: 24px 32px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: inset 1.7px 1.8px 2.7px rgba(0, 0, 0, 0.032),
    inset 4.3px 4.6px 6.9px rgba(0, 0, 0, 0.043),
    inset 8.9px 9.4px 14.2px rgba(0, 0, 0, 0.048),
    inset 18.3px 19.3px 29.2px rgba(0, 0, 0, 0.053),
    inset 50px 53px 80px rgba(0, 0, 0, 0.07);
}
.main-info-list-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.main-info-list-item dt {
  display: flex;
  opacity: 0.7;
}
.main-info-list-item dt i {
  margin-right: 6px;
}
.main-info-list-item dt::after {
  content: ':';
}
.main-info-list-item dd {
  font-weight: bold;
  margin-left: 8px;
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
}

/** Icons courtesy of https://feathericons.com */
.icon-calendar {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" stroke="%23fff7de" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
}
.icon-location {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" stroke="%23fff7de" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
}
.icon-music {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" stroke="%23fff7de" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>');
}
.icon-gift {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" stroke="%23fff7de" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg>');
}