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

html,body {
  height:100%;
  font-family: 'Inter', system-ui, sans-serif;
  background:#0d0d0d;
  color:#f0f0f0;
  display:flex;
  align-items:center;
  text-align:right;
}

/* Layout wrapper */
.wrapper { padding:1rem; }

/* Headline block */
.headline {
  position:relative;      /* for absolutely-positioned suffix */
  display:inline-block;   /* just wide enough for the words column */
  font-size:2.4rem;
  line-height:1.2;
}

/* Word column */
.prefixes {
  display:flex;
  flex-direction:column;  /* stack words */
  gap:.75rem;
}

.prefixes a {
  text-decoration:none;
  color:#f0f0f0;
  transition:color .25s ease;
  outline: none;

  &:focus, &:hover {
    text-decoration: underline;
  }

  &[href^="https://dg.cx./log"],
  &[href="https://dg.cx/"] {
    cursor: default;
    text-decoration: none;
  }
  &:not(&[href])::first-letter,
  &[href^="https://dg.cx/"]::first-letter, &[href^="https://http."]::first-letter, &[data-suffix^="."]::first-letter, &[href^="http://xn--"]::first-letter {
    visibility: hidden;
  }
  &[href="https://dg.cx/more"]::after {
    content: "...";
  }
}

/* The moving suffix */
.suffix {
  position:absolute;
  top: 0;
  left:100%;            /* sit just to the right of the column */
  margin-left:5px;     /* breathing room */
  white-space:nowrap;
  color:#888;
  transition:transform .35s ease;
}

body:has(a[data-suffix=".log"]) .suffix {
  visibility: hidden;
}
body:has(a[data-suffix=".log"]:hover) .suffix {
  visibility: visible;
}

/* Tagline */
.tagline {
  margin-top: 2rem;
  font-size: 1.05rem;
  color: #aaa;
  font-style: italic;
  min-width: 30ex;
  white-space: pre;
}

.tagline:before {
  visibility: hidden;
  content: "👋";
}

body:has(a[href^="https://http."]) .tagline {
  display: none;
}

#img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px;
  width: 33%;
  height: auto;
  visibility: hidden;
}

body:has(a[href*="#"]:hover) #img, body:has(a[href*="#"]:focus) #img {
  visibility: visible;
}

/* Minimal mobile tweak: shrink headline */
@media (max-width:500px) {
  .headline { font-size:1.9rem; }
  .wrapper {
    width: 18ex;
  }
  .headline { font-size: 1.5rem; }
}
@media (max-width:771px) {
  #img {
    right: 2em;
  }
}
@media (min-width:770px) {
  html,body {
    justify-content: center;
  }
  #img {
    left: 2em;
  }
}