@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap");

@font-face {
  font-family: Autography;
  src: url("../../aulia_yusuf/fonts/autography.otf") format("opentype");
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #e9e9e9;
  font-family: "Montserrat", sans-serif;
}

header {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header-name-root {
  position: absolute;
  left: -3.7em;
  right: 0;
}

.header-name-label {
  font-size: 6em;
  font-family: "Autography", sans-serif;
  color: #fff;
  line-height: 1.2;
}

.header-name-label-symbol {
  font-size: 1.6em;
  line-height: 0;
  position: absolute;
  top: 0.7em;
}

.header-date-label {
  font-size: 1.2em;
  color: #fff;
  margin-left: 3.7em;
}

.header-background-root {
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.header-background-image {
  width: 100%;
  height: 100%;
  z-index: -2;
  object-fit: cover;
}

.header-background-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -moz-box-shadow: inset 0 -128px 48px -64px #e9e9e9;
  -webkit-box-shadow: inset 0 -128px 48px -64px #e9e9e9;
  box-shadow: inset 0 -128px 48px -64px #e9e9e9;
}

.quotes-content {
  font-size: 2.3em;
  font-family: "Autography", sans-serif;
}

.quotes-author {
  font-weight: 500;
  font-style: italic;
  font-size: 0.8em;
}

main {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.main-background-root {
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: auto;
  z-index: -1;
}

.main-background-image {
  width: 100%;
  height: auto;
  z-index: -2;
}

.main-background-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -moz-box-shadow: inset 0 32px 16px -8px #e9e9e9,
    inset 0 -32px 16px -8px #e9e9e9, inset 0 64px 48px -8px #e9e9e9;
  -webkit-box-shadow: inset 0 32px 16px -8px #e9e9e9,
    inset 0 -32px 16px -8px #e9e9e9, inset 0 64px 48px -8px #e9e9e9;
  box-shadow: inset 0 32px 16px -8px #e9e9e9, inset 0 -32px 16px -8px #e9e9e9,
    inset 0 64px 48px -8px #e9e9e9;
}

.title1 {
  font-weight: 600;
  font-size: 1.6em;
  color: #e2cf7a;
}

.title2 {
  font-weight: 800;
  font-size: 1.6em;
  color: #1b1464;
}

.subtitle {
  color: #4d4d4d;
}

.countdown-value {
  font-weight: 800;
  font-size: 4em;
  line-height: 1;
  color: #1b1464;
}

.countdown-indicator {
  font-weight: 500;
  font-size: 1.3em;
  line-height: 0;
  color: #cca811;
}

.person-image {
  width: 128px;
  height: 128px;
  border-radius: 50%;
}

.person-name {
  font-family: "Dancing Script", cursive;
  font-size: 1.8em;
  color: #4d4d4d;
}

.person-type {
  font-weight: 600;
  font-style: italic;
  font-size: 0.8em;
  line-height: 0;
  color: #d1b643;
}

.person-parent {
  font-weight: 700;
  font-size: 0.9em;
  line-height: 0;
  color: #4f4f6d;
}

@media (min-width: 768px) {
  .person-image {
    width: 240px;
    height: 240px;
  }

  .person-name {
    font-size: 3em;
  }

  .person-type {
    font-size: 1.2em;
    line-height: 0.5;
  }

  .person-parent {
    font-size: 1.5em;
    line-height: 0.5;
  }
}

.reception-information-item {
  display: flex;
  align-items: top;
  text-align: left;
  font-weight: 600;
}

.reception-information-item + .reception-information-item {
  margin-top: 1rem;
}

.reception-information-item-icon {
  margin: 0;
  color: #000;
}

.reception-information-item-text {
  margin: 0.25rem 1rem 0 1rem;
  color: #303256;
}

footer {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-background-root {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: auto;
  z-index: -1;
}

.footer-background-image {
  width: 100%;
  height: auto;
  z-index: -2;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.footer-background-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -moz-box-shadow: inset 0 32px 16px -8px #e9e9e9,
    inset 0 64px 48px -8px #e9e9e9;
  -webkit-box-shadow: inset 0 32px 16px -8px #e9e9e9,
    inset 0 64px 48px -8px #e9e9e9;
  box-shadow: inset 0 32px 16px -8px #e9e9e9, inset 0 64px 48px -8px #e9e9e9;
}

.footer-thank-you {
  font-size: 1.3em;
  font-weight: 500;
  font-style: italic;
  color: #c6a000;
}

.footer-thank-you-name {
  font-size: 3.5em;
  font-family: "Autography", sans-serif;
  color: #020244;
}

.btn-primary {
  background-color: #2c2c6d;
  border-color: #2c2c6d;
  color: #e2cf7a;
  font-weight: 700;
}

.btn-primary.focus,
.btn-primary:focus {
  color: #e2cf7a;
  background-color: #3d3d99;
  border-color: #4242a6;
  box-shadow: 0 0 0 0.2rem rgb(102 102 255 / 50%);
}

.btn-primary:hover {
  color: #e2cf7a;
  background-color: #3d3d99;
  border-color: #4242a6;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: #e2cf7a;
  background-color: #5252cc;
  border-color: #4d4cbf;
}

.height-spacer-half {
  height: 48px;
}

.height-spacer {
  height: 96px;
}