/* site.css - basic stylesheet */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1b2433; /* fallback while the image loads */
  background-image: url("../_images/sky_buddha_web2.gif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  font-family: Georgia, "Times New Roman", serif;
  color: #ffffff;
}

/* Visually hidden text, still read by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link pinned to the 4th quadrant (lower right) of the window */
.quadrant-4 {
  position: fixed;
  right: 5%;
  bottom: 5%;
  color: #fffff0; /* ivory */
  font-size: 1.25rem;
  text-decoration: none;
}

.quadrant-4:hover,
.quadrant-4:focus {
  text-decoration: underline;
}

/* Quote returned by cgi-bin/wisdom.cgi, in the same dark lower-right area */
.wisdom {
  position: fixed;
  right: 5%;
  bottom: 5%;
  max-width: 40%;
  max-height: 85vh;          /* safety net: very long quotes scroll instead of running off screen */
  max-height: 85dvh;         /* newer browsers: accounts for phone browser toolbars */
  overflow-y: auto;
  color: #fffff0; /* ivory */
  font-size: 1.25rem;
  font-size: clamp(1rem, 2.2vw, 1.25rem);  /* shrinks a little on smaller windows */
  line-height: 1.5;
}

/* Narrow screens (phones in portrait): use more of the width */
@media (max-width: 700px) {
  .wisdom {
    max-width: 85%;
  }
}

/* Short screens (phones in landscape): wider box, smaller type, tighter lines */
@media (max-height: 500px) {
  .wisdom {
    right: 4%;
    bottom: 4%;
    max-width: 55%;
    max-height: 90vh;
    max-height: 90dvh;
    font-size: 0.95rem;
    font-size: clamp(0.85rem, 3.4vh, 1.05rem);
    line-height: 1.35;
  }
}