img.responsive,
.responsive {
  max-width: 100%;
  height: auto;
}
@font-face {
  font-family: 'IbarraRealNova-VariableFont_wght';
  src: url('../fonts/IbarraRealNova-VariableFont_wght.ttf'), url('../fonts/IbarraRealNova-VariableFont_wght.woff');
}
* {
  padding: 0px;
  margin: 0px;
}
html {
  scroll-behavior: smooth;
}
hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  margin: 3em;
}
h1 {
  font-size: 4em;
  font-weight: light;
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f);
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  /* Additional twinkling pearls with different animation timing */
}
body .pearls {
  z-index: -1;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  position: fixed;
  background: white;
  box-shadow: 80vw 2vh 1px #fff, 28vw 79vh 1px #fff, 94vw 89vh 2px #fff, 54vw 29vh 2px #fff, 93vw 90vh 1px #fff, 22vw 79vh 1px #fff, 89vw 41vh 1px #fff, 44vw 53vh 1px #fff, 40vw 58vh 2px #fff, 54vw 97vh 2px #fff, 66vw 89vh 1px #fff, 42vw 90vh 1px #fff, 20vw 22vh 1px #fff, 2vw 73vh 1px #fff, 70vw 12vh 1px #fff, 89vw 98vh 2px #fff, 50vw 19vh 1px #fff, 70vw 18vh 2px #fff, 94vw 47vh 1px #fff, 9vw 38vh 1px #fff, 77vw 44vh 2px #fff, 37vw 22vh 1px #fff, 40vw 87vh 2px #fff, 32vw 4vh 1px #fff, 75vw 83vh 1px #fff, 63vw 48vh 2px #fff, 98vw 74vh 1px #fff, 84vw 61vh 1px #fff;
  animation: twinkle 8s infinite linear;
}
body .pearls::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: white;
  box-shadow: 54vw 72vh 1px #fff, 14vw 17vh 1px #fff, 38vw 68vh 1px #fff, 70vw 64vh 1px #fff, 53vw 32vh 2px #fff, 44vw 3vh 2px #fff, 82vw 41vh 1px #fff, 74vw 68vh 1px #fff, 52vw 34vh 2px #fff, 3vw 100vh 2px #fff, 47vw 93vh 1px #fff, 23vw 22vh 2px #fff, 59vw 24vh 2px #fff, 86vw 66vh 2px #fff, 85vw 27vh 2px #fff, 32vw 31vh 2px #fff, 92vw 99vh 2px #fff, 56vw 81vh 1px #fff, 92vw 21vh 2px #fff, 85vw 68vh 2px #fff, 87vw 85vh 2px #fff, 73vw 100vh 1px #fff, 10vw 46vh 1px #fff, 31vw 48vh 1px #fff, 91vw 45vh 1px #fff, 47vw 60vh 2px #fff, 56vw 6vh 2px #fff, 98vw 45vh 1px #fff, 38vw 4vh 2px #fff, 80vw 55vh 2px #fff, 70vw 87vh 2px #fff, 71vw 96vh 1px #fff, 1vw 62vh 1px #fff, 31vw 76vh 2px #fff, 2vw 16vh 2px #fff, 95vw 45vh 2px #fff, 30vw 42vh 2px #fff, 9vw 12vh 2px #fff, 7vw 22vh 1px #fff, 99vw 97vh 2px #fff, 71vw 54vh 1px #fff, 73vw 65vh 2px #fff, 86vw 83vh 1px #fff, 86vw 97vh 1px #fff, 6vw 24vh 1px #fff, 91vw 10vh 2px #fff, 94vw 11vh 2px #fff, 52vw 93vh 2px #fff, 89vw 69vh 1px #fff, 55vw 71vh 2px #fff, 2vw 88vh 2px #fff, 34vw 46vh 2px #fff, 16vw 97vh 1px #fff, 77vw 19vh 2px #fff, 21vw 69vh 1px #fff, 88vw 65vh 2px #fff, 62vw 54vh 1px #fff, 52vw 52vh 1px #fff, 80vw 17vh 2px #fff, 79vw 99vh 1px #fff, 36vw 8vh 2px #fff, 93vw 61vh 1px #fff, 80vw 43vh 1px #fff, 74vw 20vh 1px #fff, 14vw 63vh 1px #fff, 16vw 86vh 1px #fff, 54vw 75vh 1px #fff, 64vw 55vh 2px #fff, 40vw 36vh 1px #fff, 94vw 25vh 1px #fff, 77vw 41vh 2px #fff, 85vw 33vh 1px #fff, 99vw 12vh 1px #fff, 32vw 24vh 2px #fff, 38vw 30vh 1px #fff, 34vw 63vh 2px #fff, 95vw 49vh 2px #fff, 47vw 1vh 2px #fff, 41vw 32vh 2px #fff, 19vw 59vh 2px #fff, 43vw 38vh 2px #fff, 85vw 1vh 1px #fff, 17vw 68vh 1px #fff, 86vw 52vh 1px #fff, 52vw 34vh 1px #fff, 68vw 26vh 2px #fff, 67vw 89vh 2px #fff, 100vw 84vh 2px #fff, 100vw 26vh 1px #fff, 79vw 20vh 1px #fff, 96vw 62vh 1px #fff, 44vw 17vh 2px #fff, 25vw 71vh 1px #fff, 62vw 37vh 1px #fff, 47vw 50vh 1px #fff, 57vw 5vh 1px #fff, 16vw 43vh 2px #fff, 9vw 47vh 1px #fff, 49vw 40vh 2px #fff, 47vw 50vh 1px #fff;
  animation: twinkle 6s infinite linear reverse;
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}
body .content {
  color: #dadada;
  display: grid;
  grid-template-columns: 30% auto;
  grid-gap: 1.5%;
}
body .content .animationCell {
  position: sticky;
  top: 0px;
  align-self: start;
}
@keyframes fadeKeyframes {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes makeVisible {
  0%,
  100% {
    visibility: visible;
  }
}
body .content .animationCell img.poster {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0px;
}
body .content .animationCell img.proper {
  z-index: 3000;
  animation-name: fadeKeyframes, makeVisible;
  animation-timing-function: linear, linear;
  animation-iteration-count: 1, 1;
  animation-duration: 6s, 0.1s;
  animation-fill-mode: forwards, forwards;
  animation-delay: 6s, 0s;
}
body .content .animationCell img.pearly {
  z-index: 2000;
  animation-name: fadeKeyframes, makeVisible;
  animation-timing-function: linear, linear;
  animation-iteration-count: 1, 1;
  animation-duration: 6s, 0.1s;
  animation-fill-mode: forwards, forwards;
  animation-delay: 18s, 6s;
  visibility: hidden;
}
body .content .animationCell img.full {
  z-index: 1000;
  visibility: hidden;
  animation-name: makeVisible;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-delay: 6s;
}
body .content div {
  display: grid;
}
@keyframes logoProper {
  0% {
    background-image: url("../img/logo-pearlparty.png");
    opacity: 1;
  }
  100% {
    background-image: url("../img/logo-pearlparty.png");
    opacity: 0;
  }
}
@keyframes logoPearly {
  0% {
    background-image: url("../img/logo-pearlparty-pearly.png");
    opacity: 0;
  }
  100% {
    background-image: url("../img/logo-pearlparty-pearly.png");
    opacity: 1;
  }
}
body .content div .logo {
  position: relative;
  width: 100%;
  height: 50vh;
}
body .content div .logo .image {
  max-width: 30vw;
  margin: auto;
}
body .content div .logo .proper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 20;
  background-image: url("../img/logo-pearlparty.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: 6s ease-in-out 0s logoProper;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
body .content div .logo .pearly {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 10;
  background-image: url("../img/logo-pearlparty-pearly.png");
  opacity: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: 6s ease-in-out 0s logoPearly;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
body .content div p {
  font-family: 'IbarraRealNova-VariableFont_wght';
  font-size: 19px;
  padding: 6px 12px;
  line-height: 1.5;
}