main {
  overflow-x: hidden;
}

header {
  height: auto;
}

.space{
  margin: calc(50vh - 1em) 0;
}

.the-sun-right {
  /* R - h = sqrt(R^2 - L^2 / 4) */
  /* R^2 - 2Rh + h^2 = R^2 - L^2/4 */
  /* - 2Rh + h^2 = - L^2/4 */
  /* 2Rh - h^2 = L^2/4 */
  /* 8Rh - 4h^2 = L^2 */
  /* sqrt(8Rh - 4h^2) = L */

  float: right;

  --planet-scale: 1;
  --planet-size: min(var(--planet-scale) * 1vw, var(--planet-scale) * 1vh);
  
  --p: min(1vw, 1vh);
  --r: calc(var(--planet-scale));
  --h: calc(var(--r) * 0.005);
  
  width: calc(0.005 * var(--planet-size));
  height: calc(var(--p) * sqrt(8 * var(--r) * var(--h) - 4 * pow(var(--h), 2)));

  shape-outside: circle(var(--planet-size) at calc(100% + var(--planet-size) * 0.995));
  clip-path: circle(var(--planet-size) at calc(100% + var(--planet-size) * 0.995));

  background: rgb(255, 214, 10);
}

.the-sun-top {
  margin-bottom: 4em;
  float: top;

  --planet-scale: 1;
  --planet-size: min(var(--planet-scale) * 1vw, var(--planet-scale) * 1vh);
  
  --p: min(1vw, 1vh);
  --r: calc(var(--planet-scale));
  --h: calc(var(--r) * 0.005);
  
  width: 100%;
  height: calc(0.01 * var(--planet-size));

  shape-outside: circle(var(--planet-size) at 50% calc(-1 * var(--planet-size) * .99));
  clip-path: circle(var(--planet-size) at 50% calc(-1 * var(--planet-size) * .99));

  background: rgb(255, 214, 10);
}