@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans');
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic');

::-webkit-input-placeholder {
  color: #999 !important;
  font-style: italic;
}
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Josefin Sans', sans-serif;
}
textarea {
  resize: none;
}
nav > ul > li > a > span {
  display: block;
  font-size: 0.7rem;
}
nav > ul > li > a:hover {
  cursor: pointer;
  color: #fff !important;
}

#home h1 {
  color: #ddd;
  font-size: 2.5rem;
}
#home span.couple {
  font-size: 3rem;
}
#home span.heart {
  font-size: 2.5rem;
}
#home p.schedule {
  color: #ddd;
  font-style: italic;
  font-size: 1.1rem;
}
#home div.scrolldown {
  background-color: #222;
}
#home div.scrolldown label {
  color: #ddd;
}

#couple div.avatar {
  width: 185px;
  height: 185px;
}
#couple h1 {
  font-size: 2.1rem;
}
#couple h2 {
  font-size: 2.3rem;
}
#couple h2 ~ span {
  color: #eee;
  font-size: 1.1rem;
}
#couple h3 {
  font-size: 3rem;
}

#quote p {
  padding-inline: 5px;
  font-size: 0.9rem;
}
#quote span {
  color: #ccc;
}

#timeline h1 {
  font-size: 2.1rem;
}
#timeline p {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}
#timeline p.geolocation {
  margin-top: 0;
}
#timeline p.geolocation span {
  color: #fff;
  font-size: 1rem;
}

#gift h1 {
  font-size: 2.1rem;
}
#gift p {
  font-size: 0.9rem;
}
#gift p.account-number {
  font-size: 1.3rem;
}
#gift p.account-name {
  color: #ddd;
  font-size: 0.9rem;
}
#gift button#form-submit {
  border-radius: 20px !important;
  font-size: 1rem;
  width: 12rem;
}

#thankiu {
  background-color: #9b2b2b;
  padding-bottom: 5rem;
  margin-top: -5px;
}
#thankiu h1 {
  font-size: 2.5rem;
}
#thankiu p {
  padding-bottom: 6rem !important;
}
#thankiu a {
  color: #fff;
  text-decoration: none;
}
#thankiu a:hover {
  text-decoration: underline;
}

#welcome {
  opacity: 1;
}
#welcome h1 {
  color: #d8d8d8;
  font-size: 2rem;
}
#welcome #guest {
  margin-top: 4rem;
}
#welcome .title {
  margin-bottom: 7rem !important;
}
#welcome .couple {
  font-size: 2.8rem;
}
#welcome .heart {
  font-size: 2.5rem;
}

#loading {
  opacity: 1;
}
#loading small {
  display: block;
}
#loading .position {
  margin-bottom: 20rem !important;
}
#loading .progress {
  height: 0.5rem;
}
#loading .progress-bar {
  width: 0%;
}

#music {
  display: none;
}
#music i {
  color: #e02323 !important;
}

#gallery h1 {
  font-size: 2.1rem;
}
#gallery .indicator {
  background-color: #fff;
}
#gallery .control, #gallery .indicator {
  filter: drop-shadow(0 1px 0 #606060);
}

.font-esthetic {
  font-family: Sacramento, cursive;
  color: #fff;
}
.font-arabic {
  font-family: 'Noto Naskh Arabic', serif;
  color: #fff;
}

.img-crop {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 14rem;
  height: 14rem;
}
.img-crop > img {
  display: inline;
  margin: 0 auto;
  height: auto;
  width: 100%;
}
.image-loading {
  border: 3px solid #fff;
  border-radius: 50%;
  width: 8rem;
}

.btn-music {
  position: fixed;
  bottom: 9vh;
  right: 2vh;
  height: 27px;
  width: 28px;
  z-index: 1055;
}
.btn-music i {
  margin-left: -2px;
}

.mouse-animation {
  box-sizing: content-box;
  border: 0.1rem solid #fff;
  border-radius: 1.4rem;
  padding: 0.25rem 0.625rem;
  height: 2rem;
  opacity: 0.75;
}
.mouse-animation > .scroll-animation {
  background-color: #fff;
  border-radius: 25%;
  width: 0.25rem;
  height: 0.625rem;
  animation: scrolling 2.5s linear infinite;
}
.spin-button {
  animation: sound 5s linear infinite;
}
.animate-love {
  animation: love 5s ease-in-out infinite;
}

.heart-right {
  top: 0%;
  right: 10%;
}
.heart-left {
  top: 0%;
  left: 10%;
}

.dark-section {
  background-color: #9b2b2b;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}
.loading-page {
  position: fixed;
  background-color: #8f2525;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1056;
}

.ajs-message {
  color: #fff;
  border-radius: 10px;
  min-width: 285px;
}
.ajs-success {
  background-color: #038d4f !important;
  border: 1px solid #4af0a6;
}
.ajs-error {
  background-color: #b53535 !important;
  border: 1px solid #ff7474;
}

@media(min-width: 601px) {
  #carousel-foto-satu, #carousel-foto-dua {
    margin: auto;
    width: 600px;
  }
  #qrcode {
    width: 200px !important;
  }
}

@keyframes sound {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes love {
  50% {
    transform: translateY(1rem);
  }
}
@keyframes scrolling {
  0% {
    opacity: 0;
  }
  10% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1rem);
    opacity: 0;
  }
}