@font-face {
    font-family: 'La Flibustisre';
    src: url(https://res.cloudinary.com/areeba/raw/upload/v1650492268/La_Flibusti%C3%A8re.ttf);
  }

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

  body {
    margin: 0;
    padding: 0;
    font-family: 'Lobster', cursive;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url("https://withjoy.com/assets/public/styles/prod/bismillah/1fa3e8a83f0eba4e3bcfb8e1c80fd44b44bbc9872f80acd6357e4326da88409b@1x") no-repeat center center fixed;
    background-size: cover;
    opacity: 0.8;
    z-index: -1;
  }

  .wedding-card {
    width: 90vw;
    max-width: 500px;
    height: 90vw;
    max-height: 500px;
    position: relative;
    perspective: 1000px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
  }

  .wedding-card.fade-in {
    opacity: 1;
    transform: translateY(0);
  }

  .cover, .container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-left: 1px solid rgb(181,119,41);
    background-image: url('https://res.cloudinary.com/areeba/image/upload/v1650488986/938ba925943764901f2c2889ea835d42--dark-navy-blue-cobalt-blue.jpg');
    background-size: cover;
    background-position: center;
    transition: transform 2s ease;
    overflow: hidden;
  }

  .cover {
    z-index: 2;
    transform-origin: left center;
    transform: rotateY(0deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .wedding-card.open .cover {
    transform: rotateY(-100deg);
  }

  .container {
    z-index: 1;
  }

  .cover-style {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
  }

  .cover-heading {
    position: relative;
    font-family: 'La Flibustisre';
    font-size: 8vw;
    background: -webkit-linear-gradient(#F7D182, #A16A2A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    z-index: 1;
  }

  .invite {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: #BE8D49;
    text-align: center;
    padding: 0 20px;
    z-index: 2;
  }

  .invite h1 {
    font-size: 8vw;
    margin: 0 0 20px;
    font-family: 'La Flibustisre';
    background: -webkit-linear-gradient(#F7D182, #A16A2A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .invite h2 {
    font-size: 5vw;
    margin: 0 0 15px;
    font-weight: normal;
    font-family: 'Lobster', cursive;
  }

  .access-code-form {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .access-code-form input[type="text"],
  .access-code-form button {
    height: 42px;
    font-size: 16px;
    margin: 0;
    padding: 0 10px;
    line-height: 1;
    border: 2px solid #BE8D49;
    font-family: 'Lobster', cursive;
    color: #403B4A;
    font-weight: bold;
    outline: none;
    display: flex;
    align-items: center;
  }

  .access-code-form input[type="text"] {
    font-family: "Estonia", cursive;
    font-weight: 600;
    font-style: normal;
    font-size: x-large;
    border-radius: 5px 0 0 5px;
    width: 60%;
    max-width: 200px;
    border-right: none;
  }

  .access-code-form button {
    border-radius: 0 5px 5px 0;
    background: #BE8D49;
    border-left: none;
    cursor: pointer;
    justify-content: center;
    padding: 0 6px;
  }

  .access-code-form button img {
    height: 85%;
    width: auto;
    display: block;
    margin: 0 auto;
    filter: brightness(0) invert(1);
  }

  .access-code-form button:hover {
    background: #A16A2A;
  }

  .border-1, .border-2, .border-3, .border-4 {
    width: 40%;
    position: absolute;
  }

  .border-1 { top: 0; left: 0; }
  .border-2 { top: 0; right: 0; transform: scaleX(-1); }
  .border-3 { bottom: 0; left: 0; transform: scaleY(-1); }
  .border-4 { bottom: 0; right: 0; transform: scaleX(-1) scaleY(-1); }

  @media (min-width: 500px) {
    .invite h1 { font-size: 45px; }
    .invite h2 { font-size: 24px; }
    .access-code-form input[type="text"] { font-size: 20px; max-width: 250px; }
    .cover-heading { font-size: 50px; }
  }

  /* Fallback for users with JS disabled */
  noscript .cover {
    transform: rotateY(-100deg) !important;
  }