:root {
  --bg: #845A62;
  --bg-accent: #845A62;
  --text: #845A62;
  --link: ##845A62;
  --box: rgba(0, 0, 0, 0.55);
  --border: rgba(255, 255, 255, 0.18);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, serif;
  color: var(--text);

  background-image:
    linear-gradient(rgba(18,10,26,0.45), rgba(18,10,26,0.65)),
    url("assets/ppurpleclouds.jpg"),        /* full background */
    url("assets/nebs_clouds.jpg");        /* right-side image */

  background-size:
    contain,
    contain,
    contain;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  background-position:
    left center,
    left center,
    right center;

  background-color: black;
}

.page {
  width: min(700px, 90%);
  margin: 0 auto;
  padding: 1.5rem 0;
}

.glass-box {
  background: var(--box);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(8px);
}

.hero {
  min-height: 300px;              /* makes it bigger */
  padding: 3rem;

  display: flex;
  flex-direction: column;
  justify-content: space-between;        /* vertical centering */
  gap: 2rem;
}

.hero-title {
  text-align: center;
  font-size: 3rem;
  text-shadow: 0 0 10px rgba(216, 167, 255, 0.4);
  margin: 0;
}

.hero-content {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.hero-img img {
  width: 200px;
  border-radius: 12px;
}
.hero-text {
  max-width: 500px;
  text-align: right;
}

a {
  color: var(--link);
}

.corner-dog {
  position: fixed;
  right: 1.5rem;
  bottom: 0;
  width: min(260px, 35vw);
  z-index: 0;
  pointer-events: none;
}

.page {
  position: relative;
  z-index: 1;
}