body{
	background-image: url('../gmb/bg.jpg');
	color: #000000;
	font-family: "bold", serif;
	background-repeat: no-repeat;
    background-size: 100% 680px;
	display: inherit;
	align-items: center;
	position:fixed;
	inset: 0 !important;
    width: 100%;
    height: 100%;
	background-color: transparent;
	z-index: 1056 !important;
	}

    .bingkai-index{
    background-image: url('../gmb/bingkai.png');
    background-size: 100% 100%;
    margin-top: -30px;
    margin-bottom: -100px;
    margin-right: 0;
	margin-left: 20px;
    width: 270px;
    height: 260px;
    opacity: 100%;
    overflow: hidden;
	display: flex;
	position: sticky;
	justify-content: center;
	justify-self: center;
		
    border-color: transparent !important;
    background-repeat: no-repeat;
    z-index: -21;
    }

    .frame-mempelai{
    background-size: 100% 22%;
    margin-top: 74px;
    margin-bottom: -240px;
    width: 270px;
    height: 260px;
    opacity: 100%;
    overflow: hidden;
	display: flex;
	position: relative;
		
    border-color: transparent !important;
    background-repeat: no-repeat;
    z-index: -21;
    }

	.frame-salam{
	background-image: url('../gmb/bingkai.png');
	background-size: 100% 100%;
	margin-top: 100px;
	margin-bottom: 60px;
	margin-right: 39px;
	width: 300px;
	height: 250px;
	opacity: 100%;
	overflow: hidden;
	display: flex;
	position: relative;
			
	border-color: transparent !important;
	background-repeat: no-repeat;
	z-index: -21;
	}

	.cover > h2 {
	font-family: "Great Vibes", cursive;
	font-weight: 100;
	font-size: 6.3vh;
	color: #000000;
	margin-top: -180px;
    margin-bottom: 5px;
	margin-left: 12px;
	}
			  
	  .inti{
	  max-width: 85%;
	  color: #000;
	  margin-bottom:unset;
	  background-repeat: no-repeat;
	  display: inline-block;
	  margin-left: -14px;
	  }

      .h1-opening > h1 {
	  font-family: "Great Vibes", cursive;
	  font-weight: 500;
	  font-style: normal;
	  font-size: 32px;
	  margin-bottom: 80px;
	  margin-top: 40px;
	  }
				  
	  .great-vibes-regular {
	  font-family: "Great Vibes", cursive;
	  font-weight: 400;
	  font-style: normal;
	  }  
				   
	  .depan > h3 {
	  font-size: 3vh;
	  font-weight: 600;
	  font-family: "Arial";
	  margin-top: 60px;
	  justify-content: revert-layer;
	  color: #000000;
	  }
				  
	  .quotes > h5{
	  margin-block: 13px;
	  max-width: 98%;
	  font-size: 2.4vh;
	  margin-right: 0px;
	  font-family: arial;
	  word-wrap: anywhere;
	  text-align: center;
	  justify-content: revert-layer;
	  color: #482669;
	  }

	.salam > h5{
	margin-block: 100px;
	margin-bottom: -10px;
	max-width: 98%;
	font-size: 2.8vh;
	margin-right: 1px;
	font-family: arial;
	word-wrap: anywhere;
	text-align: center;
	justify-content: revert-layer;
	color: #1f3458;
	}
					 
	  div.badan{
	  width: 100%;
	  text-align: center;
	  height: fit-content;
	  color: #000000;
	  }
					 
	  div.halaman{
	  text-align: center;	
	  justify-self: center;
	  word-wrap: anywhere;
	  }
				  
				  
	  .cover img {
	  height: 200px;
	  justify-self: center;
	  justify-items: center;
	  display: -webkit-inline-box;
	  margin-top: 0px;
	  }

	.cover > h1 {
	font-family: "Great Vibes", cursive;
	font-weight: 600;
	font-size: 5vh;
    margin-top: 60px;
	margin-bottom: 40px;
	color: #1f3458;
	}
				  
				  
	  .cover > h4 {
	  font-family: "Signika", serif;
	  font-weight: bold;
	  font-size: 2.5vh;
	  width: 100%;
	  margin-left: auto;
	  margin-right: -10px;
	  margin-top: 0vh;
	  color: #000000;
	  }
				  
	.nama-mempelai{
	color: #482669;
	font-family: "Great Vibes", cursive;
	font-style: normal;
	font-size: 6vh;
	text-align: center;
	margin-top: -120px;  
	}

	.nama-mempelai-salam{
	color: #1f3458;
	font-family: "Great Vibes", cursive;
	font-style: normal;
	font-size: 3.5vh;
	text-align: center;  
	margin-top: -258px; 
	margin-right: 30px;
	margin-bottom: -70px;
	}

	.nama-mempelai-pria{
	color: #482669;
	font-family: "Great Vibes", cursive;
	font-style: normal;
	font-size: 7vh;
	text-align: center;
	margin-block: 70px;
	margin-bottom: -30px;
	}

	.nama-ortu-pria > h5{
	margin-block: -10px;
	max-width: 100%;
	font-size: 2.4vh;
	margin-right: 18px;
	font-family: arial;
	word-wrap: anywhere;
	text-align: center;
	justify-content: revert-layer;
	color: #482669;
	}

	.dan-mempelai{
	color: #482669;
	font-family: "Great Vibes", cursive;
	font-style: normal;
	font-size: 12vh;
	text-align: center;
	margin-block: 80px;
	margin-bottom: -20px;
	}

	.acara > h3 {
	font-size: 4vh;
	font-family: 'HyperKids', sans-serif;
	margin-top: 55px;
	justify-content: revert-layer;
	color: #000000;
	}

	.menyelenggarakan-acara > h5{
	margin-top: -46px;
	max-width: 98%;
	font-size: 2.4vh;
	margin-right: 14px;
	font-family: arial;
	word-wrap: anywhere;
	text-align: center;
	justify-content: revert-layer;
	color: #000000;
	}

	.akad > h2{
	max-width: 100%;
	font-size: 7vh;
	margin-right: 14px;
	margin-top: -13px;
	font-family: "Great Vibes", cursive;
	word-wrap: anywhere;
	text-align: center;
	justify-content: revert-layer;
	color: #482669;
	text-align: center;
	}

	.tgl-akad > h3{
	max-width: 100%;
	font-size: 3vh;
	margin-top: -50px;
	font-family: Arial;
	word-wrap: anywhere;
	text-align: center;
	justify-content: revert-layer;
	color: #000000;
	text-align: center;
	font-weight: bold;
	}

	.resepsi > h2{
	margin-top: -3px;
	margin-bottom: -20px;
	max-width: 100%;
	font-size: 7vh;
	margin-right: 14px;
	font-family: "Great Vibes", cursive;
	word-wrap: anywhere;
	text-align: center;
	justify-content: revert-layer;
	color: #482669;
	text-align: center;
	}

	.tgl-resepsi > h3{
	max-width: 100%;
	font-size: 3vh;
	font-family: Arial;
	word-wrap: anywhere;
	text-align: center;
	justify-content: revert-layer;
	color: #000000;
	text-align: center;
	font-weight: bold;
	}

	.lokasigooglemaps > h2 {
	margin-top: 60px;
	margin-bottom: 7px;
	font-size: 4.3vh;
	font-family: 'HyperKids', sans-serif;
	justify-content: revert-layer;
	color: #000000;
	}

	.googlemaps {
    max-width: 100%;
	width: 310px;
	height: 300px;
	border-radius: 5%;
	box-shadow: -4px 4px 2px #000, 0 0px 1px #000000;
	justify-content: revert-layer;
	color: #482669;
	}

	.turut-mengundang > h2 {
	max-width: 100%;
	margin-top: 50px;
	font-size: 5.3vh;
	font-family: "Great Vibes", cursive;
	justify-content: revert-layer;
	color: #000000;
	}

	.inti-turutmengundang{
	max-width: 100%;
	color: #000;
	margin-bottom:unset;
	background-repeat: no-repeat;
	display: inline-block;
	margin-left: 4px;
	}

    .kamera {
	background-image: url('../gmb/kamera-gallery.png');
	background-size: 100% 100%;
	margin-bottom: 10px;
	margin-top: -70px;
	margin-left: -40px;
	width: 100px;
	height: 100px;
	opacity: 100%;
	overflow: hidden;
	display: flex;
	position: relative;
			
	border-color: transparent !important;
	background-repeat: no-repeat;
	z-index: -21;
	}

    .album {
	background-image: url('../gmb/album-gallery.png');
	background-size: 100% 100%;
    margin-top: 100px;
	margin-right: 10px;
	width: 250px;
	height: 140px;
	opacity: 100%;
	overflow: hidden;
	display: flex;
	position: relative;
				
	border-color: transparent !important;
	background-repeat: no-repeat;
	z-index: -21;
	}

	.text-ucapan > h1{
	max-height: 100%;
	max-width: 100%;
	margin-top: 52px;
	font-size: 6vh;
	color: #482669;
	font-family: "Great Vibes", cursive;
	font-weight: 600;
	font-style: normal;
	} 

	.badan-rsvp{
	max-width: 1000%;
	color: #000;
	margin-bottom:unset;
	background-repeat: no-repeat;
	display: inline-block;
	}


	.text-ucapan-tamu > h2{
	max-height: 100%;
	padding: 1px 0px 1px 30px 0px;
	height: 57px;
	width: 300px;
	text-align: right;
	padding: -0px 25px 3px 3px;
	justify-self: center;
	font-family: cursive;
	max-width: 85%;
	margin-top: -15px;
	font-size: 3vh;
	color: #1f3458;
	font-weight: 700;
	font-style: normal;
	background-image: url('../gmb/bg-rounded.png');
	border:  solid 2px goldenrod;
	border-right-color: #000;
	box-shadow: -4px 4px 2px #000, 0 0px 1px #000000;
	} 
	
	.badan-rsvp-tamu{
	max-width: 100%;
	color: #000;
	margin-bottom:unset;
	background-repeat: no-repeat;
	display: inline-block;
	}

	.status-kehadiran{
    text-align: left;
	}

	.komentar{
	text-align: left;
	word-wrap: anywhere;
	justify-content: revert-layer;
	}

	.date-ucapan{
	font-size: 12px;
	text-align: center;
	word-wrap: anywhere;
	font-weight: 600;
	}

	.card-komentar{
	background: #fff;
	max-width: 90%;
	word-wrap: anywhere;
	border: solid 1px goldenrod;
	border-radius: 3%;
	padding-inline: 10px;
	margin-top: 9px;
		
	object-fit: cover;
	background-image: url('../gmb/bg-rounded.png');
	box-shadow: -3px 3px 2px #0050eeb3, 0 2px 1px #000000;
	}

   .page-link {
	max-width: 100;
	width: 90%;
	position: fixed;
	display: -webkit-inline-box;
	overflow: hidden;
	bottom: 0; left: 10; right: 0;
	transform: translate(0%);
	position: sticky;
	margin-top: -13px;
	}


	.card-nama-tamu{
	background: #fff;
	max-width: 80%;
	justify-self: center;
	word-wrap: anywhere;
	border: solid 1px goldenrod;
	border-radius: 3%;
	padding-inline: 7px;
	margin-top: 9px;
			
	object-fit: cover;
	background-image: url('../gmb/bg-rounded.png');
	background-repeat: no-repeat;
	box-shadow: -3px 3px 2px #0050eeb3, 0 2px 1px #000000;
	}

	.paging-angka-ucapan {
	margin-top: 20px;
	margin-bottom: 50px;
	justify-self: center;
	object-fit: cover;
	background-image: url('../gmb/bg-rounded.png');
	background-repeat: no-repeat;
    background-size: 100% 100%;
	}

	.logo-svg-rsvp {
	margin-left: -185px;
	margin-top: -60px;
	}

	.gift > h1 {
	margin-top: 40px;
	margin-bottom: 0px;
	font-size: 6.3vh;
	font-family: "Great Vibes", cursive;
	justify-content: revert-layer;
	color: #1f3458;
	}

	.penutup > h4{
	margin-top: 150px;
	font-size: 2.4vh;
	color: #1f3458;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-style: normal;
	text-align: center;
	align-self: center;
	justify-content: center;
	}

	.penutup-keluarga-kedua-mempelai {
	font-size: 3vh;
	color: goldenrod;
	font-family: "Great Vibes", cursive;
	}

	.penutup-hormatkami{
	font-size: 3vh;
	}

	.hak-cipta > h3 {
	position: fixed;
	font-size: 2.1vh;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	align-self: center;
	text-decoration: none;
	background: #ffffffa8;
	padding-top:2px;
	padding-bottom:2px;
	border: solid 2px goldenrod;
    height: 0px;
    width: 80%;
    min-height: 16px;
	min-width: 10px;
	margin-top: 30px;
	color: #fff;
	}

	/* section audio */
    .audio {
	align-items: center;   
	justify-content: center; 
	}