/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: none !important;
  background-color: white;
  color: black;
  font-family: Times;
  overscroll-behavior: none;
}

/* Content stays centered at 900px, but html/body span the full
   viewport so the blend-mode cursor always has something to blend
   against, even out in the side margins. */
.page-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.site-header {
  text-align: center;
  padding: 15px 15px;
}
.site-header h1 {
  margin-bottom: 10px;
  font-size: 30px;
}
.site-header nav a {
  margin: 0 10px;
  text-decoration: underline;
  color: black;
  font-size: 12px;
  line-height: 1.5;
}

/* Text alignment helpers */
.center-text {
  text-align: center;
}

/* Cursor */
#cursor {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  filter: blur(4px);
  mix-blend-mode: difference;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* Bottom-left corner image */
.corner-image {
  position: fixed;
  bottom: -80px;
  left: -200px;
  width: 1000px;
  max-width: none;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.3;
}

/* Dream log scrolling box */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.scroll-box {
  width: 600px;
  height: 400px;
  overflow: hidden;
  border: 1px solid white;
  padding: 25px;
  box-sizing: border-box;
  position: relative;
}

.scroll-content {
  position: absolute;
  width: calc(100% - 50px);
  animation: scrollUp 120s linear infinite;
}

.scroll-content p {
  margin-bottom: 2em;
  line-height: 1.5;
}

.scroll-box:hover .scroll-content {
  animation-play-state: paused;
}

@keyframes scrollUp {
  from {
    transform: translateY(12%);
  }
  to {
    transform: translateY(-100%);
  }
}

/* Newsletter form */

.newsletter-wrap {
  max-width: 400px;
  margin: 40px auto;
  text-align: center;
}

.newsletter-wrap input[type="email"],
.newsletter-wrap input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  margin-top: 4px;
  font-family: Times;
}

.newsletter-wrap label {
  display: block;
  text-align: left;
  font-size: 14px;
}

.newsletter-wrap .button {
  margin-top: 10px;
  font-family: Times;
  cursor: none !important;
}

.newsletter-wrap .refferal_badge {
  width: 140px !important;
  height: auto !important;
  opacity: 0.5;
  filter: grayscale(100%);
  margin-top: 20px;
  transition: opacity 0.3s ease;
}

.newsletter-wrap .refferal_badge:hover {
  opacity: 0.8;
}

.newsletter-wrap h3 {
  font-weight: normal;
  letter-spacing: 0px;
  margin-bottom: 20px;
}

.newsletter-wrap .indicates-required {
  font-size: 12px;
  opacity: 0.7;
}

.newsletter-wrap .asterisk {
  color: black;
}

.newsletter-wrap #mc-embedded-subscribe {
  background: black;
  color: white;
  border: none;
  padding: 8px 20px;
  font-family: Times;
  font-size: 14px;
  letter-spacing: 0px;
  cursor: none !important;
}

.newsletter-wrap #mc-embedded-subscribe:hover {
  background: #333;
}

/* Photo Re-sizing */

img {
  max-width: 350px;
  width: 100%;
  height: auto;
}

/* Image gallery flip box */
.gallery-box-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-box {
  width: 500px;
  height: 500px;
  overflow: hidden;
  border: 1px solid black;
  background-color: black;
}

#gallery-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  box-sizing: border-box;
}