/*
 * https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j
 * https://css-tip.com/screen-dimension/
*/
@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --100vh {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --100vh: 100vh;
  --px-width: calc(
    tan(atan2(var(--100vw), 1px))
  );
  --px-height: calc(
    tan(atan2(var(--100vh), 1px))
  );
  /* calc() wrapper required for Safari, bug:
  // https://bugs.webkit.org/show_bug.cgi?id=263000
  */
}

body {
  height: calc(var(--px-height) * 1px);
  width: calc(var(--px-width) * 1px);
}
body::before {
  counter-reset: w var(--px-width) h var(--px-height);
  content: counter(w) "×" counter(h);
  display: grid;
  height: 100vh;
  place-items: center;
  width: 100vw;
}

@layer base {
  html {
    background-color: #262626;
    background-position: top center;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(50% 50% at top center, rgb(0 0 0 / 0.66), #262626),
      linear-gradient(180deg, #fff, #262626);
    background-size: 120% 2000px, 100% 2000px;
  }
  
  body {
    color: #fff;
    display: grid;
    font-family: system-ui;
    font-size: 3rem;
    font-weight: 900;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    text-shadow: 0 1px 2px #000;
  }
}