:root{
      --cream: #d7b565;
      --bg: #fffadf;
      --shadow: 0 2px 2px rgb(0 0 0 /0.5);
}

body {
      font-size: 1.2rem;
      font-family: 'Work Sans', sans-serif;
      min-height: 4000px;
}

.hero::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(img/preweding.jpg);
      background-size: cover;
      background-position: center;
      z-index: -1;
}

.hero{
      position: relative;
      min-height: 100vh;
      background-color: rgb(255, 250, 223, 0.7);
}

.hero h1,
.hero h2,
.hero h3 {
      font-family: 'Beau Rivage', cursive;
      font-weight: bold;
      font-size: 6rem;
      color: var(--cream);
}

.hero h1{
      width: 35%;
      text-shadow: var(--shadow);
}

.hero h1.left{
      text-align: left !important;
}

.hero h1.right{
      text-align: right !important;
}

.hero h2 {
      font-weight: bold;
      font-size: 7rem;
      letter-spacing: 0.4rem;
      text-shadow: var(--shadow);
}

.hero h3 {
      font-weight: bold;
      font-size: 4rem;
      text-shadow: var(--shadow);
}

.hero h4 {
      font-size: 1.4rem;
}

.hero h6 {
      margin-top: 6rem;
      text-transform: uppercase;
      font-size: 1.6rem;
}

.hero p {
      font-size: 1.4rem;
}

.hero a {
      color: var(--cream);
      background-color: white;
      box-shadow: var(--shadow);
}

.hero a:hover {
      color: white;
      background-color: var(--cream);
}

.mynavbar {
      background-color: rgba(255, 255, 255, 0.3) !important;
      backdrop-filter: blur(4px);
}

.mynavbar .offcanvas {
      height: 100vh;
}

.mynavbar .navbar-brand,
.mynavbar .offcanvas-title {
      font-family: 'Beau Rivage', cursive;
      font-size: 3.2rem;
      font-weight: bold;
      color: var(--cream);
}

.mynavbar .nav-link {
      text-transform: uppercase;
}

.home{
      /* background-image: url(img/bg.jpg); */
      background-size: cover;
      min-height: 100vh;
      margin-top: -6.4rem;
      padding: 15rem;
}

.home h2{
      font-family: 'Beau Rivage', cursive;
      font-size: 3.2rem;
      font-weight: bold;
      color: var(--cream);
      letter-spacing: 0.5rem;
}

.home h3{
      font-size: 1.5rem;
      margin-bottom: 1.4rem;
      color: #666;
}

.home p{
      font-size: 1.1rem;
      color: #666;
}

.home .couple h3 {
      color: var(--cream);
      font-family: 'Beau Rivage', cursive;
      font-size: 5rem;
      text-shadow: var(--shadow);
}

.home .couple img {
      width: 100%;
}

.home .heart {
      width: 50px;
      height: 50px;
      background-color: white;
      border-radius: 50%;
      display: flex;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(290px);
}

.home .heart i {
      margin: auto;
      color: var(--cream);
}

.info h2,
.story h2,
.gallery h2,
.rsvp h2,
.gifts h2{
      color: var(--cream);
      font-family: 'Beau Rivage', cursive;
      font-size: 5rem;
      font-weight: bold;
}

.info{
      background-color: var(--bg);
      color: black;
      padding-top: 10rem;
      padding-bottom: 8rem;
}

.info .alamat{
      font-size: 1.1rem;
}

.info .description {
      font-size: 1rem;
      font-weight: 300;
}

.info .card{
      background-color: rgb(215, 181, 101) !important;
      color: white;
      border: 1px solid white;
}

.info .card-header{
      border-bottom: 1px solid white;
      text-transform: uppercase;
      letter-spacing: 0.2rem;
}

.info .card-body {
      font-size: 1.1rem;
}

.info .card-footer {
      border-top: 1px solid white;
      font-size: 1rem;
      font-weight: 300;
}

.story,
.gallery,
.rsvp,
.gifts{
      padding-top: 10rem;
      padding-bottom: 8rem;
}

.story span,
.gallery span,
.gifts span{
      text-transform: uppercase;
      font-size: 0.9rem;
      letter-spacing: 1px;
      display: block;
      margin-bottom: 1rem;
}

.story p,
.gallery p,
.rsvp p,
.gifts p{
      font-size: 1.1rem;
}

.story .book-view {
      overflow: hidden;
      width: 100%;
      height: 100%;
}

.story .book-view .book {
      margin: 1rem;
      width: 100%;
      height: 800px;
}

.story .book-view .page {
      width: 100%;
      height: 800px;
      background-color: var(--bg);
}

.story .book-view .book .page {
      -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      -ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      -o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.story .book-view .page img {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      margin: 0;
}

.story .book-view .shadow {
      -webkit-transition: -webkit-box-shadow 0.5s;
      -moz-transition: -moz-box-shadow 0.5s;
      -o-transition: -webkit-box-shadow 0.5s;
      -ms-transition: -ms-box-shadow 0.5s;

      -webkit-box-shadow: 0 0 20px #ccc;
      -moz-box-shadow: 0 0 20px #ccc;
      -o-box-shadow: 0 0 20px #ccc;
      -ms-box-shadow: 0 0 20px #ccc;
      box-shadow: 0 0 20px #ccc;
}

.story .book-view h1 {
      margin-top: 1rem;
      margin-bottom: 1rem;
      font-size: 2rem;
}

.story .book-view span {
      margin-top: 1rem;
      margin-bottom: 1rem;
      font-size: 0.9rem;
      text-align: center;
}

.story .book-view p {
      text-align: justify;
      margin-top: 1rem;
      margin-bottom: 1rem;
      font-size: 1rem;
}

.story .couple h3 {
      color: white;
      font-family: 'Beau Rivage', cursive;
      font-size: 5rem;
}

.story .couple img {
      width: 100%;
}

.story .img {
      width: 50%;
      height: 50%;
      background-size: cover;
      background-position: center;
}

.story .heart {
      width: 50px;
      height: 50px;
      background-color: white;
      display: flex;
      border-radius: 50%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
}

.story .heart i {
      margin: auto;
      color: var(--cream);
}

.gallery{
      background-color: whitesmoke;
}

.gallery .photo-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: repeat(8, 5vw);
      grid-gap: 15px;
}

.gallery .photo-grid__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
}

.gallery .photo-grid__item--1 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 3;
}

.gallery .photo-grid__item--2 {
      grid-column-start: 3;
      grid-column-end: 5;
      grid-row-start: 1;
      grid-row-end: 3;
}

.gallery .photo-grid__item--3 {
      grid-column-start: 5;
      grid-column-end: 9;
      grid-row-start: 1;
      grid-row-end: 5;
}

.gallery .photo-grid__item--4 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 3;
      grid-row-end: 5;
}

.gallery .photo-grid__item--5 {
      grid-column-start: 3;
      grid-column-end: 5;
      grid-row-start: 3;
      grid-row-end: 5;
}

.gallery .photo-grid__item--6 {
      grid-column-start: 1;
      grid-column-end: 5;
      grid-row-start: 5;
      grid-row-end: 7;
}

.gallery .photo-grid__item--7 {
      grid-column-start: 1;
      grid-column-end: 5;
      grid-row-start: 7;
      grid-row-end: 9;
}

.gallery .photo-grid__item--8 {
      grid-column-start: 5;
      grid-column-end: 7;
      grid-row-start: 5;
      grid-row-end: 9;
}

.gallery .photo-grid__item--9 {
      grid-column-start: 7;
      grid-column-end: 9;
      grid-row-start: 5;
      grid-row-end: 9;
}

.gallery .photo-grid__item--10 {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 9;
      grid-row-end: 11;
}

.gallery .photo-grid__item--11 {
      grid-column-start:2;
      grid-column-end: 3;
      grid-row-start: 9;
      grid-row-end: 11;
}

.gallery .photo-grid__item--12 {
      grid-column-start:3;
      grid-column-end: 5;
      grid-row-start: 9;
      grid-row-end: 10;
}

.gallery .photo-grid__item--13 {
      grid-column-start:3;
      grid-column-end: 5;
      grid-row-start: 10;
      grid-row-end: 11;
}

.gallery .photo-grid__item--13 {
      grid-column-start:3;
      grid-column-end: 5;
      grid-row-start: 10;
      grid-row-end: 11;
}

.gallery .photo-grid__item--14 {
      grid-column-start:5;
      grid-column-end: 7;
      grid-row-start: 9;
      grid-row-end: 10;
}

.gallery .photo-grid__item--15 {
      grid-column-start:7;
      grid-column-end: 9;
      grid-row-start: 9;
      grid-row-end: 10;
}

.gallery .photo-grid__item--16 {
      grid-column-start:5;
      grid-column-end: 7;
      grid-row-start: 10;
      grid-row-end: 11;
}

.gallery .photo-grid__item--17 {
      grid-column-start:7;
      grid-column-end: 9;
      grid-row-start: 10;
      grid-row-end: 11;
}

.gallery .photo-grid__item--18 {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 11;
      grid-row-end: 12;
}

.gallery .photo-grid__item--19 {
      grid-column-start: 4;
      grid-column-end: 4;
      grid-row-start: 11;
      grid-row-end: 12;
}

.gallery .photo-grid__item--20 {
      grid-column-start: 5;
      grid-column-end: 5;
      grid-row-start: 11;
      grid-row-end: 12;
}

.gallery .photo-grid__item--21 {
      grid-column-start: 6;
      grid-column-end: 9;
      grid-row-start: 11;
      grid-row-end: 12;
}

.gallery .photo-grid__item--22 {
      grid-column-start: 1;
      grid-column-end: 5;
      grid-row-start: 12;
      grid-row-end: 13;
}

.gallery .photo-grid__item--23 {
      grid-column-start: 5;
      grid-column-end: 9;
      grid-row-start: 12;
      grid-row-end: 13;
}

.gallery .photo-grid__item--23 {
      grid-column-start: 5;
      grid-column-end: 9;
      grid-row-start: 12;
      grid-row-end: 13;
}

.gallery .photo-grid__item--24 {
      grid-column-start: 1;
      grid-column-end: 5;
      grid-row-start: 13;
      grid-row-end: 15;
}

.gallery .photo-grid__item--25 {
      grid-column-start: 5;
      grid-column-end: 7;
      grid-row-start: 13;
      grid-row-end: 14;
}

.gallery .photo-grid__item--26 {
      grid-column-start: 5;
      grid-column-end: 7;
      grid-row-start: 14;
      grid-row-end: 15;
}

.gallery .photo-grid__item--27 {
      grid-column-start: 7;
      grid-column-end: 9;
      grid-row-start: 13;
      grid-row-end: 14;
}

.gallery .photo-grid__item--28 {
      grid-column-start: 7;
      grid-column-end: 9;
      grid-row-start: 14;
      grid-row-end: 15;
}

.gallery .photo-grid__item--29 {
      grid-column-start: 1;
      grid-column-end: 5;
      grid-row-start: 15;
      grid-row-end: 16;
}

.gallery .photo-grid__item--30 {
      grid-column-start: 5;
      grid-column-end: 9;
      grid-row-start: 15;
      grid-row-end: 16;
} 

.rsvp{
      background-color: var(--bg);
}

.rsvp button{
      background-color: var(--cream);
      color: whitesmoke;
      box-shadow: var(--shadow);
}

.rsvp button:hover{
      background-color: whitesmoke;
      color: var(--cream);
}

footer {
      padding: 3rem;
      background-color: var(--cream);
      color: white;
}

footer a {
      color: var(--bg);
      font-weight: bold;
      text-decoration: none;
}

footer a:hover {
      color: white;
}

footer li {
      list-style: none;
      display: inline;
      margin: 0.5rem;
}

.audio-icon-wrapper {
      width: 4rem;
      height: 4rem;
      font-size: 4rem;
      position: fixed;
      bottom: 2.5rem;
      right: 2rem;
      cursor: pointer;
      color: white;
      opacity: 0.5;
      mix-blend-mode: difference;
      animation: rotating 4s linear infinite;
      transform-origin: center;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 0;
}

@keyframes rotating {
      form {
            transform: rotate(0);
      }

      to {
            transform: rotate(360deg);
      }
}

/* Media Query */
/* Extraaa large */
@media(max-width: 1200px) {
      html {
            font-size: 75%;
      }
}

/* laptop */
@media(max-width: 992px) {
      html {
            font-size: 70%;
      }

      .simply-countdown>.simply-section {
            padding: 35px;
      }

      .home .heart {
            display: none;
      }

      .story .book-view .book {
            height: 600px !important;
            width: 300px !important;
            justify-items: center;
      }
      
      .story .book-view .page {
            height: 600px !important;
            width: 300px !important;
            justify-items: center;
      }

      .story .heart {
            display: none;
      }
}

/* tablet */
@media(max-width: 768px) {
      html {
            font-size: 60%;
      }

      .mynavbar .nav-link {
            font-size: 2rem;
            text-align: center;
      }

      .sticty-top{
            overflow: hidden;
      }

      .story .book-view .book {
            height: 400px !important;
      }

      .story .book-view .page {
            height: 400px !important;
      }

      .story .heart {
           display: none;
      }
}

/* mobile phone */
@media(max-width: 576px) {
      html {
            font-size: 55%;
      }
}