:root {
  --pink: #e51592;
  --green: #53664a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--green);
  color: var(--pink);
  font-family: "Alata", sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 3vw, 3rem);
  gap: 0.75rem;
}

/* small "homepage" label, top left */
.page-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

/* the framed panel */
.frame {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--green);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.45);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* blurred angel background */
.angel {
  position: absolute;
  inset: 4% 0 10% 0;
  width: 100%;
  height: 86%;
  object-fit: contain;
  filter: blur(3.5px);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

/* "harshitha" */
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 100%;
  margin: 0;

  font-family: "Swanky and Moo Moo", "Moo Moo", cursive;
  font-weight: normal;
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  letter-spacing: 0.04em;
  color: var(--pink);
  text-align: center;
  line-height: 1;
}

/* bottom links */
.links {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: clamp(0.75rem, 3vh, 1.75rem);

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 0;
  padding: 0 1rem;
}

.links a {
  font-family: "Alata", sans-serif;
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  letter-spacing: 0.03em;
  color: var(--pink);
  text-decoration: none;
  padding: 0.25rem 0.1rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* the little dots between links */
.links a:not(:last-child)::after {
    content: ".";
    display: inline-block;
    margin: 0 0.45em 0 0.3em;
    color: var(--pink);
}

.links a:hover,
.links a:focus-visible {
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.links a:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* ---------- responsive ---------- */

/* tablets / small laptops */
@media (max-width: 768px) {
  .angel {
    inset: 6% 0 14% 0;
    height: 80%;
  }
}

@media (max-width: 480px) {
  body {
    justify-content: center;   /* centre image + links as a group */
    align-items: center;
  }

  /* image goes back into normal flow instead of being pinned */
  .angel {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
  }

  /* links sit directly under the image */
  .links {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 0.15rem 2.5rem;
    margin-top: -0.5rem;   /* pulls them closer; make it more negative to tighten */
    padding: 0;
  }

  .links a:not(:last-child)::after {
    content: none;
  }

  /* keep the title over the angel (the links shift the group down a bit) */
  .title {
    top: calc(50% - 1.5rem);
  }
}

/* short landscape screens */
@media (max-height: 420px) and (orientation: landscape) {
  .title {
    font-size: clamp(2rem, 7vh, 3rem);
  }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .links a {
    transition: none;
  }
}