@import url("https://fonts.googleapis.com/css2?family=Sacramento&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500;1,600;1,700;1,800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&family=Poppins:wght@300;400;800&family=Roboto+Slab:wght@300;400;700&family=Sacramento&display=swap");

@font-face {
  font-family: "Sagire";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/Sagire.woff) format("woff");
}

@font-face {
  font-family: "Marthin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/Marthin.woff2) format("woff2");
}

@font-face {
  font-family: "Bagnolia";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/Bagnolia-Regular.woff) format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/Inter-Regular.woff2) format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/Inter-Bold.woff) format("woff2");
}

@font-face {
  font-family: "Trebuchet MS";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./TrebuchetMS.woff) format("woff");
}

@font-face {
  font-family: "Miralose";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./Miralose.woff2) format("woff2");
}

@font-face {
  font-family: "Roasting";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./cherry.woff2) format("woff2");
}

@font-face {
  font-family: "Cafetoria";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/cafetoria.woff2) format("woff2");
}

/* // ArsenicaTrial-Bold.woff */
/* ArsenicaTrial-BoldItalic.woff */

@font-face {
  font-family: "Arsenica-Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/ArsenicaTrial-Bold.woff) format("woff");
}

@font-face {
  font-family: "Arsenica-Bold-Italic";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/ArsenicaTrial-BoldItalic.woff) format("woff");
}

@font-face {
  font-family: "Gotham-Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/Gotham-Bold.woff) format("woff");
}

@font-face {
  font-family: "Gotham-Book";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./fonts/Gotham-Book.woff) format("woff");
}

@font-face {
  font-family: "Gotham-Book-Italic";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(./fonts/Gotham-BookItalic.woff) format("woff");
}

@font-face {
  font-family: "Gotham-Medium";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/Gotham-Medium.woff) format("woff");
}

@font-face {
  font-family: "Beachfly";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/Beachfly\ Free\ Trial.woff2) format("woff2");
}

@font-face {
  font-family: "Brittany";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/BrittanySignature.woff) format("woff");
}

@font-face {
  font-family: "Master";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/master_of_break.woff2) format("woff2");
}

/* warna */
:root {
  --aksen1: #9d8c7c;
  --aksen2: #958c83;
  --aksen3: #888888;
  --aksen4: #656562;
  --aksen5: #cabdad;
  --aksen6: #7d595942;
  --teksButtonDepan: #49413a;

  --swiper-theme-color: var(--aksen_2) !important;

  /* --aksen_1 : #f4dcb8; */
  /* --aksen_1 : #614722; */
  /* --aksen_2 : #f5b34f; */
  /* --aksen_3 : #b67719; */
  /* --aksen_4 : #fcc574; */
  /* buat tbl musik */
  /* --aksen_5 : #e3c293;  */
  /* --aksen_5 : #3c290e;  */

  /* protokol kesehatan */
  /* --aksen_6 : #00000045; */
  /* button depan */
  /* --aksen_7:#614722; */

  /* --aksen_1 : #f4dcb8; */
  /* --aksen_1: #c1a887; */
  --aksen_1: #658864;
  --aksen_2: #b7b78a;
  --aksen_3: #dddddd;
  --aksen_4: #eeeeee;
  /* buat tbl musik */
  /* --aksen_5 : #e3c293;  */
  --aksen_5: #9a6d4e;

  /* protokol kesehatan */
  --aksen_6: #444;
  /* button depan */
  --aksen_7: #9d6f4e;

  --aksen_8: #fef1df;
}

/* .swiper-container {
            width: 100%;
            height: 100vh;
        } */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

path {
  fill: #494949;
}

html,
body {
  /* height: 100vh; */
  height: 100%;
  /* width: 100%; */
  padding: 0px;
  margin: 0;
}

.tengah {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.tengah2 {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  justify-items: center;
  align-items: center;
}

.depan .pasangan,
#popup .pasangan {
  font-size: 2.4em;
  line-height: 2.2em;
  /* font-family: "BSacramento", cursive; */
  font-family: "Master", cursive;
  /* color: red; */
}

/* #main {
    height: 100%;
} */

.font-tipis {
  font-family: "Gotham-Book";
  font-weight: 400;
}

.font-tebal {
  font-family: "Gotham-Bold";
  font-weight: 700;
}

/* //rgb(221, 221, 221); */
body {
  background-color: var(--aksen_1);
  color: rgb(41, 41, 41);
  font-family: "Gotham-Book";
}

.theWeddingOf {
  font-family: "Inter", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 0.7em;
}

.warna-putih {
  color: whitesmoke;
}

#hal-pasangan {
  height: 100%;
  text-align: center;
  scroll-behavior: smooth;
}

#hal-acara {
  /* height: 100%; */
  text-align: center;
  scroll-behavior: smooth;
}

/* 2 */
.foto {
  /* border-radius: 150px; */
  width: 256px;
  /* border: 2px solid #b67719; */
  /* padding: 0.2em; */
}

.pasangan .nama {
  font-size: 1em;
  font-family: "Gotham-Medium", cursive;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.736);
}

.nama-panggilan {
  font-family: "Master";
  font-size: 2.4em;
  line-height: 2em;
  font-weight: 400;
  color: var(--aksen_1);
  /* text-shadow: 2px 2px 19px #00000094; */
}

.pasangan .anak-dari {
  font-size: 1.2em;
  color: rgba(0, 0, 0, 0.736);
}

.sosmed-pasangan {
  fill: #2c2c2c;
}

.amp {
  font-size: 2.4em;
  font-family: "Dancing Script", cursive;
}

.tulisan {
  font-size: 1.2em;
  color: var(--aksen_3);
  font-family: "Arsenica-Bold";
}

.tulisan2 {
  font-family: "Cafetoria";
  /* color: var(--aksen_1); */
  color: rgb(42, 42, 42);
  font-size: 1.5em;
  font-weight: 200;
}

/* 3 */
.bottom-item {
  padding: 12px;
  border-radius: 8px;
  flex: 1;
  text-align: center;
  color: rgba(41, 41, 41, 0.541);
}

.bottom-item:hover {
  background-color: rgba(255, 255, 255, 0.486);
  box-shadow: 5px 10px #888888;
  color: rgb(41, 41, 41);
}

/* 4 */
.kotak {
  background-color: var(--aksen_1);
  padding: 16px;
  border-radius: 10px;
  margin: 20px;
  margin-top: 20px;
}

.subjudul {
  font-family: "Cafetoria", serif;
  font-size: 1.6em;
  font-weight: 400;
  /* margin-bottom: 0.4em; */
  color: #ffffffcf;
  /* rotate: 356deg; */
}

.acara-sub-judul {
  color: white;
  font-family: "Poppins";
  font-weight: 800;
  font-size: 1.2em;
  margin: 0.4em;
}

.tgl {
  color: white;
}

.time-box {
  text-align: center;
  /* width: 40px; */
  /* background-color: red; */
  width: 80px;
  padding: 10px;
}

.time-big {
  font-family: "Gotham-Bold";
  font-weight: 700;
  font-size: 1.4em;
  margin: 0em 0;
  border-radius: 100px;
  background-color: var(--aksen_1);
  /* height: 58px; */
  color: black;
  line-height: 2.5em;
}

.seperator {
  display: flex;
  align-items: center;
  font-family: "Beachfly";
  font-size: 2em;
}

.time-sub {
  font-family: "Gotham-Bold";
  font-size: 0.8em;
}

.jam-acara {
  color: white;
  font-size: 1.8em;
  font-weight: 200;
  margin-bottom: 1em;
}

.alamat-nikah {
  color: white;
}

.margin1em {
  margin: 1em;
}

.key1 {
  text-transform: uppercase;
  color: #0000005c;
  font-size: 0.8em;
}

.value1 {
  color: #4b5358;
  text-align: left;
}

.box-item {
  margin-top: 8px;
}

/* global */
.judul-hal {
  font-family: "Sacramento", cursive;
  font-size: 2.5em;
  margin: 30px;
  text-align: center;
  margin: 10px 20px;
  margin-top: 5vh;
}

.card-img {
  width: 160px;
  height: 160px;
  border-radius: 5px;
  object-position: center;
  object-fit: cover;
}

.grid-item,
.grid-item-big {
  /* width: calc(20%); */
  /* width: 100px; */
  padding: 5px;
}

/* @media only screen and (max-width: 600px) {
            .grid-item {
                width: calc(90%);
                padding: 5px;
            }

            .grid-item-big {
                width: calc(90%);
                padding: 5px;
            }
        } */

* {
  box-sizing: border-box;
}

.depanBackgroundImg {
  object-fit: cover;
  object-position: center;
  /* width: 100%; */
  /* width:calc(100% - 35px);          this is an example */
  /* height:300px;         this is an example */
  height: 100%;
  max-width: 100%;
  filter: blur(5px);
  transition: 1s all ease-in-out;
}

.depan2 {
  transform: scale(1.2);
  filter: blur(0px);
}

.depanBackground {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  /* width: 100%; */
  height: 100vh;
  width: 100%;
  overflow: auto;
}

.depan {
  color: white;
  height: 100%;
}

.hidden {
  display: none;
}

#popup {
  height: 100%;
  width: 100%;
}

#popup::before {
  /* background: url(./assets/cover.jpg); */
  background-size: cover;
  background-position: center;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -99;
  /* filter: brightness(0.5); */
  transition: all 1.5s ease-out;
  /* transform: scale(1.2); */
  filter: brightness(0.5) blur(10px);
  /* overflow: hidden; */
}

#overlay {
  background: url(./assets/cover.jpg);
  filter: brightness(0.5);
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  z-index: -1;
  transition: background-image 0.5s ease;
}

#popup.loaded::before {
  filter: brightness(0.5) blur(0px);
  /* transform: scale(1); */
}

#komen {
  height: 100%;
  overflow: scroll;
}

/* #main{
            height: 100%;
            width: 100%;
        } */
.nama-komentar {
  font-size: 1.2em;
  font-weight: bold;
  background: #656562;
  color: whitesmoke;
  padding: 12px;
  transform: rotate(359deg);
}

.isi-komentar {
  font-size: 1em;
  /* font-weight: bold; */
  padding: 28px;
  background: azure;
  margin: 12px;
  transform: rotate(359deg);
  box-shadow: 7px 9px #88888880;
}

/* 11 */
.btn {
  appearance: auto;
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  cursor: default;
  background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
  box-sizing: border-box;
  margin: 0em;
  font: 400 13.3333px Arial;
  padding: 10px 10px;
  border-width: 0;
  border-style: none;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-image: initial;
  margin-bottom: 10px;
}

.btn:hover {
  background-color: rgb(168, 168, 168);
}

.btn:active {
  /* background-color: rgb(168, 168, 168); */
  border-style: inset;
}

.btn:focus {
  /* background-color: rgb(168, 168, 168); */
  outline: none;
}

.komen {
  margin: 8px;
  /* background: aliceblue; */
  /* padding: 32px; */
  border-radius: 12px;
  margin-bottom: 32px;
  /* box-shadow: 4px 4px 8px #b7b7b7; */
}

.komen-nama {
  font-size: 0.9em;
  font-weight: 700;
  /* margin-bottom: 0.5em; */
  color: var(--aksen_1);
}

.komen-isi {
  font-size: 0.8em;
}

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

input {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  appearance: textfield;
  background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
  -webkit-rtl-ordering: logical;
  cursor: text;
  margin: 0em;
  font: 400 13.3333px Arial;
  padding: 10px 10px;
  border-width: 0;
  border-style: inset;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-image: none;
}

textarea {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  appearance: textarea;
  background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
  -webkit-rtl-ordering: logical;
  flex-direction: column;
  resize: auto;
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  column-count: initial !important;
  margin: 0em;
  font: 400 13.3333px Arial;
  border-width: 0;
  border-style: solid;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-image: none;
  padding: 10px;
}

.covid {
  font-size: 1em;
  margin: 0px 24px;
}

.btn-depan {
  background-color: var(--aksen_2);
  padding: 0.8em 1.3em;
  border-radius: 2em;
  color: #252525e3;
  border: 0;
  transition: all 0.2s linear;
}

.btn-depan:active {
  transform: scale(0.8);
}

.btn-depan2 {
  background-color: var(--aksen_1);
  padding: 0.8em 1.8em;
  border-radius: 2em;
  color: rgb(19, 19, 19);
  border: 0;
}

.grid-3 {
  background-position: center;
  background-size: cover;
  width: 128px;
  height: 128px;
  border-radius: 10px;
  margin: 4px;
}

.grid-2-1 {
  background-position: center;
  background-size: cover;
  width: 256px;
  height: 256px;
  border-radius: 10px;
  margin: 4px;
}

.grid-2-2 {
  background-position: center;
  background-size: cover;
  width: 128px;
  height: 256px;
  border-radius: 10px;
  margin: 4px;
}

.grid-1 {
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 256px;
  border-radius: 10px;
  margin: 4px;
}

.avatar {
  width: 32px;
  height: 32px;
}

.komen-avatar {
  fill: var(--aksen_4);
}

.protocol {
  padding: 1em;
  background: #ffffff1a;
  border-radius: 100px;
}

.protocol-text {
  color: rgb(249 249 249 / 76%);
}

.gift-more-button {
  background: var(--aksen_2);
  border: 0;
  padding: 1em 2em;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.811);
  font-family: "Gotham-Book";
}

.gift-more-button:hover {
  background: #026d80;
}

.gift-more-button:active {
  background: #024450;
}

/* foto */
.foto {
  border-radius: 200px;
  border: 3px solid var(--aksen_1);
  padding: 7px;
  margin-bottom: 1em;
}

#playPause:active {
  transform: scale(0.8);
}

.attendance {
  color: white;
  padding: 0.3em 0.6em;
  font-size: 0.8em;
}

.kotakAkad {
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 23%);
  width: 80%;
  font-family: "Gotham-Book";
  backdrop-filter: blur(21px);
}

.judul-akad {
  text-align: center;
  font-weight: 700;
  font-family: "Inter";
  height: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.582);
  padding-top: 8px;
}

.ke-pinggir {
  display: flex;
  min-width: 195px;
}

.icon-akad {
  width: 45px;
  margin-right: 8px;
}

.isi-akad {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.726);
  font-size: 0.8em;
}

hr.hehe {
  /* background: rgba(255, 255, 255, 0.658); */
  border-color: rgba(255, 255, 255, 0.274);
}

.teks-tengah {
  text-align: center;
}

.putih {
  color: rgba(255, 255, 255, 0.74);
}

.story {
  padding: 0px 30px;
  font-size: 0.8em;
  margin-bottom: 3em;
}

#arr-back {
  transition: all 0.2s ease;
}

/*  */
.spark {
  background-image: url(./assets/sparks.png);
  background-size: 60px;
  background-repeat: no-repeat;
  background-position: center;
  width: 80%;
}

.gbr-galeri {
  background-size: cover;
  background-position: center;
  padding: 8px;
  border-radius: 4px;
  transition: background-image 0.2s ease 0s;
}

#gbr-1 {
  background-image: url(./assets/grid_/1.JPG);
}

#gbr-2 {
  background-image: url(./assets/grid_/0.JPG);
}

.flex-tengah {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story {
  background-color: rgba(255, 255, 255, 0.775);
  padding: 2.5em;
  text-align: left;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.heading-story {
  font-size: 2em;
  text-align: left;
  margin: 0;
  margin-bottom: 1em;
}

#story-container {
  background-image: url(./assets/grid_/0.jpg);
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease;
}

.komenn::placeholder {
  color: white;
}