<h1>
  <span>Resize</span> and <span>enjoy!</span>
</h1>

<div class="sun"></div>
<div class="moon"></div>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
  --lower-bound: 400;
  --upper-bound: 1200;

  --wideness: calc(
    (
        clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) -
          var(--lower-bound)
      ) / (var(--upper-bound) - var(--lower-bound))
  );

  --highlight-color: hsl(45 100% 60%);
}

body {
  background-image: linear-gradient(
    calc(var(--wideness) * 360deg / 2 - 45deg),
    hsl(226 28.1% 10%) 10%,
    hsl(226 28.1% 30%) 70%
  );
}

.sun,
.moon {
  position: absolute;
  z-index: -1;

  offset-path: padding-box;

  opacity: max(var(--wideness), 0.6);
}

.sun {
  offset-distance: calc(var(--wideness) * 100% / 2);
}

.moon {
  offset-distance: calc(var(--wideness) * 100% / 2 + 50%);
}

h1 {
  position: absolute;
  white-space: nowrap;
  text-align: center;

  span {
    display: inline-block;

    position: relative;
    bottom: calc((1.2lh - var(--wideness) * 1.2lh) * var(--direction));
    left: calc((50% - min(var(--wideness) * 2, 1) * 50%) * var(--direction));
    transform: translate(
      calc((-50% - min(var(--wideness) * 2, 1) * -50%) * var(--direction))
    );
  }

  span:nth-child(1) {
    --direction: 1;
  }

  span:nth-child(2) {
    --direction: -1;
  }
}

/* Aesthetic Styles */

:root {
  --rem-value: clamp(10px, 3vw, 18px);
}

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

html {
  font-size: var(--rem-value);

  font-family: "Montserrat", sans-serif;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;

  overflow: hidden;
}

h1 {
  font-size: 4rem;
  text-transform: uppercase;

  color: var(--highlight-color);
  text-shadow: 4px 4px 0px hsl(from var(--highlight-color) h s calc(l - 20)),
    4px 4px 10px hsl(from var(--highlight-color) h s calc(l - 20));
}

.sun,
.moon {
  aspect-ratio: 1;

  border-radius: 50%;
}

.sun {
  width: min(250px, 50vw);
  background-color: orange;
  box-shadow: 0 0 35px 5px yellow, 0 0 25px 10px yellow inset;
}

.moon {
  width: min(200px, 30vw);

  background-color: white;
  box-shadow: 0 0 35px 5px white, 0 0 25px 10px white inset;
}