html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

html {
  --layoutWidthMax: 1440px;
  --scrollbarOffset: 8px;
  --angleNormal: 0deg;
  --angleStrong: 0deg;
  --angleNormalSin: 0.25;
  --angleStrongSin: 0.5;
  --sectionPaddingTop: 0px;
  --scrollbarWidth: 10px;

  --layoutWidth: var(--layoutWidthMax);
  --sectionAngleSin: var(--angleStrongSin);
  --transformOriginX: calc(var(--gutterWidth) * 2);

  --gutterWidth: var(--windowWidth);/*calc(var(--windowWidth) / 2 - var(--layoutWidth) / 2);*/
  --windowWidth: calc(100vw - var(--scrollbarWidth));
  --windowHeight: calc(100vh);
  --offsetX: var(--gutterWidth);
  --gradientHeight: calc(
    100% + var(--sectionPaddingTop) + var(--transformOriginX) *
      var(--sectionAngleSin)
  );
}

#gradient-canvas {
  position: absolute;
  width: calc(var(--windowWidth));
  height: 100%;
  --gradient-color-1: #000000;
  --gradient-color-2: #0D0D0D;
  --gradient-color-3: #1A1A1A;
  --gradient-color-4: #FFFFFF;
  


  --gradientAngle: var(--angleStrong);
  
  --gradientHeight: calc(
    100% + var(--sectionPaddingTop) + var(--transformOriginX) *
      var(--sectionAngleSin)
  );
  
  /*--gradientHeight: 1000px;*/
  --offsetX: var(--gutterWidth);

  transform-origin: var(--transformOriginX) 100%;
  transform: skewY(var(--gradientAngle));

  /* left: calc(var(--windowWidth) / 2); */
  left:0;
  top: 0;
  z-index: 0;
}
#dummy {
  width: 100%;
  height: 4500px;
}

h1 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 4rem;
  color: #343434;
  position: absolute;
  padding: 2rem;
  top: 4rem;
  z-index: 100;
  text-align: center;
  width: 100%;
}
img {
  position: absolute;
  z-index: 100;
  top: 4rem;
  width: 200px;
  height: 200px;
  clip-path: circle(50% at 50% 50%);
}

.circle-img {
  width: 200px;
  height: 200px;
  clip-path: circle(50% at 50% 50%);
}